個人前端故事----輪盤轉起來(+﹏+)~

       轉眼間，立刻又到了中秋了，突然想到了有到了作活動的日子了~每逢佳節必活動的傳統一直是咱們前端的職責所在，去年我介紹了遊戲機，大富翁，那今年的活動就來個輪盤開獎吧~其實這個東西在 pc 端上已經爛大街了，無數的 demo，插件能夠幫助咱們實現這個功能，因此我也就隨大流的去找了個知名的 jQuery 插件去實現這個功能，惋惜我作的是移動端的開發。。。平時基本都是原生 javaScript 作開發，頂多上一個 zepto，爲了這個功能上一個 jQuery 總以爲不是那麼地道，不過如今的jquery壓縮下來只有38K，想了想仍是嘗試嘗試，結果發現卡的要死。。。輪盤在 iOS 設備上轉起來還能看，到了一些安卓上就簡直不能看了，爲此被運營的吐槽了很多。。。因此乾脆決定本身搞一個算了，我就不信一個輪盤能這麼卡！

       說幹就幹，由於平時是採用以前說的nuts作腳手架的，因此js上面能夠使用ES6來作開發，所以個人這個插件也一樣採用ES6語法來寫的，詳細的使用方法請參考這裏。個人這個插件支持兩個方法，rotate() 方法用來對元素進行操做，而 getRotateAngle() 能夠取到元素最後停下來的角度。

      簡單的來講，使用起來仍是很直觀的，在初始化的時候設置起始角度，轉動角度和轉動時間，就能夠等着回調函數按時執行了~原理你們應該都懂，那麼它又是怎麼能在移動端上保證高性能呢？其實就是用到了以前我介紹到的requestAnimationFrame 來作這個動畫~

 

     首先，咱們先初始化變量，我先用ele來緩存傳入的元素節點，接下來再拿到瀏覽器的樣式 styles，旋轉動畫我仍是使用的 transform 屬性來作，爲了兼容性，我須要知道當前瀏覽器支持的是什麼前綴的 transform，爲了便於存儲，我先將因此的 transform 用字符串的形式存儲下來，而後在 filter 方法中遍歷出瀏覽器支持的具體屬性，而且保存在 supportedCSS 變量中。

      這兩句十分的關鍵！由於咱們採用3D變換，因此須要這兩個屬性來加速咱們的動畫，其實原理也是很簡單的，經過這兩個屬性，咱們可讓咱們的動畫調用設備的GPU來進行渲染，這會大大的提升渲染效果。

這個是基於 requestAnimationFrame 的轉動函數，它不停的遞歸執行動畫，直到知足條件後退出，在這個函數中咱們須要傳入參數來控制它的變換曲線，關於曲線變換的知識點，以前圓裏的大神有很詳細的介紹，感興趣的能夠去搜索一下~在這個函數中我並無直接去操做dom節點，而是經過 _animate() 去進行真正的旋轉的。

       最後咱們返回兩個函數，咱們能夠在這兩個函數這裏對傳入的參數進行一些預處理或者校驗等等，我在這裏其實除了拼裝對象外，並無作過多的處理，感興趣的同窗能夠本身去改一改試試~

       處處爲止~這個簡單的輪盤組件就作完啦~很簡單吧~思路仍是比較清晰的，關鍵的亮點在於使用請求動畫幀來作旋轉邏輯，另外就是經過style的屬性讓動畫啓用GPU進行渲染，這兩點在移動端上能夠大大的提高咱們組件的性能，好了~今天就到這裏吧~何時我想到了更好玩的活動再記錄下來吧~(￣︶￣)↗

源代碼請見GitHub：https://github.com/F-happy/mobile-wheel-of-fortune