微信小程式API 動畫

wx.createAnimation(OBJECT)

---

建立一個動畫實例animation。呼叫實例的方法來描述動畫。最後透過動畫實例的export方法匯出動畫資料傳遞給元件的animation屬性。

注意: export 方法每次呼叫後會清除先前的動畫運算

OBJECT參數說明：

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

animation

---

#動畫實例可以呼叫以下方法來描述動畫，呼叫結束後會傳回自身，支援鏈式調用的寫法。

樣式：

旋轉：

##偏移：

矩陣變形：

---

##### ##########動畫佇列#########呼叫動畫操作方法後要呼叫###step()### 來表示一組動畫完成，可以在一組動畫中呼叫任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成後才會進行下一組動畫。 step 可以傳入一個跟 ###wx.createAnimation()### 一樣的設定參數用來指定目前群組動畫的設定。 #########範例：######

<view animation="{{animationData}}"></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:animation.export()
    })
  },
  rotateThenScale: function () {
    // 先旋转后放大
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData:animation.export()
    })
  },
  rotateAndScaleThenTranslate: function () {
    // 先旋转同时放大，然后平移
    this.animation.rotate(45).scale(2, 2).step()
    this.animation.translate(100, 100).step({ duration: 1000 })
    this.setData({
      animationData:animation.export()
    })
  }
})