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.
<!-- API-DEMO page/API/animation/animation.axml--><viewclass="page"><viewclass="page-description">Animation API</view><viewclass="page-section"><viewclass="page-section-title">my.createAnimation</view><viewclass="page-section-demo"><viewclass="animation-element"animation="{{animation}}"></view></view><viewclass="page-section-btns"><viewtype="primary"onTap="rotate">Rotate</view><viewtype="primary"onTap="scale"> Scale</view><viewtype="primary"onTap="translate">Translate</view></view><viewclass="page-section-btns"><viewtype="primary"onTap="skew">Skew</view><viewtype="primary"onTap="rotateAndScale">Rotate and scale</view><viewtype="primary"onTap="rotateThenScale">Rotate and then scale</view></view><viewclass="page-section-btns"><viewtype="primary"onTap="all">Expand all simultaneously </view><viewtype="primary"onTap="allInQueue">Expand all in order</view><viewtype="primary"onTap="reset">Reset</view></view></view></view>undefined
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
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.
• 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.