九宮格抽獎跑馬燈效果實現--微信小程序

目標

但願實現一個九宮格跑馬燈效果的抽獎功能，但但願不止侷限於固定的樣式或效果。考慮作成一個n*n的可自定義某些參數的組件。可自定義某些參數例如：能指定動畫效果的，能局部自定義樣式的，等等。

實現

網上有不少樣例，實現語言各式各樣，react, vue, jquery, 純js...等等，遺憾的是都是上圖上代碼，代碼裏都是各類嵌套的if else, 和不明意義的數字常量。今天想說說實現的思路。

既然定義爲組件，就要有個接口，有輸入輸出。一個3*3的九宮格，咱們把九宮格中去除中間的啓動按鈕以外的方塊定義爲獎池，抽獎就是從獎池方塊列表中選定一個產生，選不中則未中。這裏，獎池列表做爲組件的輸入。

而點擊抽獎到選定抽中或未中能夠前端控制，也能夠後端控制，這裏咱們考慮是後端控制的狀況，也就是點擊抽獎須要請求數據，在返回數據中獲取抽獎結果。

而事實上抽獎組件功能比較獨立，因此組件的輸出，能夠根據實際須要，自定義向外傳遞輸出。

佈局

首先咱們遇到的就是佈局的問題，一個3*3的九宮格，中間的按鈕是啓動按鈕，其餘的獎池方塊是天然佈局呢？仍是按照跑馬燈順序佈局？天然佈局是指：

這種佈局能夠直接使用flexbox 繪製，固然，須要特殊處理下中間按鈕。

跑馬燈佈局是指：

這種佈局可使用絕對定位，把元素的索引和他們的位置擺正對齊，放好。

從css實現上，沒有什麼差距，可是選擇一種佈局，直接決定後面的跑馬燈的算法。

跑馬燈

跑馬燈效果的實現是給每一個方塊加遮罩，而後利用定時器控制遮罩的出現順序。若是選擇了上面第一種的天然佈局，那麼在移動遮罩時，遮罩必定不是順序+1的移動，而是它的移動順序的索引和方塊的索引之間有一個映射的關係，也就是遮罩要按照0，1，2，4，7，6，5，3的順序去循環移動。model層要始終維護這份映射關係。

若是選擇了上面第二種跑馬燈佈局，那麼遮罩只須要按照順序+1移動就能夠了。可是一旦使用這種佈局，就傾向於跑馬燈是按照順時針來動畫的，若是動畫改變，佈局須要從新修改。固然不修改也能夠，可是會比較麻煩。

減速

跑馬燈效果一般是先通過一段勻速運動，而後再通過一段減速運動，最後停在指定的方塊上。勻速運動比較好實現，定時器的速度是常量便可，對於減速運動來講，有不少實現方法。減速過程是線性仍是非線性，咱們能夠不一樣的實現。若是是簡單一點，能夠計算步數，勻速將速度減下來，效果好一點咱們能夠藉助貝塞爾函數。

關於貝塞爾函數的數學原理等，能夠自行百度。咱們主要是利用了三階貝塞爾函數的實現，自定義曲線的曲率，而後和減速運動結合起來。

固然，既然用到了數學的函數曲線，咱們能夠任意定義速度曲線，js Math方法去生成一個函數曲線（例如Math.pow()），從而獲得減速過程的速度。

組件和外部通訊

這裏說一下抽獎組件怎麼和外部通訊的問題。若是是react實現的話，經過props 回調，或者結合 redux 等都能較爲方便的實現通訊。若是是vue實現的話，能夠經過廣播，通知外部。

在小程序中，能夠經過結合triggerEvent + setData + properties observer 實現。小程序自定義組件內部經過triggerEvent觸發外部，外部setData修改數據，而自定義組件內部properties observer發現數據變化，從而拿到新的數據。

沒有代碼。嗯。一千我的應該有一千種實現方法，但願學習更爲簡潔的思路。歡迎拍磚。