1，前言
和css3動畫不同，小程式中動畫是主要是通過js控制的，簡單來說就是建立一個動畫例項animation。呼叫例項的方法來定義動畫效果。最後通過動畫例項的export方法匯出動畫資料傳遞給元件的animation屬性。
2，屬性
首先需要通過wx.createAnimation，建立一個動畫物件，該物件接收四個屬性。
| 屬性名 | 資料型別 | 預設值 | 必填 | 說明 |
|---|---|---|---|---|
| duration | number | 400 | 否 | 動畫持續時間，單位 ms |
| timingFunction | string | 'linear' | 否 | 動畫的效果 |
| delay | number | 0 | 否 | 動畫延遲時間，單位 ms |
| transformOrigin | string | '50% 50% 0' | 否 | 動畫起點 |
其中，timingFunction屬性有七種值型別
| 值 | 說明 |
|---|---|
| 'linear' | 動畫從頭到尾的速度是相同的 |
| 'ease' | 動畫以低速開始，然後加快，在結束前變慢 |
| 'ease-in' | 動畫以低速開始 |
| 'ease-in-out' | 動畫以低速開始和結束 |
| ''ease-out' | 動畫以低速結束 |
| 'step-start' | 動畫第一幀就跳至結束狀態直到結束 |
| 'step-end' | 動畫一直保持開始狀態，最後一幀跳到結束狀態 |
例子：
let change = wx.createAnimation({ duration:500 });
change.opacity(0).step();
this.setData({
change:change.export()
});
3，使用
使用起來需要將動畫物件，繫結到元素上
<view class="dialog" animation="{{ move}}"></view>
然後在js檔案page物件的data中定義
Page({
data: {
move:{},
}
})
因為動畫物件預設接收的是px單位，如果需要使用rpx單位，比如400rpx，轉換公式就是400 / 750 * wx.getSystemInfoSync().windowWidth。
元素往右邊移動200PX，並且放大1.5倍的動畫例子：
move(){
let move = wx.createAnimation({ duration:200 });
move.translateX(200 / 750 * wx.getSystemInfoSync().windowWidth).scale(1.5,1.5).step();
this.setData({
move:move.export()
})
}
如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END
往期文章
個人主頁