從(3°58′20″N，112°16′53″E) 到(53°33′34.51″N,123°17′22.29″E) 一首《野狼disco》火到老少皆知。
細細評味歌詞中隱約透露出對程式設計師的無限讚美尤其是前端，看看眼前的你，左邊敲打IDE,右邊出現了一個完美介面（app,網頁）
背景
年底將至各大公司會通過動畫結合資料繪製出一張張靚麗的年終報告。
藉助動畫物件Animation,程式設計師就是一位藝術家。
正文
以轉盤元件為例，一起揭開Animation在微信小程式中的神祕面紗。
Animation
有請豬角Animation 微信提供給我開發者一個開發動畫的類，藉助它我們就可以畫轉盤。
第一步:wx.createAnimation方法用於建立Animation類並且設定基礎屬性。
//建立動畫
let animationRun = wx.createAnimation({
duration: 6,
timingFunction: 'ease',
delay:10,
transformOrigin:"'50% 50% 0'"
})
複製程式碼看到上面的程式碼你是否有種似曾相識的感覺，想想，再想想，給你點提示css3。
css3 屬性transition語法
transition: property duration timing-function delay;
複製程式碼於是乎我們似乎得到一個結論：當使用wx.createAnimation建立一個動畫時，本質就是在構建css3動畫字串。
上面建立動畫的程式碼就轉化成
// css動畫字串
<style>
transition: 6000ms ease 10000ms;
transition-property: transform;
transform-origin: 50% 50% 0;
-webkit-transition: 6000ms ease 10000ms;
-webkit-transition-property: transform;
-webkit-transform-origin: 50% 50% 0;
</style>
複製程式碼第二步：Animation.rotate 方法用於設定轉盤旋轉的角度。
let runDeg = 90
animationRun.rotate(runDeg).step();
複製程式碼上面程式碼會在css動畫字串中增加：
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
複製程式碼變成完整的css樣式
<style>
transition: 6000ms ease 10000ms;
transition-property: transform;
transform-origin: 50% 50% 0;
-webkit-transition: 6000ms ease 10000ms;
-webkit-transition-property: transform;
-webkit-transform-origin: 50% 50% 0;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
</style>
複製程式碼第三步：Animation.step 方法用於結束一組動畫，以便開始下一組動畫。
animationRun.rotate(runDeg).step()
複製程式碼該方法會將多個動畫樣式合併。
<style>
animation1;
animation2;
animation3;
</style>
複製程式碼第四步：Animation.export 方法用於匯出動畫佇列。
this.setData({
animationData: animationRun.export(),
btnDisabled: 'disabled'
});
複製程式碼此時本質就是把完整的css3樣式賦值到對應的標籤style內，開啟除錯檢視wxml。
官方解釋：匯出動畫佇列。export 方法每次呼叫後會清掉之前的動畫操作。
但是實際操作發現，在第三步時如果將animationRun賦值可以到達同樣的效果，也就是說呼叫step方法時已經將動畫匯出。（當然這些是作者結合實踐加大膽的猜測，並未得到微信的答覆）並且發現export方法也存在問題，並不是官方所說的會清掉之前的動畫。檢視Wxml會發現樣式依舊存在。應該是微信小程式的一個bug,這點也給後續操作帶來了一些列的問題。例如動畫樣式已經是內聯樣式，自定義樣式不易去覆蓋。（我們同時先微信團隊提出了疑問。）
當我們使用Animation後，如果希望自定義一些css3樣式可能會遇到問題，目前建議自己程式碼清除一些樣式。
總結
Animation 本質就是對css3動畫樣式的基本封裝便於在js中靈活控制。
當你看到一大堆簡單但是卻需要記憶的樣式程式碼時，嘗試通過封裝之道，讓程式碼變的更加優美。
文章結尾奉獻一個轉盤元件。完整程式碼已經附上，喜歡的朋友可以自行引用。
使用場景
抽獎
關注我們
