老虎機相信大家都玩過，今天我們就使用JavaScript來完成一個超級英雄的老虎機，通過這個案例來學習JavaScript和css的動畫效果
實現的效果
頁面佈局
每一個 div 容器都是一個動畫對象。div容器的每一個子div都是 110px * 110px結合210px的顯示區域，讓超級英雄顯示到中間的初始位置是 top:-60px第一個英雄前面和最後一個英雄各自添加一個英雄，這樣顯示起來不會留白動畫對象的處理
動畫對象的處理續
當一次動畫循環到達最大值的時候，為了讓下一次循環看起來連續進行，那麼需要將動畫的位置重置到初始位置。為了不讓觀眾看到兩次動畫循環之間的間隔，需要將每次動畫時間定為一個比較小的值。在最後一次循環當中讓動畫減速停止到指定的位置，這個位置的參數是：targetPos動畫類 Animate()
動畫類Animate負責處理動畫對象在指定時間內，以指定速度曲線從A處運動到B處
setInterval() 方法，持續改變方塊的 left 屬性，在限定時間結束時清除定時器。
Tween[function] 計算方塊在每一時刻的位置，並讓方塊在限定時間內到達目的位置。
執行類 Game()
Game 類處理用戶傳入的參數，調用 Animate 實例展現相應的動畫
run 方法處理動畫循環，在每次循環結束後重置動畫對象
在最後一次循環將動畫對象移動到用戶指定的位置，並提供回調函數
主程序 App 對象
App對象加載和處理來自服務器的源數據，
實例化 Animate 類並傳入相應的數據，
給觸發區域的 DOM 對象綁定點擊方法，
調用 Animate 實例的 run 方法並傳入回調。
關注麥克黑，源碼分享。