小程序动画使用

---

常规套路:
1.data 中声明动画:animation。(animation:{})
2.合适的时机创建一个动画实例animation。this.animation = wx.createAnimation({})
3.调用实例的方法来描述动画。简单点说就是设置各种动画属性值
4.最后通过动画实例的export方法导出动画数据传递给组件的animation。就是动画输出啦,让他动起来

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

---

*** 一.API***

wx.createAnimation(OBJECT)
OBJECT参数说明：

OBJECT参数说明

timingFunction 有效值：

timingFunction 有效值

animation实例化:

var animation = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
})

animation实例方法:
调用结束返回本身,也就意味着可以使用链式方程!!

样式相关:

样式相关方法 Snip20170726_8.png Snip20170726_9.png Snip20170726_10.png

动画队列

调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。

---

step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。也就是说,每一组动画的时间,样式,锚点等都可以在step()中定义;

---

示例：

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

Page({
  data: {
    animationData: {}
  },
  onShow: function(){
    var animation = wx.createAnimation({
      duration: 1000,
        timingFunction: 'ease',
    })

    this.animation = animation

    animation.scale(2,2).rotate(45).step()

    this.setData({
      animationData:animation.export()
    })

    setTimeout(function() {
      animation.translate(30).step()
      this.setData({
        animationData:animation.export()
      })
    }.bind(this), 1000)
  },
  rotateAndScale: function () {
    // 旋转同时放大
    this.animation.rotate(45).scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateThenScale: function () {
    // 先旋转后放大
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateAndScaleThenTranslate: function () {
    // 先旋转同时放大，然后平移
    this.animation.rotate(45).scale(2, 2).step()
    this.animation.translate(100, 100).step({ duration: 1000 })
    this.setData({
      animationData: this.animation.export()
    })
  }
})