开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
基础 api
基础
应用级事件
界面
导航栏
tabbar
路由
交互反馈
下拉刷新
联系人
选择城市
选择日期
动画
画布
地图
计算路径
键盘
滚动
节点查询
选项选择器
级联选择
设置窗口背景
设置页面是否支持下拉
字体
跳转
多媒体
缓存
文件
位置
网络
设备
worker
数据安全
分享
收藏
自定义通用菜单
更新管理
web-view组件控制
升级支付宝最新版本
隐私信息授权
小程序广告
开放能力 api
开发 > api > 基础 api > 界面 > 动画 > my.createanimation
评论 (1)
收藏
我的文档
设置

my.createanimation(object object)

主体: 企业支付宝小程序个人支付宝小程序

创建动画实例。

创建实例以后,调用其各种方法来描述动画,最终通过 export 方法将动画数据导出并传递给 view 元素的 animation 属性,即可实现 view 动画。

object object

属性 类型 默认值 必填 描述
duration number 400

动画持续时间,单位 ms

timefunction string linear

动画的效果

枚举值 描述 兼容性
linear

动画是匀速的

-
ease

动画以低速开始,然后加快,在结束前变慢

-
ease-in

动画以低速开始

-
ease-in-out

动画以低速开始,以低速结束

-
ease-out

动画以低速结束

-
step-start

动画第一帧就跳至结束状态直到结束

-
step-end

动画一直保持开始状态,最后一帧跳到结束状态

-
delay number 0

动画延迟时间,单位 ms

transformorigin string 50% 50% 0

设置 transform-origin(动画变形原点),表示坐标轴 xyz 三个方向的值。如:xy 方向可为 center、top、left、top、bottom 的组合。其他值参考 css 动画样式 transform-origin

object animation

动画实例,提供几类方法实现动画的描述。这些方法(不包括 export)调用结束后均返回实例本身,即支持链式调用。

样式

方法 参数 说明
opacity value 透明度,参数范围 0~1。
backgroundcolor color 颜色值。
width length 设置宽度:长度值,单位为 px,例如:300 px。
height length 设置高度:长度值,单位为 px,例如:300 px。
top length 设置 top 值:长度值,单位为 px,例如:300 px。
left length 设置 left 值:长度值,单位为 px,例如:300 px。
bottom length 设置 bottom 值:长度值,单位为 px,例如:300 px。
right length 设置 right 值:长度值,单位为 px,例如:300 px。

旋转

方法 参数 说明
rotate deg deg 范围 -180 ~ 180,从原点顺时针旋转一个 deg 角度。
rotatex deg deg 范围 -180 ~ 180,在 x 轴旋转一个 deg 角度。
rotatey deg deg 范围 -180 ~ 180,在 y 轴旋转一个 deg 角度。
rotatez deg deg 范围 -180 ~ 180,在 z 轴旋转一个 deg 角度。
rotate3d x, y , z, deg 同 。

缩放

方法 参数 说明
scale sx[, sy] 只有一个参数时,表示在 x 轴、y 轴同时缩放 sx 倍;
两个参数时表示在 x 轴缩放 sx 倍,在 y 轴缩放 sy 倍。
scalex sx 在 x 轴缩放 sx 倍。
scaley sy 在 y 轴缩放 sy 倍。
scalez sz 在 z 轴缩放 sy 倍。
scale3d sx, sy, sz 在 x 轴缩放 sx 倍,在 y 轴缩放 sy 倍,在 z 轴缩放 sz 倍。

偏移

方法 参数 说明
translate tx[, ty] 只有一个参数时,表示在 x 轴偏移 tx;
有两个参数时,表示在 x 轴偏移 tx,在 y 轴偏移 ty,单位均为 px。
translatex tx 在 x 轴偏移 tx,单位 px。
translatey ty 在 y 轴偏移 ty,单位 px。
translatez tz 在 z 轴偏移 tz,单位 px。
translate3d tx, ty, tz 在 x 轴偏移 tx,在 y 轴偏移 ty,在 z 轴偏移 tz,单位 px。

倾斜

方法 参数 说明
skew ax[, ay] 参数范围 -180 ~ 180。只有一个参数时,y 轴坐标不变,x 轴坐标延顺时针倾斜 ax 度;两个参数时,分别在 x 轴倾斜 ax 度,在 y 轴倾斜 ay 度。
skewx ax 参数范围 -180 ~ 180。y 轴坐标不变,x 轴坐标延顺时针倾斜 ax 度。
skewy ay 参数范围 -180~180。x 轴坐标不变,y 轴坐标延顺时针倾斜 ay 度。

矩阵变形

基础库 2.9.5 开始支持。

方法 参数 说明
matrix a, b, c, d, tx, ty 同 。
matrix3d a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4 同 。

动画队列

方法 参数 说明
step -- 调用动画操作方法后,需调用 step() 来表示一组动画完成。
  • 在一组动画中可以调用任意多个动画方法,一组动画中的所有动画会同时开始,当一组动画完成后才会进行下一组动画
  • step 可以传入一个跟 my.createanimation 一样的配置参数用于指定当前组动画的配置。
export -- 导出动画队列。调用 export 方法后,之前的动画操作将会被清除。
在线示例
扫码体验
  • bug
    view 元素的 animation 属性初始化为 {} 时,在基础库 1.11.0(不包含 1.11.0)以下版本会报错,建议初始化为 null
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图