动画

my.createAnimation

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

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

扫码体验：

入参

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

animation

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

样式：

旋转：

缩放：

偏移：

倾斜：

矩阵变形：

动画队列

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

代码示例

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

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()
    });
  }
})

原文: https://docs.alipay.com/mini/api/ui-animation