微信小程序API動(dòng)畫(huà),wx.createAnimation創(chuàng)建一個(gè)動(dòng)畫(huà)實(shí)例

wx.createAnimation(OBJECT)

? 創(chuàng)建一個(gè)動(dòng)畫(huà)實(shí)例animation。調(diào)用實(shí)例的方法來(lái)描述動(dòng)畫(huà)。最后通過(guò)動(dòng)畫(huà)實(shí)例的export方法導(dǎo)出動(dòng)畫(huà)數(shù)據(jù)傳遞給組件的animation屬性。

注意:export方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫(huà)操作

OBJECT參數(shù)說(shuō)明：

timingFunction 有效值：

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

animation

動(dòng)畫(huà)實(shí)例可以調(diào)用以下方法來(lái)描述動(dòng)畫(huà)，調(diào)用結(jié)束后會(huì)返回自身，支持鏈?zhǔn)秸{(diào)用的寫(xiě)法。

animation 對(duì)象的方法列表：

樣式：

旋轉(zhuǎn)：

縮放：

偏移：

傾斜：

矩陣變形：

動(dòng)畫(huà)隊(duì)列

調(diào)用動(dòng)畫(huà)操作方法后要調(diào)用step()來(lái)表示一組動(dòng)畫(huà)完成，可以在一組動(dòng)畫(huà)中調(diào)用任意多個(gè)動(dòng)畫(huà)方法，一組動(dòng)畫(huà)中的所有動(dòng)畫(huà)會(huì)同時(shí)開(kāi)始，一組動(dòng)畫(huà)完成后才會(huì)進(jìn)行下一組動(dòng)畫(huà)。step 可以傳入一個(gè)跟wx.createAnimation()一樣的配置參數(shù)用于指定當(dāng)前組動(dòng)畫(huà)的配置。

示例：

<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 () {
    // 旋轉(zhuǎn)同時(shí)放大
    this.animation.rotate(45).scale(2, 2).step()
    this.setData({
      animationData:animation.export()
    })
  },
  rotateThenScale: function () {
    // 先旋轉(zhuǎn)后放大
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData:animation.export()
    })
  },
  rotateAndScaleThenTranslate: function () {
    // 先旋轉(zhuǎn)同時(shí)放大，然后平移
    this.animation.rotate(45).scale(2, 2).step()
    this.animation.translate(100, 100).step({ duration: 1000 })
    this.setData({
      animationData:animation.export()
    })
  }
})

bug & tip

1. bug: iOS/Android6.3.30通過(guò) step() 分隔動(dòng)畫(huà)，只有第一步動(dòng)畫(huà)能生效