All Products
Search
Document Center

Animation

Last Updated: Feb 19, 2021

my.createAnimation

Note: 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
 
  1. const animation = my.createAnimation({
  2. transformOrigin: "top right",
  3. duration: 3000,
  4. timingFunction: "ease-in-out",
  5. delay: 100,
  6. })

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)

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)
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

 
  1. <view animation="{{animationInfo}}" style="background:yellow;height:100rpx;width:100rpx"></view>
 
  1. Page({
  2. data: {
  3. animationInfo: {}
  4. },
  5. onShow(){
  6. var animation = my.createAnimation({
  7. duration: 1000,
  8. timingFunction: 'ease-in-out',
  9. });
  10. this.animation = animation;
  11. animation.scale(3,3).rotate(60).step();
  12. this.setData({
  13. animationInfo:animation.export()
  14. });
  15. setTimeout(function() {
  16. animation.translate(35).step();
  17. this.setData({
  18. animationInfo:animation.export(),
  19. });
  20. }.bind(this), 1500);
  21. },
  22. rotateAndScale () {
  23. // Rotate while zooming in
  24. this.animation.rotate(60).scale(3, 3).step();
  25. this.setData({
  26. animationInfo: this.animation.export(),
  27. });
  28. },
  29. rotateThenScale () {
  30. // Rotate and then zoom in
  31. this.animation.rotate(60).step();
  32. this.animation.scale(3, 3).step();
  33. this.setData({
  34. animationInfo: this.animation.export(),
  35. });
  36. },
  37. rotateAndScaleThenTranslate () {
  38. // Rotate while zooming in, then translate
  39. this.animation.rotate(60).scale(3, 3).step();
  40. this.animation.translate(100, 100).step({ duration: 2000 });
  41. this.setData({
  42. animationInfo: this.animation.export()
  43. });
  44. }
  45. })