my.createAnimation
This interface is only supported in mPaaS 10.1.32 and later versions.
Create an animation instance. Call the instance’s methods to describe the animation, and finally export and pass the animation data to the component’s animation
attribute via the animation instance’s export
method.
The export
method will clear the previous animation operation after it is called.
Input parameter
Parameter | Type | Required | Description |
---|---|---|---|
duration | Integer | No | The duration of the animation, in ms, 400 by default. |
timingFunction | String | No | Define the effect of the animation, the default value is “linear”, and the valid values are “linear”, “ease”, “ease-in”, “ease-in-out”, “ease-out”, “step-start”, and “step-end” |
delay | Integer | No | Animation delay time, in ms, 0 by default |
transformOrigin | String | No | Set transform-origin, “50% 50% 0” by default |
const animation = my.createAnimation({
transformOrigin: "top right",
duration: 3000,
timeFunction: "ease-in-out",
delay: 100,
})
animation
The animation instance can call the following methods to describe the animation. After the call ends, it will return the instance itself, supporting the chain call.
Style:
Method | Parameter | Description |
---|---|---|
opacity | value | Transparency, parameter ranging from 0~1 |
backgroundColor | color | Color value |
width | length | Set the width: length values, in px, such as 300 px. |
height | length | Set the height: length values, in px, such as 300 px. |
top | length | Set the top: length values, in px, such as 300 px. |
left | length | Set the left: length values, in px, such as 300 px. |
bottom | length | Set the bottom: length values, in px, such as 300 px. |
right | length | Set the right: length values, in px, such as 300 px. |
Rotate:
Method | Parameter | Description |
---|---|---|
rotate | deg | deg range -180 ~ 180, rotating deg degree clockwise from the origin |
rotateX | deg | deg range -180 ~ 180, rotating deg degree on the X axis |
rotateY | deg | deg range -180 ~ 180, rotating deg degree on the Y axis |
rotateZ | deg | deg range -180 ~ 180, rotating deg degree on the Z axis |
rotate3d | (x, y , z, deg) | Same as transform-function rotate3d. |
Scale:
Method | Parameter | Description |
---|---|---|
scale | sx,[sy] | When there is only one parameter, it means scaling by sx times on X and Y axes simultaneously; when there are two parameters, it means scaling by sx times on the X axis and sy times on the Y axis. |
scaleX | sx | Scale by sx times on the X axis |
scaleY | sy | Scale by sy times on the Y axis |
scaleZ | sz | Scale by sy times on the Z axis |
scale3d | (sx,sy,sz) | Scale by sx times on the X axis, sy times on the Y axis, and sz times on the Z axis. |
Translate:
Method | Parameter | Description |
---|---|---|
translate | tx,[ty] | When there is only one parameter, it indicates translating by tx on X axis. When there are two parameters, it indicates translating by tx on X axis and ty on Y axis. |
translateX | tx | Translate by tx on the X axis, in px |
translateY | ty | Translate by ty on the Y axis, in px |
translateZ | tz | Translate by tz on the Z axis, in px |
translate3d | (tx,ty,tz) | Translate by tx on the X axis, ty on the Y axis, and tz on the Z axis, in px. |
Skew:
Method | Parameter | Description |
---|---|---|
skew | ax,[ay] | The parameter range is -180 ~ 180. When there is only one parameter, the Y-axis coordinate is unchanged, and the X-axis coordinate is skewed ax degrees clockwise; when there are two parameters, it means skewing ax degrees on the X-axis and ay degrees on the Y-axis. |
skewX | ax | The parameter range is -180 ~ 180. The Y-axis coordinate is unchanged, and the X-axis coordinate is skewed ax degrees clockwise. |
skewY | ay | The parameter range is -180~180. The X-axis coordinates is unchanged, and the Y-axis coordinate is skewed ay degrees clockwise. |
Matrix transformation:
Method | Parameter | Description |
---|---|---|
matrix | (a,b,c,d,tx,ty) | Same as transform-function. |
matrix3d | Same as transform-function matrix3d. |
Animation queue
When the animation operation method is called, it is required to call step()
to indicates the completion of a group of animations. Within a group of animation, it is possible to call any number of animation methods. All animations in the group start at the same time. It does not enter into the next group until the current animation group ends. You can pass the same configuration parameter as my.createAnimation()
to specify the configuration of the current set of animations by using step()
.
Code example
<view animation="{{animationInfo}}" style="background:yellow;height:100rpx;width:100rpx"></view>
Page({
data: {
animationInfo: {}
},
onShow(){
var animation = my.createAnimation({
duration: 1000,
timingFunction: '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 () {
// Rotate while zooming in
this.animation.rotate(60).scale(3, 3).step();
this.setData({
animationInfo: this.animation.export(),
});
},
rotateThenScale () {
// Rotate and then zoom in
this.animation.rotate(60).step();
this.animation.scale(3, 3).step();
this.setData({
animationInfo: this.animation.export(),
});
},
rotateAndScaleThenTranslate () {
// Rotate while zooming in, then translate
this.animation.rotate(60).scale(3, 3).step();
this.animation.translate(100, 100).step({ duration: 2000 });
this.setData({
animationInfo: this.animation.export()
});
}
})