微信小程序Animation動畫的使用
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
往期文章
個人主頁
