目標(biāo)
希望實(shí)現(xiàn)一個九宮格跑馬燈效果的抽獎功能，但希望不止局限于固定的樣式或效果?？紤]做成一個n*n的可自定義某些參數(shù)的組件?？勺远x某些參數(shù)例如：能指定動畫效果的，能局部自定義樣式的，等等。
實(shí)現(xiàn)
網(wǎng)上有很多樣例，實(shí)現(xiàn)語言各式各樣，react, vue, jquery, 純js...等等，遺憾的是都是上圖上代碼，代碼里都是各種嵌套的if else, 和不明意義的數(shù)字常量。今天想說說實(shí)現(xiàn)的思路。
既然定義為組件，就要有個接口，有輸入輸出。一個3*3的九宮格，我們把九宮格中去除中間的啟動按鈕之外的方塊定義為獎池，抽獎就是從獎池方塊列表中選定一個產(chǎn)生，選不中則未中。這里，獎池列表作為組件的輸入。
而點(diǎn)擊抽獎到選定抽中或未中可以前端控制，也可以后端控制，這里我們考慮是后端控制的情況，也就是點(diǎn)擊抽獎需要請求數(shù)據(jù)，在返回數(shù)據(jù)中獲取抽獎結(jié)果。
而事實(shí)上抽獎組件功能比較獨(dú)立，所以組件的輸出，可以根據(jù)實(shí)際需要，自定義向外傳遞輸出。
布局
首先我們遇到的就是布局的問題，一個3*3的九宮格，中間的按鈕是啟動按鈕，其他的獎池方塊是自然布局呢？還是按照跑馬燈順序布局？自然布局是指：
這種布局可以直接使用flexbox 繪制，當(dāng)然，需要特殊處理下中間按鈕。
跑馬燈布局是指：
這種布局可以使用絕對定位，把元素的索引和他們的位置擺正對齊，放好。
從css實(shí)現(xiàn)上，沒有什么差距，但是選擇一種布局，直接決定后面的跑馬燈的算法。
跑馬燈
跑馬燈效果的實(shí)現(xiàn)是給每個方塊加遮罩，然后利用定時器控制遮罩的出現(xiàn)順序。如果選擇了上面第一種的自然布局，那么在移動遮罩時，遮罩一定不是順序+1的移動，而是它的移動順序的索引和方塊的索引之間有一個映射的關(guān)系，也就是遮罩要按照0，1，2，4，7，6，5，3的順序去循環(huán)移動。model層要始終維護(hù)這份映射關(guān)系。
如果選擇了上面第二種跑馬燈布局，那么遮罩只需要按照順序+1移動就可以了。但是一旦使用這種布局，就傾向于跑馬燈是按照順時針來動畫的，如果動畫改變，布局需要重新修改。當(dāng)然不修改也可以，但是會比較麻煩。
減速
跑馬燈效果通常是先經(jīng)過一段勻速運(yùn)動，然后再經(jīng)過一段減速運(yùn)動，最后停在指定的方塊上。勻速運(yùn)動比較好實(shí)現(xiàn)，定時器的速度是常量即可，對于減速運(yùn)動來說，有很多實(shí)現(xiàn)方法。減速過程是線性還是非線性，我們可以不同的實(shí)現(xiàn)。如果是簡單一點(diǎn)，可以計算步數(shù)，勻速將速度減下來，效果好一點(diǎn)我們可以借助貝塞爾函數(shù)。
關(guān)于貝塞爾函數(shù)的數(shù)學(xué)原理等，可以自行百度。我們主要是利用了三階貝塞爾函數(shù)的實(shí)現(xiàn)，自定義曲線的曲率，然后和減速運(yùn)動結(jié)合起來。
當(dāng)然，既然用到了數(shù)學(xué)的函數(shù)曲線，我們可以任意定義速度曲線，js Math方法去生成一個函數(shù)曲線（例如Math.pow()），從而得到減速過程的速度。
組件和外部通信
這里說一下抽獎組件怎么和外部通信的問題。如果是react實(shí)現(xiàn)的話，通過props 回調(diào)，或者結(jié)合 redux 等都能較為方便的實(shí)現(xiàn)通信。如果是vue實(shí)現(xiàn)的話，可以通過廣播，通知外部。
在小程序中，可以通過結(jié)合triggerEvent + setData + properties observer 實(shí)現(xiàn)。小程序自定義組件內(nèi)部通過triggerEvent觸發(fā)外部，外部setData修改數(shù)據(jù)，而自定義組件內(nèi)部properties observer發(fā)現(xiàn)數(shù)據(jù)變化，從而拿到新的數(shù)據(jù)。
沒有代碼。嗯。一千個人應(yīng)該有一千種實(shí)現(xiàn)方法，希望學(xué)習(xí)更為簡潔的思路。歡迎拍磚。
