Animation-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

my.createAnimation

Note

This API is supported in mPaaS 10.1.32 and later.

Use this API to create an animation instance animation. Call the methods on the instance to describe the animation. Finally, use the instance's export method to export the animation data and pass it to the component's animation property.

Important

Calling the export method clears all previous animation operations.

Input parameters

Parameter	Type	Required	Description
duration	Integer	No	The animation duration in ms. The default value is `400`.
timeFunction	String	No	Defines the animation effect. The default value is `linear`. Valid values are `linear`, `ease`, `ease-in`, `ease-in-out`, `ease-out`, `step-start`, and `step-end`.
delay	Integer	No	The animation delay in ms. The default value is `0`.
transformOrigin	String	No	Sets the `transform-origin`. The default value is `50% 50% 0`.

const animation = my.createAnimation({
  transformOrigin: "top right",
  duration: 3000,
  timeFunction: "ease-in-out",
  delay: 100,
})

animation

Call the following methods on an animation instance to describe an animation. Each method returns the instance itself to enable chained calls.

If the animation property of a view is initialized to {}, an error occurs in base libraries earlier than 1.11.0. Initialize it to null.

Style

Method	Parameter	Description
opacity	value	Opacity. The parameter range is 0 to `1`.
backgroundColor	color	Color value.
width	length	Sets the width. A length value in px, such as 300 px.
height	length	Sets the height. A length value in px, such as 300 px.
top	length	Sets the top value. A length value in px, such as 300 px.
left	length	Sets the left value. A length value in px, such as 300 px.
bottom	length	Sets the bottom value. A length value in px, such as 300 px.
right	length	Sets the right value. A length value in px, such as 300 px.

Rotation

Method	Parameter	Description
rotate	deg	The range for deg is -180 to 180. Rotates clockwise by the specified angle in degrees.
rotateX	deg	The range for deg is -180 to 180. Rotates by the specified angle in degrees around the X-axis.
rotateY	deg	The range for deg is -180 to 180. Rotates by the specified angle in degrees around the Y-axis.
rotateZ	deg	The range for deg is -180 to 180. Rotates by the specified angle in degrees around the Z-axis.
rotate3d	(x, y , z, deg)	Same as transform-function rotate3d.

Scaling

Method	Parameter	Description
scale	sx,[sy]	If only one parameter is provided, it scales by a factor of sx on both the X-axis and Y-axis. If two parameters are provided, it scales by a factor of sx on the X-axis and sy on the Y-axis.
scaleX	sx	Scales by a factor of sx on the X-axis.
scaleY	sy	Scales by a factor of sy on the Y-axis.
scaleZ	sz	Scale along the Z-axis by a factor of sy.
scale3d	(sx,sy,sz)	Scales by a factor of sx on the X-axis, sy on the Y-axis, and sz on the Z-axis.

Offset

Method	Parameter	Description
translate	tx,[ty]	If only one parameter is provided, it translates by tx on the X-axis. If two parameters are provided, it translates by tx on the X-axis and ty on the Y-axis. The unit is px.
translateX	tx	Translates by tx on the X-axis. The unit is px.
translateY	ty	Translates by ty on the Y-axis. The unit is px.
translateZ	tz	Translates by tz on the Z-axis. The unit is px.
translate3d	(tx,ty,tz)	Translates by tx on the X-axis, ty on the Y-axis, and tz on the Z-axis. The unit is px.

Skew

Method	Parameter	Description
skew	ax,[ay]	The parameter range is -180 to 180. If only one parameter is provided, it skews the element along the X-axis by ax degrees, keeping the Y-coordinate unchanged. If two parameters are provided, it skews by ax degrees on the X-axis and ay degrees on the Y-axis.
skewX	ax	The parameter range is -180 to 180. Skews the element along the X-axis by ax degrees, keeping the Y-coordinate unchanged.
skewY	ay	The parameter range is -180 to 180. Skews the element along the Y-axis by ay degrees, keeping the X-coordinate unchanged.

Rectangle transformation

Method	Parameter	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

After calling the animation methods, call step() to complete an animation group. You can call any number of animation methods in a group. All animations in a group start at the same time, and the next group starts only after the current group is complete. The step() method can accept a configuration parameter, similar to my.createAnimation(), to specify the configuration for the current animation group.

Code sample

Add the following code to the axml file:

<view animation="{{animationInfo}}" style="background:yellow;height:100rpx;width:100rpx"></view>

Add the following code to the js file:

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 () {
    // Rotate and scale simultaneously
    this.animation.rotate(60).scale(3, 3).step();
    this.setData({
      animationInfo: this.animation.export(),
    });
  },
  rotateThenScale () {
    // Rotate first, then scale
    this.animation.rotate(60).step();
    this.animation.scale(3, 3).step();
    this.setData({
      animationInfo: this.animation.export(),
    });
  },
  rotateAndScaleThenTranslate () {
    // Rotate and scale simultaneously, then translate
    this.animation.rotate(60).scale(3, 3).step();
    this.animation.translate(100, 100).step({ duration: 2000 });
    this.setData({
      animationInfo: this.animation.export()
    });
  }
})