本文編輯：  Flyinthesky瀏覽 7608 版權(quán)所有，嚴(yán)禁轉(zhuǎn)載

接口說(shuō)明:

動(dòng)畫類接口

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

接口用法：

【代碼】

wxml

<view class="container">
  <template is="header" data="{{title: 'createAnimation'}}"/>

  <view class="page-body">
    <view class="page-body-wrapper">
      <view class="animation-element-wrapper">
        <view class="animation-element" animation="{{animation}}"></view>
      </view>
      <view class="animation-buttons" scroll-y="true">
        <button class="animation-button" bindtap="rotate">旋轉(zhuǎn)</button>
        <button class="animation-button" bindtap="scale"> 縮放</button>
        <button class="animation-button" bindtap="translate">移動(dòng)</button>
        <button class="animation-button" bindtap="skew">傾斜</button>
        <button class="animation-button" bindtap="rotateAndScale">旋轉(zhuǎn)并縮放</button>
        <button class="animation-button" bindtap="rotateThenScale">旋轉(zhuǎn)后縮放</button>
        <button class="animation-button" bindtap="all">同時(shí)展示全部</button>
        <button class="animation-button" bindtap="allInQueue">順序展示全部</button>
        <button class="animation-button-reset" bindtap="reset">還原</button>
      </view>
    </view>
  </view>

  <template is="footer" />
</view>

js

Page({
  onReady: function () {
    this.animation = wx.createAnimation()

  },
  rotate: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
    this.setData({ animation: this.animation.export() })
  },
  scale: function () {
    this.animation.scale(Math.random() * 2).step()
    this.setData({ animation: this.animation.export() })
  },
  translate: function () {
    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
    this.setData({ animation: this.animation.export() })
  },
  skew: function () {
    this.animation.skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({ animation: this.animation.export() })
  },
  rotateAndScale: function () {
    this.animation.rotate(Math.random() * 720 - 360)
        .scale(Math.random() * 2)
        .step()
    this.setData({ animation: this.animation.export() })
  },
  rotateThenScale: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
        .scale(Math.random() * 2).step()
    this.setData({ animation: this.animation.export() })
  },
  all: function () {
    this.animation.rotate(Math.random() * 720 - 360)
        .scale(Math.random() * 2)
        .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
        .skew(Math.random() * 90, Math.random() * 90)
        .step()
    this.setData({ animation: this.animation.export() })
  },
  allInQueue: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
        .scale(Math.random() * 2).step()
        .translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
        .skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({ animation: this.animation.export() })
  },
  reset: function () {
    this.animation.rotate(0, 0)
                  .scale(1)
                  .translate(0, 0)
                  .skew(0, 0)
                  .step({ duration: 0 })
    this.setData({ animation: this.animation.export() })
  }
})

wxss

.page-body-wrapper {
  flex-grow: 1;
}
.animation-element-wrapper {
  display: block;
  margin-bottom: 100rpx;
}
.animation-element {
  width: 200rpx;
  height: 200rpx;
  background-color: #1AAD19;
}
.animation-buttons {
  padding: 50rpx 50rpx 10rpx;
  border-top: 1px solid #ccc;
  display: flex;
  flex-grow: 1;
  overflow-y: scroll;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 400rpx;
  box-sizing: border-box;
}
.animation-button {
  width: 290rpx;
  margin: 20rpx auto; 
}
.animation-button-reset {
  width: 610rpx;
  margin: 20rpx auto; 
}

主要方法：

wx.createAnimation(OBJECT)：創(chuàng)建一個(gè)動(dòng)畫實(shí)例

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

示例代碼：

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

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

樣式:

旋轉(zhuǎn)：

縮放：

偏移：

傾斜：

矩陣變形：

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

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

js

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: this.animation.export()
    })
  },
  rotateThenScale: function () {
    // 先旋轉(zhuǎn)后放大
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData: this.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: this.animation.export()
    })
  }
})

bug & tip
1、bug: iOS/Android 6.3.30 通過(guò) step() 分隔動(dòng)畫，只有第一步動(dòng)畫能生效。