使用my.createAnimation API创建小程序动画-移动开发平台 mPaaS-阿里云

my.createAnimation

说明

mPaaS 10.1.32 及以上版本支持该接口。

该接口用于创建动画实例 animation。调用实例的方法来描述动画，最后通过动画实例的 export 方法将动画数据导出并传递给组件的 animation 属性。

重要

export 方法调用后会清掉之前的动画操作。

入参

参数	类型	必填	说明
duration	Integer	否	动画的持续时间，单位 ms，默认值为 `400`。
timeFunction	String	否	定义动画的效果，默认值为 `linear`，有效值为 `linear`、`ease`、`ease-in`、`ease-in-out`、`ease-out`、`step-start`、`step-end`。
delay	Integer	否	动画延迟时间，单位 ms，默认值为 `0`。
transformOrigin	String	否	设置 `transform-origin`，默认值为 `50% 50% 0`。

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

animation

动画实例可以调用以下方法来描述动画，调用结束后会返回实例本身，支持链式调用的写法。

view 的 animation 属性初始化为 {} 时，在基础库 1.11.0 以下版本（不包含 1.11.0）会报错，建议初始化为 null。

样式

方法	参数	说明
opacity	value	透明度，参数范围为 `0~1`。
backgroundColor	color	颜色值。
width	length	设置宽度：长度值，单位为 px，例如：300 px。
height	length	设置高度：长度值，单位为 px，例如：300 px。
top	length	设置 top 值：长度值，单位为 px，例如：300 px。
left	length	设置 left 值：长度值，单位为 px，例如：300 px。
bottom	length	设置 bottom 值：长度值，单位为 px，例如：300 px。
right	length	设置 right 值：长度值，单位为 px，例如：300 px。

旋转

方法	参数	说明
rotate	deg	deg 范围为 -180 ~ 180，从原点顺时针旋转一个 deg 角度。
rotateX	deg	deg 范围为 -180 ~ 180，在 X 轴旋转一个 deg 角度。
rotateY	deg	deg 范围为 -180 ~ 180，在 Y 轴旋转一个 deg 角度。
rotateZ	deg	deg 范围为 -180 ~ 180，在 Z 轴旋转一个 deg 角度。
rotate3d	(x, y , z, deg)	同 transform-function rotate3d （英文）。

缩放

方法	参数	说明
scale	sx,[sy]	只有一个参数时，表示在 X 轴、Y 轴同时缩放 sx 倍；有两个参数时表示在 X 轴缩放 sx 倍，在 Y 轴缩放 sy 倍。
scaleX	sx	在 X 轴缩放 sx 倍。
scaleY	sy	在 Y 轴缩放 sy 倍。
scaleZ	sz	在 Z 轴缩放 sy 倍。
scale3d	(sx,sy,sz)	在 X 轴缩放 sx 倍，在 Y 轴缩放sy 倍，在 Z 轴缩放 sz 倍。

偏移

方法	参数	说明
translate	tx,[ty]	只有一个参数时，表示在 X 轴偏移 tx；两个参数时，表示在 X 轴偏移 tx，在 Y 轴偏移 ty，单位均为 px。
translateX	tx	在 X 轴偏移 tx，单位为 px。
translateY	ty	在 Y 轴偏移 ty，单位为 px。
translateZ	tz	在 Z 轴偏移 tz，单位为 px。
translate3d	(tx,ty,tz)	在 X 轴偏移 tx，在 Y 轴偏移 ty，在 Z 轴偏移 tz，单位为 px。

倾斜

方法	参数	说明
skew	ax,[ay]	参数范围为 -180 ~ 180。只有一个参数时，Y 轴坐标不变，X 轴坐标沿顺时针倾斜 ax 度；两个参数时，分别在 X 轴倾斜 ax 度，在 Y 轴倾斜 ay 度。
skewX	ax	参数范围为 -180 ~ 180。Y 轴坐标不变，X 轴坐标沿顺时针倾斜 ax 度。
skewY	ay	参数范围为 -180~180。X 轴坐标不变，Y 轴坐标沿顺时针倾斜 ay 度。

矩形变形

方法	参数	说明
matrix	(a,b,c,d,tx,ty)	同 transform-function（英文）
matrix3d	(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)	同 transform-function matrix3d（英文）

动画队列

调用动画操作方法后需要调用 step() 来表示一组动画完成。在一组动画中可以调用任意多个动画方法，一组动画中的所有动画会同时开始，当一组动画完成后才会进行下一组动画。step() 可以传入一个跟 my.createAnimation() 一样的配置参数用于指定当前组动画的配置。

代码示例

在 axml 文件中添加如下代码：

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

在 js 文件中添加如下代码：

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 () {
    // 旋转同时放大
    this.animation.rotate(60).scale(3, 3).step();
    this.setData({
      animationInfo: this.animation.export(),
    });
  },
  rotateThenScale () {
    // 先旋转后放大
    this.animation.rotate(60).step();
    this.animation.scale(3, 3).step();
    this.setData({
      animationInfo: this.animation.export(),
    });
  },
  rotateAndScaleThenTranslate () {
    // 先旋转同时放大，然后平移
    this.animation.rotate(60).scale(3, 3).step();
    this.animation.translate(100, 100).step({ duration: 2000 });
    this.setData({
      animationInfo: this.animation.export()
    });
  }
})