傳送門:從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() ```
完整**如下:
相應地,html的**也更新如下,新增了各類按鈕,主動觸發目標的各類事件: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;
下一節再見啦^_^
start
endstop
reset
從0到1安裝開發環境
瀏覽器 chrome 版本控制 git 命令列 mac iterm2 windows cmder restful 客戶端 insomnia webpack是一款模組載入器兼打包工具,它能把各種資源,例如js 含jsx coffee 樣式 含less sass 等都作為模組來使用和處理 npm ins...
自己從0到1開發乙個APP需要了解什麼內容
2.考慮資料從 來?1.使用網路雲伺服器 比如現在市場上有的 bmob 後端雲 和 leancloud 這是第三方的伺服器 可以給我們提供一些免費的介面 實現一般情況下的功能是沒有問題的 2.可以自己搭建後台 選擇自己想要的一些資料 這裡可能需要用到一些工具 oss儲存服務,cdn加速等等 當然 你...
如何運營好乙個論壇,從0到1入門
我們是做 教育的,做社群的目的很明確,就是為了滿足我們學員之間的互動交流 在社群裡促活我們使用者。一 制定社群規則 很多人一進入社群其實並不知道這個社群是幹什麼的 怎麼玩,作為運營主要在社群進行引導,可以通過發布社群的公告,介紹社群進入的渠道,如何在社群獲的積分和經驗值。在社群冷啟動的時候,也可以披...