[TOC](目錄) # 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'|動畫一直保持開始狀態，最後一幀跳到結束狀態| **例子：** ```javascript let change = wx.createAnimation({ duration:500 }); change.opacity(0).step(); this.setData({ change:change.export() }); ``` # 3，使用 --- **使用起來需要將動畫物件，繫結到元素上** ```html ``` **然後在`js`檔案page物件的`data`中定義** ```javascript Page({ data: { move:{}, } }) ``` 因為動畫物件預設接收的是`px`單位，如果需要使用`rpx`單位，比如`400rpx`，轉換公式就是`400 / 750 * wx.getSystemInfoSync().windowWidth`。 **元素往右邊移動200PX，並且放大1.5倍的動畫例子：** ```javascript 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** ==往期文章== + [微信小程式自定義Tabbar，附詳細原始碼](https://www.cnblogs.com/-pdd/p/14499789.html) + [細數JS中實用且強大的操作符&運算子](https://www.cnblogs.com/-pdd/p/14324256.html) + [微信小程式request請求的封裝](https://www.cnblogs.com/-pdd/p/14292614.html) + [微信小程式API互動的自定義封裝](https://www.cnblogs.com/-pdd/p/14289071.html) ==個人主頁== + [CSDN](https://blog.csdn.net/pdd11997110103?spm=1010.2135.3001.5421) + [GitHub](https://github.com/pdd11997110103) + [簡書](https://www.jianshu.com/u/b7a8536bff06) + [部落格園](https://www.cnblogs.com/-pdd/) + [掘金](https://juejin.cn/user/74732363