左邊敲打IDE!右邊出現了一個世界!!!

NO IMAGE

從(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中靈活控制。

當你看到一大堆簡單但是卻需要記憶的樣式代碼時,嘗試通過封裝之道,讓代碼變的更加優美。

文章結尾奉獻一個轉盤組件。完整代碼已經附上,喜歡的朋友可以自行引用。

使用場景

抽獎

點擊查看源碼

關注我們

左邊敲打IDE!右邊出現了一個世界!!!

相關文章

ReactSSR詳解【近1W字】+2個項目實戰

Nginx的這些妙用,你肯定有不知道的!

[解鎖新姿勢]回想起被`ifelse`支配的恐懼,我們要打倒ifelse

全國到底有多少人在看直播?我用Node寫了個爬蟲統計了一下