小程序的動畫很簡單，總結起來就3個步驟。
- 在需要動畫效果的元素上給animation屬性綁定一個變量，假設是a
- 在需要的時機調用api創建動畫對象并描述動畫效果
- 利用this.setData() 將動畫對象.export() 方法賦值到a變量中。
1.在元素中的屬性animation中綁定對象變量，即用代碼如下表示
<!-- wxml -->
<view style="width:100px;height:100px" animation="{{textLeftAnimation}}"></view>
// js
data:{
textLeftAnimation:{} // animation
}
2.新建animation
3.添加相關動畫方法來描述動畫，目前的動畫方法分類有
- 樣式
- 旋轉
- 縮放
- 偏移
- 傾斜
- 矩陣變形
拿樣式分類方法來做示例：
// 初始化
let animationLeft = wx.createAnimation({
duration:2000,
timingFunction:'ease-out',
delay:0
})
// 鏈式操作添加相關動畫方法
// 樣式分類方法中，默認的長度單位是 px，需要用rpx、em、%等其他度量單位時，需要傳入單位符號
animationLeft.backgroundColor('green').left(50).step()
// animationLeft.backgroundColor('green').left('100rpx').step() //如這樣
thi.setData({
textLeftAnimation:animationLeft.export()
})
4.小程序動畫描述step()
1.小程序的動畫是按 step() 來描述的，例如你想讓某個元素平移之后旋轉啥的，就可以利用多次step()
/**
* 例如這樣
*/
animationLeft.left(100).step()
animationLeft.rotate(90).step();
2.將left()和rotate()寫在同一個step()里時，會在平移的時候同時旋轉，如下代碼
animationLeft.left(100).rotate(90).step()
5.樣式分類方法下有如下幾個方法
opacity() // 不透明度，取值0~1 (官方文檔說是 透明度！但實際上，拿一個帶背景顏色的view去測試就可以得知是不透明，此處應該是官方文檔有誤。)
backgroundColor() // 背景顏色，color類型，詳情參照下方color類型
width() // 寬度
height() // 高度
top() // 距離頂部定位
left() // 距離左邊定位
bottom() // 距離底部定位
right() // 距離右邊定位
都很簡單，就不一一敘述了。
