my.createAnimation
说明:mPaaS 10.1.32 及以上版本支持该接口。
该接口用于创建动画实例 animation。调用实例的方法来描述动画,最后通过动画实例的 export
方法将动画数据导出并传递给组件的 animation
属性。
重要:export
方法调用后会清掉之前的动画操作。
入参
参数 |
类型 |
必填 |
说明 |
duration |
Integer |
否 |
动画的持续时间,单位 ms,默认值为 400 。 |
timeFunction |
String |
否 |
定义动画的效果,默认值为 linear ,有效值为 linear 、ease 、ease-in 、ease-in-out 、ease-out 、step-start 、step-end 。 |
delay |
Integer |
否 |
动画延迟时间,单位 ms,默认值为 0 。 |
transformOrigin |
String |
否 |
设置 transform-origin ,默认值为 50% 50% 0 。 |
const animation = my.createAnimation({
transformOrigin: "top right",
duration: 3000,
timingFunction: "ease-in-out",
delay: 100,
})
animation
动画实例可以调用以下方法来描述动画,调用结束后会返回实例本身,支持链式调用的写法。
view 的 animation 属性初始化为 {}
时,在基础库 1.11.0 以下版本(不包含 1.11.0)会报错,建议初始化为 null
。
样式
方法 |
参数 |
说明 |
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) |
同 transform-function rotate3d (英文)。 |
缩放
方法 |
参数 |
说明 |
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 轴偏移 tx,单位为 px。 |
translateZ |
tz |
在 Z 轴偏移 tx,单位为 p。 |
translate3d |
(tx,ty,tz) |
在 X 轴偏移 tx,在 Y 轴偏移t y,在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 度。 |
矩形变形
方法 |
参数 |
说明 |
matrix |
(a,b,c,d,tx,ty) |
同 transform-function(英文) |
matrix3d |
(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) |
同 transform-function matrix3d(英文) |
动画队列
调用动画操作方法后需要要调用 step()
来表示一组动画完成。在一组动画中可以调用任意多个动画方法,一组动画中的所有动画会同时开始,当一组动画完成后才会进行下一组动画。step()
可以传入一个跟 my.createAnimation()
一样的配置参数用于指定当前组动画的配置。
代码示例
<view animation="{{animationInfo}}" style="background:yellow;height:100rpx;width:100rpx"></view>
Page({
data: {
animationInfo: {}
},
onShow(){
var animation = my.createAnimation({
duration: 1000,
timeFunction: 'ease-in-out',
});
this.animation = animation;
animation.scale(3,3).rotate(60).step();
this.setData({
animationInfo:animation.export()
});
setTimeout(function() {
animation.translate(35).step();
this.setData({
animationInfo:animation.export(),
});
}.bind(this), 1500);
},
rotateAndScale () {
// 旋转同时放大
this.animation.rotate(60).scale(3, 3).step();
this.setData({
animationInfo: this.animation.export(),
});
},
rotateThenScale () {
// 先旋转后放大
this.animation.rotate(60).step();
this.animation.scale(3, 3).step();
this.setData({
animationInfo: this.animation.export(),
});
},
rotateAndScaleThenTranslate () {
// 先旋转同时放大,然后平移
this.animation.rotate(60).scale(3, 3).step();
this.animation.translate(100, 100).step({ duration: 2000 });
this.setData({
animationInfo: this.animation.export()
});
}
})
在文档使用中是否遇到以下问题
更多建议
匿名提交