從0到1，開發乙個動畫庫 2

傳送門：從0到1，開發乙個動畫庫(1)

上一節講到了最基礎的內容，為動畫構建「幀-值」對應的函式關係，完成「由幀到值」的計算過程。這一節將在上節**的基礎上談談如何給乙個完整的動畫新增各類事件。

在新增各類事件之前，我們先對_loop迴圈函式進行一些改進：

_loop()  else if (this.state === 'stop')  else if (this.state === 'init')  else 
}

可以清晰地看到，我們在迴圈中增加了很多態別的判斷，根據state當前不同的狀態執行相應的處理函式：我們新增了_end、_stop、_reset方法分別去處理結束、暫停和重置這三種狀態，接下來我們依次講解這些狀態的處理。

我們在core類下增加_end、end和renderendstate方法，end方法用於主動結束動畫：

end() 
_end() 
_renderendstate()

通過執行end方法，我們可以主動結束動畫：如果當前目標處於運動狀態，則將其設定為end，因此下乙個_loop函式被執行的時候，程式就被流向了_end處理函式；若為其他狀態，意味著迴圈沒有被開啟，我們就直接呼叫_end方法，使其直接到終止狀態。

_end函式的作用有三個：

重置動畫的方式也是大同小異，與上面一樣

reset() 
_reset() 
_renderinitstate()

讓動畫暫停也是與上述兩者一樣，但唯一的區別是，需要給_renderstopstate方法傳入當前時間進度：

stop()  else 
}_stop(t) 
_renderstopstate(t)

我們要在動畫開始執行的時候觸發onplay事件，只需在_play方法內增加一行**即可：

_play() ```

完整**如下：

import tween from './tween';
class core 
_init(opt) 
_initvalue(value) );
})}  _loop()  else if (this.state === 'stop')  else if (this.state === 'init')  else 
}  _renderfunction(t, d, func) 
_renderendstate() 
_renderinitstate() 
_renderstopstate(t) 
_stop(t) 
_play() 
_end() 
_reset() 
play() 
end() 
reset() 
stop()  else 
}}window.timeline = core;

相應地，html的**也更新如下，新增了各類按鈕，主動觸發目標的各類事件：

start endstop reset

下一節再見啦^_^

從0到1，開發乙個動畫庫 2

從0到1安裝開發環境

自己從0到1開發乙個APP需要了解什麼內容

如何運營好乙個論壇，從0到1入門

從0到1，開發乙個動畫庫 2

從0到1安裝開發環境

自己從0到1開發乙個APP需要了解什麼內容

如何運營好乙個論壇，從0到1入門

相關推薦