my.createAnimation
Create an animation instance. Call the instance method to describe animation, and then use the export method of animation instance to export the animation data and transfer to the component animation attribute.
Note: After the export method is called, the previous animation operation will be cleared.
Sample Code
copy
// API-DEMO page/API/animation/animation.json
{
"defaultTitle": "Animation"
}undefinedcopy
<!-- API-DEMO page/API/animation/animation.axml-->
<view class="page">
<view class="page-description">Animation API</view>
<view class="page-section">
<view class="page-section-title">my.createAnimation</view>
<view class="page-section-demo">
<view class="animation-element" animation="{{animation}}"></view>
</view>
<view class="page-section-btns">
<view type="primary" onTap="rotate">Rotate</view>
<view type="primary" onTap="scale"> Scale</view>
<view type="primary" onTap="translate">Translate</view>
</view>
<view class="page-section-btns">
<view type="primary" onTap="skew">Skew</view>
<view type="primary" onTap="rotateAndScale">Rotate and scale</view>
<view type="primary" onTap="rotateThenScale">Rotate and then scale</view>
</view>
<view class="page-section-btns">
<view type="primary" onTap="all">Expand all simultaneously </view>
<view type="primary" onTap="allInQueue">Expand all in order</view>
<view type="primary" onTap="reset">Reset</view>
</view>
</view>
</view>undefinedcopy
// API-DEMO page/API/animation/animation.js
Page({
onReady() {
this.animation = my.createAnimation()
},
rotate() {
this.animation.rotate(Math.random() * 720 - 360).step()
this.setData({ animation: this.animation.export() })
},
scale() {
this.animation.scale(Math.random() * 2).step()
this.setData({ animation: this.animation.export() })
},
translate() {
this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
this.setData({ animation: this.animation.export() })
},
skew() {
this.animation.skew(Math.random() * 90, Math.random() * 90).step()
this.setData({ animation: this.animation.export() })
},
rotateAndScale() {
this.animation.rotate(Math.random() * 720 - 360)
.scale(Math.random() * 2)
.step()
this.setData({ animation: this.animation.export() })
},
rotateThenScale() {
this.animation.rotate(Math.random() * 720 - 360).step()
.scale(Math.random() * 2).step()
this.setData({ animation: this.animation.export() })
},
all() {
this.animation.rotate(Math.random() * 720 - 360)
.scale(Math.random() * 2)
.translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
.skew(Math.random() * 90, Math.random() * 90)
.step()
this.setData({ animation: this.animation.export() })
},
allInQueue() {
this.animation.rotate(Math.random() * 720 - 360).step()
.scale(Math.random() * 2).step()
.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
.skew(Math.random() * 90, Math.random() * 90).step()
this.setData({ animation: this.animation.export() })
},
reset() {
this.animation.rotate3d(0, 0, 0, 0)
.rotateX(0)
.rotateY(0)
.rotateZ(0)
.scale(1)
.translate(0, 0)
.skew(0, 0)
.step({ duration: 0 })
this.setData({ animation: this.animation.export() })
}
})copy
/* API-DEMO page/API/animation/animation.acss */
.animation-element {
width: 200rpx;
height: 200rpx;
background-color: #108ee9;
transform: scaleX(1) scaleY(1);
}Parameters
Object type with the following attributes:
| Parameters | Type | Mandatory | Description |
| duration | Integer | No | Animation duration, in ms, 400 by default |
| timeFunction | String | No | Define animation effect, linear by default, effective values including linear, ease, ease-in, ease-in-out, ease-out, step-start and step-end |
| delay | Integer | No | Animation delay, in ms, 0 by default |
| transformOrigin | String | No | Set transform-origin, 50% 50% 0 by default |
Sample Code
copy
//.js
const animation = my.createAnimation({
transformOrigin: "top right",
duration: 3000,
timeFunction: "ease-in-out",
delay: 100,
})Animation
The animation instance may call the following method to describe the animation. At the end of the call, the instance itself is returned. The chain call style is supported. When the view animation attribute is initialized as {}, error may appears on basic library 1.11.0 (not including 1.11.0) and lower version. It is recommended to initialize as null.
Style
| Method | Parameters | Description |
| opacity | value | Transparency, range 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 |
Rotation
| Method | Parameters | Description |
| rotate | deg | deg range -180 ~ 180, rotate by deg degrees clockwise from origin |
| rotateX | deg | deg range -180 ~ 180, rotate by deg degrees on X axis |
| rotateY | deg | deg range -180 ~ 180, rotate by deg degrees on Y axis |
| rotateZ | deg | deg range -180 ~ 180, rotate by deg degrees on Z axis |
| rotate3d | (x, y , z, deg) | Same as transform-function rotate3d |
Scale
| Method | Parameters | Description |
| scale | sx,[sy] | When there is only one parameter, it indicates scaling sx times on X and Y axises at the same time. When there are two parameters, it indicates scaling sx times on X axis and sy times on Y axis |
| scaleX | sx | Scale sx times on X axis |
| scaleY | sy | Scale sy times on Y axis |
| scaleZ | sz | Scale sz times on Z axis |
| scale3d | (sx,sy,sz) | Scale sx times on X axis, sy times on Y axis and sz times on Z axis |
Translate
| Method | Parameters | 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 X axis, in px |
| translateY | ty | Translate by ty on Y axis, in px |
| translateZ | tz | Translate by tz on Z axis, in px |
| translate3d | (tx,ty,tz) | Translate by tx on X axis, ty on Y axis and tz on Z axis, in px |
Skew
| Method | Parameters | Description |
| skew | ax,[ay] | Range -180~180 When there is only one parameter, Y stays unchanged and X skews by ax degrees clockwise. When there are two parameters, X skews by ax degrees and Y skews by ay degrees. |
| skewX | ax | Range -180~180 Y stays unchanged and X skews by ax degrees clockwise. Degree |
| skewY | ay | Range -180~180 X stays unchanged and Y skews by ay degrees clockwise. |
Matrix transformation
| Method | Parameters | Description |
| matrix | (a,b,c,d,tx,ty) | Same as transform-function |
| matrix3d | (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) | 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.
• The step() can transfer a configuration parameter that is the same as my.createAnimation(), which is used to specify the configuration of the current animation group.