目標
希望實現(xiàn)一個九宮格跑馬燈效果的抽獎功能蹬蚁，但希望不止局限于固定的樣式或效果援所∑薅ィ考慮做成一個n*n的可自定義某些參數(shù)的組件≈驮欤可自定義某些參數(shù)例如：能指定動畫效果的，能局部自定義樣式的栋烤，等等断部。
實現(xiàn)
網(wǎng)上有很多樣例，實現(xiàn)語言各式各樣班缎，react, vue, jquery, 純js...等等蝴光，遺憾的是都是上圖上代碼，代碼里都是各種嵌套的if else, 和不明意義的數(shù)字常量达址。今天想說說實現(xiàn)的思路蔑祟。
既然定義為組件，就要有個接口沉唠，有輸入輸出疆虚。一個3*3的九宮格，我們把九宮格中去除中間的啟動按鈕之外的方塊定義為獎池，抽獎就是從獎池方塊列表中選定一個產(chǎn)生径簿，選不中則未中罢屈。這里，獎池列表作為組件的輸入篇亭。
而點擊抽獎到選定抽中或未中可以前端控制缠捌，也可以后端控制，這里我們考慮是后端控制的情況译蒂，也就是點擊抽獎需要請求數(shù)據(jù)曼月，在返回數(shù)據(jù)中獲取抽獎結(jié)果。
而事實上抽獎組件功能比較獨立柔昼，所以組件的輸出哑芹，可以根據(jù)實際需要，自定義向外傳遞輸出捕透。
布局
首先我們遇到的就是布局的問題聪姿，一個3*3的九宮格，中間的按鈕是啟動按鈕乙嘀，其他的獎池方塊是自然布局呢末购？還是按照跑馬燈順序布局？自然布局是指：
這種布局可以直接使用flexbox 繪制乒躺，當然招盲，需要特殊處理下中間按鈕低缩。
跑馬燈布局是指：
這種布局可以使用絕對定位嘉冒，把元素的索引和他們的位置擺正對齊，放好咆繁。
從css實現(xiàn)上讳推，沒有什么差距，但是選擇一種布局玩般，直接決定后面的跑馬燈的算法银觅。
跑馬燈
跑馬燈效果的實現(xiàn)是給每個方塊加遮罩，然后利用定時器控制遮罩的出現(xiàn)順序坏为。如果選擇了上面第一種的自然布局究驴，那么在移動遮罩時，遮罩一定不是順序+1的移動匀伏，而是它的移動順序的索引和方塊的索引之間有一個映射的關(guān)系洒忧，也就是遮罩要按照0，1够颠，2熙侍，4，7，6蛉抓，5庆尘，3的順序去循環(huán)移動。model層要始終維護這份映射關(guān)系巷送。
如果選擇了上面第二種跑馬燈布局驶忌，那么遮罩只需要按照順序+1移動就可以了。但是一旦使用這種布局惩系，就傾向于跑馬燈是按照順時針來動畫的位岔，如果動畫改變，布局需要重新修改堡牡。當然不修改也可以抒抬，但是會比較麻煩。
減速
跑馬燈效果通常是先經(jīng)過一段勻速運動晤柄，然后再經(jīng)過一段減速運動擦剑，最后停在指定的方塊上。勻速運動比較好實現(xiàn)芥颈，定時器的速度是常量即可惠勒，對于減速運動來說，有很多實現(xiàn)方法爬坑。減速過程是線性還是非線性纠屋，我們可以不同的實現(xiàn)。如果是簡單一點盾计，可以計算步數(shù)售担，勻速將速度減下來，效果好一點我們可以借助貝塞爾函數(shù)署辉。
關(guān)于貝塞爾函數(shù)的數(shù)學(xué)原理等族铆，可以自行百度。我們主要是利用了三階貝塞爾函數(shù)的實現(xiàn)哭尝，自定義曲線的曲率哥攘，然后和減速運動結(jié)合起來。
當然材鹦，既然用到了數(shù)學(xué)的函數(shù)曲線逝淹，我們可以任意定義速度曲線，js Math方法去生成一個函數(shù)曲線（例如Math.pow()）桶唐，從而得到減速過程的速度栅葡。
組件和外部通信
這里說一下抽獎組件怎么和外部通信的問題。如果是react實現(xiàn)的話莽红，通過props 回調(diào)妥畏，或者結(jié)合 redux 等都能較為方便的實現(xiàn)通信邦邦。如果是vue實現(xiàn)的話，可以通過廣播醉蚁，通知外部燃辖。
在小程序中，可以通過結(jié)合triggerEvent + setData + properties observer 實現(xiàn)网棍。小程序自定義組件內(nèi)部通過triggerEvent觸發(fā)外部黔龟，外部setData修改數(shù)據(jù)，而自定義組件內(nèi)部properties observer發(fā)現(xiàn)數(shù)據(jù)變化滥玷，從而拿到新的數(shù)據(jù)氏身。
沒有代碼。嗯惑畴。一千個人應(yīng)該有一千種實現(xiàn)方法蛋欣，希望學(xué)習(xí)更為簡潔的思路。歡迎拍磚如贷。
