原生JavaScript實現好玩兒的超級英雄老虎機動畫抽獎效果

老虎機相信大家都玩過，今天我們就使用JavaScript來完成一個超級英雄的老虎機，通過這個案例來學習JavaScript和css的動畫效果

實現的效果

頁面佈局

1. 每一個 div 容器都是一個動畫對象。
2. div容器的每一個子div都是 110px * 110px
3. 結合210px的顯示區域，讓超級英雄顯示到中間的初始位置是 top:-60px
4. 第一個英雄前面和最後一個英雄各自添加一個英雄，這樣顯示起來不會留白

動畫對象的處理

1. 初始位置 -60px,10個英雄（實際12個，不滾到第一個和第二個），最後一個位置在 -1050px
2. 每一個英雄在顯示區域的居中都有一個對應的值，本案例中第一個英雄位置是 -60px，每個英雄距離 110px
3. 結合上述，我們給該動畫設定的參數有
4. startPos: -60
5. endPos : -1050
6. 動畫向上滾動的參數是
7. property: ‘top’
8. 此外，動畫循環一次持續多長時間呢：
9. duration
10. 讓動畫看起來更自然，需要動畫曲線
11. easing: ‘easeOut’ (例如減速曲線）

動畫對象的處理續

1. 當一次動畫循環到達最大值的時候，為了讓下一次循環看起來連續進行，那麼需要將動畫的位置重置到初始位置。
2. 為了不讓觀眾看到兩次動畫循環之間的間隔，需要將每次動畫時間定為一個比較小的值。
3. 在最後一次循環當中讓動畫減速停止到指定的位置，這個位置的參數是：targetPos

動畫類 Animate()

動畫類Animate負責處理動畫對象在指定時間內，以指定速度曲線從A處運動到B處

setInterval() 方法，持續改變方塊的 left 屬性，在限定時間結束時清除定時器。

Tween[function] 計算方塊在每一時刻的位置，並讓方塊在限定時間內到達目的位置。

執行類 Game()

Game 類處理用戶傳入的參數，調用 Animate 實例展現相應的動畫

run 方法處理動畫循環，在每次循環結束後重置動畫對象

在最後一次循環將動畫對象移動到用戶指定的位置，並提供回調函數

主程序 App 對象

App對象加載和處理來自服務器的源數據，

實例化 Animate 類並傳入相應的數據，

給觸發區域的 DOM 對象綁定點擊方法，

調用 Animate 實例的 run 方法並傳入回調。

關注麥克黑，源碼分享。