上一篇文章《用 JSX 實(shí)現(xiàn) Carousel 輪播組件》中，我們實(shí)現(xiàn)了一個(gè) “基礎(chǔ)” 的輪播組件。為什么我們叫它 “基礎(chǔ)” 呢？因?yàn)槠鋵?shí)它看起來(lái)已經(jīng)可以滿足我們輪播組件的功能，但是其實(shí)它還有很多缺陷我們是沒(méi)有去完善的。

雖然我們已經(jīng)在里面實(shí)現(xiàn)了兩個(gè)功能，一是可以自動(dòng)輪播，二是可以手勢(shì)拖拽。但是其實(shí)它離一個(gè)真正意義上的可用程度還是有很遠(yuǎn)的距離的。

首先我們的自動(dòng)輪播和拖拽是無(wú)法無(wú)縫連接的，也就是說(shuō)當(dāng)我們拖拽結(jié)束后，我們的輪播應(yīng)該繼續(xù)自動(dòng)輪播的。這一點(diǎn)我們是還沒(méi)有實(shí)現(xiàn)的。我們的拖拽本身也是有細(xì)節(jié)上的問(wèn)題的，比方說(shuō)它目前只支持鼠標(biāo)的拖拽事件，并不支持觸屏的拖拽，這個(gè)也是我們?cè)诰W(wǎng)頁(yè)研發(fā)過(guò)程中必須要去面對(duì)的問(wèn)題。

第二我們動(dòng)畫(huà)是使用 CSS Animation 實(shí)現(xiàn)的，也不具備任何的自定義和相應(yīng)變化的。

所以接下來(lái)我們來(lái)一起實(shí)現(xiàn)我們的動(dòng)畫(huà)庫(kù)，但是實(shí)現(xiàn)動(dòng)畫(huà)庫(kù)之前，我們需要擁有一個(gè)動(dòng)畫(huà)庫(kù)中的時(shí)間軸庫(kù)。這篇文章我們先來(lái)看看怎么去實(shí)現(xiàn)一個(gè)時(shí)間軸類，和一個(gè)基礎(chǔ)的動(dòng)畫(huà)類來(lái)使用這個(gè)時(shí)間軸。

代碼整理

首先我們發(fā)現(xiàn)之前寫的 Carousel 組件的代碼已經(jīng)很復(fù)雜了，所以我們需要封裝一下它，這里我們就把它獨(dú)立放入一個(gè) JavaScript 文件中。

在項(xiàng)目根目錄，建立一個(gè) carousel.js，然后把我們 main.js 中 carousel 組件相關(guān)的代碼都移動(dòng)到 carousel.js 中。

carousel.js 中只需要 import Component 即可，然后給我們的 Carousel 類加上 export。代碼結(jié)構(gòu)如下：

import { Component } from ’./framework.js’;export class Carousel extends Component {/** Carousel 里面的代碼 */}

最后我們?cè)?main.js 中重新 import Carousel 組件即可。

import { Component, createElement } from ’./framework.js’;import { Carousel } from ’./carousel.js’;let gallery = [ ’https://source.unsplash.com/Y8lCoTRgHPE/1600x900’, ’https://source.unsplash.com/v7daTKlZzaw/1600x900’, ’https://source.unsplash.com/DlkF4-dbCOU/1600x900’, ’https://source.unsplash.com/8SQ6xjkxkCo/1600x900’,];let a = <Carousel src={gallery} />;// document.body.appendChild(a);a.mountTo(document.body);

整理好我們的代碼，就可以開(kāi)始寫我們的時(shí)間軸庫(kù)了。這個(gè)時(shí)間軸是我們動(dòng)畫(huà)庫(kù)中的一部分，所以我們統(tǒng)一放入我們動(dòng)畫(huà)庫(kù)的 JavaScript 文件中： animation.js。

我們是需要用這個(gè)時(shí)間軸去實(shí)現(xiàn)我們后續(xù)的動(dòng)畫(huà)庫(kù)的，而動(dòng)畫(huà)中就有一個(gè)非常關(guān)鍵的概念，就是 “幀”

最基礎(chǔ)的動(dòng)畫(huà)能力，就是每幀執(zhí)行了一個(gè)事件。

JavaScript 中的 “幀”

因?yàn)槲覀冃枰小皫辈拍軐?shí)現(xiàn)我們的動(dòng)畫(huà)，所以我們需要先去了解 JavaScript 中的幾種處理幀的方案。

人眼能夠識(shí)別的動(dòng)畫(huà)的一個(gè)最高頻率就是 60 幀。

有的同學(xué)可能有看過(guò)李安導(dǎo)演的電影。比如，《比利·林恩的中場(chǎng)戰(zhàn)事》就是全世界第一個(gè) 120 幀拍攝和 120 幀播放的電影。

也是因?yàn)閹史叮院芏嗟胤骄蜁?huì)感到很絲滑。但是一般我們的游戲，包括我們的顯示器，它們支持的都是 60 幀。雖然我們看顯示器的設(shè)置中，可能會(huì)有 70、80 幀，但是一般軟件都會(huì)與 60 幀對(duì)其。

如果我們 1000 毫秒（一秒）里面需要 60 幀的話，那是多少毫秒是一幀呢？也就是 1000 / 60 = 16.666 1000 / 60 = 16.666 1000/60=16.666，所以 16 毫秒大概就是一幀的時(shí)間。

這個(gè)就是為什么我們一般都會(huì)用 16 毫秒作為一幀的時(shí)長(zhǎng)。

實(shí)現(xiàn)“幀”的方法

接下來(lái)我們來(lái)分析一下，有哪些方法可以在 JavaScript 中實(shí)現(xiàn) “幀”。

1. setInterval

第一種就是 setInterval，這個(gè)其實(shí)我們?cè)趯戄啿D的時(shí)候就用過(guò)。讓一個(gè)邏輯在每一幀中執(zhí)行，就是這樣的：

setInterval(() => {/** 一幀要發(fā)生的事情 */}, 16)

這里設(shè)置的時(shí)間隔，就是 16 毫秒，一幀的時(shí)長(zhǎng)。

2. setTimeout

我們也是可以使用 setTimeout 這個(gè)去重復(fù)處理一幀中的事件。但是因?yàn)?setTimeout 是只執(zhí)行一次的。所以我們需要給它一個(gè)函數(shù)名，方便我們后面重復(fù)調(diào)用它。

一般這種用來(lái)作為動(dòng)畫(huà)中的一幀的 setTimeout，都會(huì)命名為 tick。因?yàn)?tick 在英文中，就是我們時(shí)鐘秒針走了一秒時(shí)發(fā)出來(lái)的聲音，后面也用這個(gè)聲音作為一個(gè)單詞，來(lái)表達(dá)走了一幀/一秒。

我們的使用方式就是定義一個(gè) tick 函數(shù)，讓它執(zhí)行一個(gè)邏輯/事件。然后使用 setTimeout 來(lái)加入一個(gè)延遲 16 毫秒后再執(zhí)行一次自己。

let tick = () => {/** 我們的邏輯/事件 */ setTimout(tick, 16);}3. requestAnimationFrame

最后現(xiàn)代瀏覽器支持了一個(gè) requrestAnimationFrame（也叫 RAF）。這是在寫動(dòng)畫(huà)時(shí)比較常用，它不需要去定義一幀的時(shí)長(zhǎng)。

當(dāng)我們申請(qǐng)瀏覽器執(zhí)行下一幀的時(shí)候，就會(huì)執(zhí)行傳入 RAF 的 callback 函數(shù)。并且這個(gè)函數(shù)執(zhí)行的時(shí)間是與瀏覽器的幀率是相關(guān)的。

所以，如果我們要做一些瀏覽器的降幀、降頻的操作時(shí)，那么 RAF 就可以跟著瀏覽的幀率一起下降。

使用也是非常簡(jiǎn)單：

let tick = () => {/** 我們的邏輯/事件 */ setTimout(tick, 16);}

所以，一般最常用的就是這三種方案。如果我們的用戶大部分都是使用現(xiàn)代瀏覽器的話，就推薦使用 requestAnimationFrame。

“為什么不用 setInterval 呢”？因?yàn)?setInterval 比較不可控，瀏覽器到底會(huì)不會(huì)按照我們?cè)O(shè)置的 16 毫秒去執(zhí)行呢？這個(gè)就不好說(shuō)了。

還有一個(gè)就是，一旦我們這個(gè) tick 寫的不好，setInterval 就有可能發(fā)生積壓。因?yàn)樗枪潭?16 毫秒循環(huán)執(zhí)行的，所以 interval 之間是不會(huì)管上一個(gè) interval 中的代碼是否已經(jīng)執(zhí)行完，第二個(gè) interval 的代碼就會(huì)進(jìn)入 interval 的隊(duì)列。這個(gè)也是取決于瀏覽器的底層實(shí)現(xiàn)，每一個(gè)瀏覽器有可能選擇不同的策略。

因?yàn)槲覀冞@里實(shí)現(xiàn)的動(dòng)畫(huà)庫(kù)，不需要考慮到舊瀏覽器的兼容性。我們這里就選擇使用 requestAnimationFrame。

接下來(lái)的時(shí)間軸庫(kù)中，我們就會(huì)使用 requestAnimationFrame 來(lái)做一個(gè)自重復(fù)的操作。

這里還要提到一個(gè)和 requestAnimationFrame 對(duì)應(yīng)的一個(gè) cancelAnimationFrame。如果我們聲明一個(gè)變量來(lái)儲(chǔ)存 requestAnimationFrame，我們就可以傳入這個(gè)變量到 cancelAnimationFrame 讓這個(gè)動(dòng)畫(huà)停止。

let tick = () => {let handler = requestAnimationFrame(tick); cancelAnimationFrame(handler);}

這樣我們就可以避免一些資源的浪費(fèi)。

實(shí)現(xiàn) Timeline 時(shí)間軸

開(kāi)頭我們講過(guò)，在做動(dòng)畫(huà)的時(shí)候，我們就需要把 tick 這個(gè)東西給包裝成一個(gè) Timeline。

接下來(lái)我們就來(lái)一起實(shí)現(xiàn)這個(gè) Timeline（時(shí)間軸） 類。正常來(lái)講，我們一個(gè) Timeline 只要 start（開(kāi)始）就可以了，并不會(huì)有一個(gè) stop（停止）的狀態(tài)。因?yàn)橐粋€(gè)時(shí)間軸，肯定是會(huì)一直播放到結(jié)束的，并沒(méi)有中間停止這樣的狀態(tài)。

不過(guò)它是會(huì)有 pause（暫停） 和 resume（恢復(fù)）這種組合。而這一組狀態(tài)也是 Timeline 中非常重要的功能。比如，我們寫了一大堆的動(dòng)畫(huà)，我們就需要把它們都放到同一個(gè)動(dòng)畫(huà) Timeline 里面去執(zhí)行，而在執(zhí)行的過(guò)程中，我可以讓所有這些動(dòng)畫(huà)暫停和恢復(fù)播放。

另外就是這個(gè) rate（播放速率），不過(guò)這個(gè)不是所有的時(shí)間線都會(huì)提供。rate 會(huì)有兩種方法，一個(gè)是 set、一個(gè)是 get。因?yàn)椴シ诺乃俾适菚?huì)有一個(gè)倍數(shù)的，我們可以讓動(dòng)畫(huà)快進(jìn)、慢放都是可以的。

在設(shè)計(jì)這個(gè)動(dòng)畫(huà)庫(kù)時(shí)，還有一個(gè)非常重要的概念，叫 reset（重啟）。這個(gè)會(huì)把整個(gè)時(shí)間軸清理干凈，這樣我們就可以去復(fù)用一些時(shí)間線。

這個(gè)教程中實(shí)現(xiàn)的 set 和 get 的 rate 就不做了，因?yàn)檫@個(gè)是比較高級(jí)的時(shí)間線功能。如果我們要做這個(gè)就要講很多相關(guān)的知識(shí)。但是 pause 和 resume 對(duì)于我們的 carousel（輪播圖）是至關(guān)重要的，所以這里我們是一定要實(shí)現(xiàn)的。

講了那么多，我們趕緊開(kāi)工吧！～

實(shí)現(xiàn) start 函數(shù)

在我們的 start 方法中，就會(huì)有一個(gè)啟動(dòng) tick 的過(guò)程。這里我們會(huì)選擇把這個(gè) tick 變成一個(gè)私有的方法（把它藏起來(lái)）。不然的話，這個(gè) tick 誰(shuí)都可以調(diào)用，這樣很容易就會(huì)被外部的使用者破壞掉整個(gè) Timeline 類的狀態(tài)體系。

那么我們?cè)趺床拍馨?tick 完美的藏起來(lái)呢？我們會(huì)在 animation.js 這個(gè)文件的全局域中聲明一個(gè)常量叫 TICK。并且用 Symbol 來(lái)創(chuàng)建一個(gè) tick。這樣除了在 animation.js 當(dāng)中可以獲取到我們的 tick 之外，其他任何地方都是無(wú)法獲得 tick 這個(gè) Symbol 的。

同理 tick 中的 requestAnimationFrame 也同樣可以創(chuàng)建一個(gè)全局變量 TICK_HANDLER 來(lái)儲(chǔ)存。這個(gè)變量也會(huì)使用一個(gè) Symbol 來(lái)包裹起來(lái)，這樣就可以限定只能在本文件中使用。

對(duì) Symbol 不是很熟悉的同學(xué)，其實(shí)我們可以理解它為一種 “特殊字符”。就算我們把兩個(gè)傳入 Symbol 的 key 都叫 ‘tick’，創(chuàng)建出來(lái)的兩個(gè)值都會(huì)是不一樣的。這個(gè)就是 Symbol 的一個(gè)特性。

其實(shí)我們之前的《前端進(jìn)階》的文章中也有詳細(xì)講過(guò)和使用過(guò) Symbol。比如，我們使用過(guò) Symbol 來(lái)代表 EOF（End Of File）文件結(jié)束符號(hào)。所以它作為對(duì)象的一個(gè) key 并不是唯一的用法，Symbol 這種具有唯一特性，是它存在的一個(gè)意義。

有了這兩個(gè)常量，我們就可以在 Timeline 類的構(gòu)造函數(shù)中初始化 tick。

初始化好 Tick 我們就可以在 start 函數(shù)中直接調(diào)用全局中的 TICK。這樣我們 Timeline（時(shí)間線）中的時(shí)間就開(kāi)始以 60 幀的播放率開(kāi)始運(yùn)行。

最后代碼就是如下：

const TICK = Symbol(’tick’);const TICK_HANDLER = Symbol(’tick-handler’);export class Timeline { constructor() { this[TICK] = () => { console.log(’tick’); requestAnimationFrame(this[TICK]); }; } start() { this[TICK](); } pause() {} resume() {} reset() {}}

完成到這一部分，我們就可以把這個(gè) Timeline 類引入我們的 main.js 里面試試。

import { Timeline } from ’./animation.js’;let tl = new Timeline();tl.start();

Build 一下我們的代碼，然后在瀏覽器運(yùn)行，這時(shí)候就可以看到在 console 中，我們的 tick 是正常在運(yùn)行了。這說(shuō)明我們 Timeline 目前的邏輯是寫對(duì)了。

到這里，我們實(shí)現(xiàn)了一個(gè)非常基本的時(shí)間線的操作。接下來(lái)我們來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 Animation（動(dòng)畫(huà)）類來(lái)測(cè)試我們的時(shí)間軸。

實(shí)現(xiàn) Animation 類

接下來(lái)我們給 Tick 添加一個(gè) animation（動(dòng)畫(huà)），并且執(zhí)行這個(gè)動(dòng)畫(huà)。

我們做的這個(gè)時(shí)間軸，最終是需要用在我們的 Carousel（輪播圖）的動(dòng)畫(huà)上的。而輪播圖上的動(dòng)畫(huà)，我們稱它為 “屬性動(dòng)畫(huà)”。

因?yàn)槲覀兪前岩粋€(gè)對(duì)象的某一個(gè)屬性，從一個(gè)值變成量外一個(gè)值。

與屬性動(dòng)畫(huà)相對(duì)的還有幀動(dòng)畫(huà)，也就是每一秒都來(lái)一張圖片。講到幀動(dòng)畫(huà)，我們應(yīng)該都知道 “宮崎駿” 老師的動(dòng)畫(huà)，比如，經(jīng)典的《龍貓》、《天空之城》等等。這些動(dòng)畫(huà)都是 “宮崎駿” 老師一張一張圖畫(huà)出來(lái)的，然后每一幀播放一張圖片，在一個(gè)快速播放的過(guò)程，就會(huì)讓我們看到圖中的人和物在動(dòng)了。比動(dòng)漫時(shí)代更早的時(shí)候也已經(jīng)有動(dòng)畫(huà)了，也就是我們古人所說(shuō)的走馬燈。

上面說(shuō)到的動(dòng)畫(huà)，都不是通過(guò)屬性來(lái)做的。但是我們?cè)跒g覽器里面做的，大部分都是屬性的動(dòng)畫(huà)。每個(gè)動(dòng)畫(huà)都會(huì)有一個(gè)初始屬性值和終止屬性值。

了解完動(dòng)畫(huà)的理論后，我們就可以開(kāi)始實(shí)現(xiàn)這部分的邏輯。首先我們 Animation（動(dòng)畫(huà)）這部分的邏輯和 Timeline 也是相對(duì)獨(dú)立的，所以這里我們可以把 Animation 單獨(dú)封裝成一個(gè)類。（我們后面的前端組件化的文章中還會(huì)再次強(qiáng)化動(dòng)畫(huà)庫(kù)的功能。）

export class Animation { constructor() {}}

首先創(chuàng)建一個(gè) Animation（動(dòng)畫(huà)）我們需要以下參數(shù)：

object：被賦予動(dòng)畫(huà)的元素對(duì)象 property：被賦予動(dòng)畫(huà)變動(dòng)的屬性 startValue：動(dòng)畫(huà)起始值 endValue：動(dòng)畫(huà)終止值 duration：動(dòng)畫(huà)時(shí)長(zhǎng) timingFunction：動(dòng)畫(huà)與時(shí)間的曲線

這里我們需要注意的是，傳入的 property（屬性）一般來(lái)說(shuō)都是帶有一個(gè)單位的，比如：px（像素）。因?yàn)槲覀兊?startValue 和 endValue 一定是一個(gè) JavaScript 里面的一個(gè)數(shù)值。那么如果我們想要一個(gè)完整的 Animation，我們還需要傳入更多的參數(shù)。

但是這里我們就先不往后加，先實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 Animation 。

初始化我們的 Animation 對(duì)象時(shí)，我們是需要把所有傳入的參數(shù)都存儲(chǔ)到這個(gè)對(duì)象的屬性中，所以在 constructor 這里我們就要把所有傳入的參數(shù)的原封不動(dòng)的抄寫一遍。

export class Animation { constructor(object, property, startValue, endValue, duration, timingFunction) { this.object = object; this.property = property; this.startValue = startValue; this.endValue = endValue; this.duration = duration; this.timingFunction = timingFunction; }}

接下來(lái)我們需要一個(gè)執(zhí)行 animation（動(dòng)畫(huà)）的函數(shù)，我們叫它為 exec、go 都是可以的，這里我們就用 run（運(yùn)行）這個(gè)單詞。個(gè)人覺(jué)得更加貼切這個(gè)函數(shù)的作用。

這個(gè)函數(shù)是需要接收一個(gè) time（時(shí)間）參數(shù)，而這個(gè)是一個(gè)虛擬時(shí)間。如果我們用真實(shí)的時(shí)間其實(shí)我們根本不需要做一個(gè) Timeline（時(shí)間軸）了。

有了這個(gè)時(shí)間，我們就可以根據(jù)這個(gè)時(shí)間計(jì)算當(dāng)前動(dòng)畫(huà)的屬性應(yīng)該變化多少。要計(jì)算這個(gè)屬性的變化，我們首先需要知道動(dòng)畫(huà)初始值到終止值的總變化區(qū)間。

公式：變化區(qū)間(range) = 終止值(endValue) - 初始值(startValue)

得到了 變換區(qū)間 后，我們就可以計(jì)算出每一幀這個(gè)動(dòng)畫(huà)要變化多少，這個(gè)公式就是這樣的：

變化值 = 變化區(qū)間值(range) * 時(shí)間(time) / 動(dòng)畫(huà)時(shí)長(zhǎng)(duration)

這里得到的變化值，會(huì)根據(jù)當(dāng)前已經(jīng)執(zhí)行的時(shí)間與動(dòng)畫(huà)的總時(shí)長(zhǎng)算出一個(gè) progression（進(jìn)度 %），然后用這個(gè)進(jìn)度的百分比與變化區(qū)間，算出我們初始值到達(dá)當(dāng)前進(jìn)度的值的差值。這個(gè)差值就是我們的 變化值。

這個(gè)變化值，就相等于我們 CSS animation 中的 linear 動(dòng)畫(huà)曲線。這動(dòng)畫(huà)曲線就是一條直線。這里我們先用這個(gè)實(shí)現(xiàn)我們的 Animation 類，就先不去處理我們的 timingFunction，后面我們?cè)偃ヌ幚磉@個(gè)動(dòng)態(tài)的動(dòng)畫(huà)曲線。

有了這個(gè)變化值，我們就可以用 startValue（初始值）+ 變化值，得到當(dāng)前進(jìn)度對(duì)應(yīng)的屬性值。我們的代碼就是這樣實(shí)現(xiàn)的：

run(time) { let range = this.endValue - this.startValue; this.object[this.property] = this.startValue + (range * time) / this.duration;}

這樣 Animation 就可以運(yùn)作的了。接下來(lái)我們把這個(gè) Animation 添加到 Timeline 的 animation 隊(duì)列里面，讓它在隊(duì)列中被執(zhí)行。

我們上面說(shuō)到，這個(gè) Animation 中的 run 方法接收的 time（時(shí)間）是一個(gè)虛擬的時(shí)間。所以在 Timeline 中調(diào)用這個(gè) run 方法的時(shí)候就要把一個(gè)虛擬時(shí)間傳給 Animation，這樣我們的動(dòng)畫(huà)就可以運(yùn)作了。

好，這里我們要添加 animation 到 timeline 里面，首先我們就要有一個(gè) animations 隊(duì)列。這個(gè)我們就直接生成一個(gè) animations Set。

這個(gè)與其他 Timeline 中的儲(chǔ)存方式一樣，我們建立一個(gè)全局的 ANIMATIONS 常量來(lái)儲(chǔ)存，它的值就用 Symbol 包裹起來(lái)。這樣就可以避免這個(gè)隊(duì)列不小心被外部調(diào)用到了。

const ANIMATIONS = Symbol(’animations’);

這個(gè)隊(duì)列還需要在 Timeline 類構(gòu)造的時(shí)候，就賦值一個(gè)空的 Set。

constructor() { this[ANIMATIONS] = new Set();}

有隊(duì)列，那么我們必然就需要有一個(gè)加入隊(duì)列的方法，所以我們?cè)?Timeline 類中還要加入一個(gè) add() 方法。實(shí)現(xiàn)邏輯如下：

constructor() { this[ANIMATIONS] = new Set();}

我們要在 Timeline 中給 Animation 的 run 傳一個(gè)當(dāng)前已經(jīng)執(zhí)行了的時(shí)長(zhǎng)。要計(jì)算這個(gè)時(shí)長(zhǎng)的話，就要在 Timeline 開(kāi)始的時(shí)候就記錄好一個(gè)開(kāi)始時(shí)間。然后每一個(gè)動(dòng)畫(huà)被觸發(fā)的時(shí)候，用 當(dāng)前時(shí)間 - Timeline 開(kāi)始時(shí)間 才能獲得當(dāng)前已經(jīng)運(yùn)行了多久。

但是之前的 tick 是寫在了 constructor 里面，Timeline 開(kāi)始時(shí)間必然是放在 start 方法之中，所以為了能夠更方便的可以獲得這個(gè)時(shí)間，我們可以直接把 tick 聲明放到 start 里面。

雖然說(shuō)這個(gè)改動(dòng)會(huì)讓我們每次 Timeline 啟動(dòng)的時(shí)候，都會(huì)重新構(gòu)建一個(gè) tick 對(duì)象函數(shù)。但是這種方法會(huì)更便于快速實(shí)現(xiàn)這個(gè)功能，不過(guò)想要性能更好的同學(xué)也是可以優(yōu)化這一個(gè)地方的。

移動(dòng)完我們 tick 之后，我們就可以在 tick 里面加入調(diào)用 ANIMATIONS 隊(duì)列的 animation（動(dòng)畫(huà)）了。因?yàn)橐粋€(gè) Timeline 里面可以有多個(gè)animation，并且每一幀都會(huì)推動(dòng)他們到下一個(gè)進(jìn)度的屬性狀態(tài)。所以這里我們就用一個(gè)循環(huán)，然后調(diào)用一遍我們 ANIMATIONS 隊(duì)列里面的所有的 animation 的 run 方法。

最后我們的代碼就是這樣的：

const TICK = Symbol(’tick’);const TICK_HANDLER = Symbol(’tick-handler’);const ANIMATIONS = Symbol(’animations’);export class Timeline { constructor() { this[ANIMATIONS] = new Set(); } start() { let startTime = Date.now(); this[TICK] = () => { let t = Date.now() - startTime; for (let animation of this[ANIMATIONS]) { animation.run(t); } requestAnimationFrame(this[TICK]); }; this[TICK](); } pause() {} resume() {} reset() {} add(animation) { this[ANIMATIONS].add(animation); }}export class Animation { constructor(object, property, startValue, endValue, duration, timingFunction) { this.object = object; this.property = property; this.startValue = startValue; this.endValue = endValue; this.duration = duration; this.timingFunction = timingFunction; } run(time) { console.log(time); let range = this.endValue - this.startValue; this.object[this.property] = this.startValue + (range * time) / this.duration; }}

我們?cè)?animation 的 run 方法中，加入一個(gè) console.log(time)，方便我們調(diào)試。

最后我們?cè)?main.js 中，把 animation 加到我們的 Timeline 中。

import { Component, createElement } from ’./framework.js’;import { Carousel } from ’./carousel.js’;import { Timeline, Animation } from ’./animation.js’;let gallery = [ ’https://source.unsplash.com/Y8lCoTRgHPE/1600x900’, ’https://source.unsplash.com/v7daTKlZzaw/1600x900’, ’https://source.unsplash.com/DlkF4-dbCOU/1600x900’, ’https://source.unsplash.com/8SQ6xjkxkCo/1600x900’,];let a = <Carousel src={gallery} />;// document.body.appendChild(a);a.mountTo(document.body);let tl = new Timeline();// tl.add(new Animation({}, ’property’, 0, 100, 1000, null));tl.start();

我們發(fā)現(xiàn) Animation 確實(shí)可以運(yùn)作了，時(shí)間也可以獲得了。但是也發(fā)現(xiàn)了一個(gè)問(wèn)題，Animation 一直在播放沒(méi)有停止。

那么我們就要給它加入一個(gè)終止條件。我們這個(gè)條件判斷應(yīng)該放在執(zhí)行 animation.run 之前，如果當(dāng)前的時(shí)間已經(jīng)超過(guò)了動(dòng)畫(huà)的時(shí)長(zhǎng)。這個(gè)時(shí)候我們就需要停止執(zhí)行動(dòng)畫(huà)了。

首先我們需要改造 start 函數(shù)中的 animation 循環(huán)調(diào)用，在執(zhí)行 animation.run 之前加入一個(gè)條件判斷。這里我們需要判斷如果當(dāng)前時(shí)間是否已經(jīng)大于 animation 中的 duration 動(dòng)畫(huà)時(shí)長(zhǎng)。如果成立動(dòng)畫(huà)就可以停止執(zhí)行了，并且需要把這個(gè) animation 移除 ANIMATIONS 隊(duì)列。

export class Timeline { constructor() { this[ANIMATIONS] = new Set(); } start() { let startTime = Date.now(); this[TICK] = () => { let t = Date.now() - startTime; for (let animation of this[ANIMATIONS]) { if (t > animation.duration) { this[ANIMATIONS].delete(animation); } animation.run(t); } requestAnimationFrame(this[TICK]); }; this[TICK](); } pause() {} resume() {} reset() {} add(animation) { this[ANIMATIONS].add(animation); }}

就這樣我們就加入了停止條件了，并沒(méi)有什么復(fù)雜的邏輯。最后我們?cè)?main.js 中，改一下 Animation 的第一個(gè)參數(shù)。在傳入的對(duì)象中加入一個(gè) setter，這樣我們就可以讓我們的 animation 打印出時(shí)間。這樣方便我們調(diào)試。

tl.add( new Animation( { set a(a) { console.log(a); }, }, ’property’, 0, 100, 1000, null ));

我們看到動(dòng)畫(huà)確實(shí)是停止了，但是還是有一個(gè)問(wèn)題。我們?cè)O(shè)置的 duration 動(dòng)畫(huà)時(shí)長(zhǎng)是到 1000 毫秒，但是這里最后一個(gè)是 1002，明顯超出了我們的動(dòng)畫(huà)時(shí)長(zhǎng)。

所以我們是需要在遇到動(dòng)畫(huà)結(jié)束條件的時(shí)候，需要給 animation 傳入它的 duration（動(dòng)畫(huà)時(shí)長(zhǎng)的值）。這里我們就應(yīng)該這樣寫：

start() { let startTime = Date.now(); this[TICK] = () => { let t = Date.now() - startTime; for (let animation of this[ANIMATIONS]) { let t0 = t; if (t > animation.duration) { this[ANIMATIONS].delete(animation); t0 = animation.duration; } animation.run(t0); } requestAnimationFrame(this[TICK]); }; this[TICK](); } pause() {} resume() {} reset() {} add(animation) { this[ANIMATIONS].add(animation); }}

這樣我們初步的 Timeline 和 Animation 的能力就建立起來(lái)了。

設(shè)計(jì)時(shí)間線的更新

接下來(lái)我們就給這個(gè) Timeline 加入更多的功能，讓我們 Animation 這個(gè)庫(kù)變成真正的可用 。

在 CSS Animation 動(dòng)畫(huà)中，我們知道它有一個(gè) duration（動(dòng)畫(huà)時(shí)長(zhǎng)），其實(shí)同時(shí)還會(huì)有一個(gè) delay（動(dòng)畫(huà)延遲時(shí)間）。

那么首先我們先來(lái)嘗試添加這個(gè)功能。

添加 Delay 屬性支持

在開(kāi)發(fā)當(dāng)中，當(dāng)我們要去給原有的庫(kù)添加功能。我們首先要考慮的是 “找到一個(gè)合理的地方去添加這個(gè)功能”。

其實(shí)直觀的來(lái)說(shuō)，我們第一感覺(jué)是會(huì)想把這個(gè) delay 放入 Animation 類當(dāng)中，畢竟這個(gè)功能屬于動(dòng)畫(huà)的一部分。但是這里有一個(gè)更好的思路，就是把 delay 放到 Timeline 里面。

我們可以這么理解，一個(gè)動(dòng)畫(huà)的開(kāi)始時(shí)間、終止時(shí)間、時(shí)間的控制，都是 Timeline 時(shí)間軸的相關(guān)事務(wù)，其實(shí)與 Animation 關(guān)注的是有區(qū)別的。而 Animation 我覺(jué)得更多是關(guān)注動(dòng)畫(huà)的效果，運(yùn)行等事務(wù)。

所以 delay 放在 Timeline 顯然是更加合適的。

在 Timeline 的 add() 方法中，添加 animation 到隊(duì)列的時(shí)候，給它添加一個(gè) delay。

在添加 delay 這個(gè)邏輯的同時(shí)，我們還可以處理掉一個(gè)問(wèn)題。就是當(dāng)我們?cè)谔砑?animation 動(dòng)畫(huà)到隊(duì)列的時(shí)候，可能 Timeline 已經(jīng)在執(zhí)行了。這樣其實(shí)我們加入動(dòng)畫(huà)的時(shí)候，我們動(dòng)畫(huà)的開(kāi)始時(shí)間是不對(duì)的。

另外還有一個(gè)問(wèn)題，就是在 start 方法中，我們的 t 開(kāi)始時(shí)間和 t0 其實(shí)不一定一致的。因?yàn)槲覀兊?startTime 是可以根據(jù) delay 被手動(dòng)定義的。所以這一個(gè)值也是需要我們重新去編寫一下邏輯的。

好，那么在實(shí)現(xiàn)我們的 delay 功能的同時(shí)，我們就可以把這兩個(gè)因素都涵蓋進(jìn)去。

首先我們來(lái)加入一個(gè) delay 參數(shù)：

export class Animation { constructor(object, property, startValue, endValue, duration, delay, timingFunction) { this.object = object; this.property = property; this.startValue = startValue; this.endValue = endValue; this.duration = duration; this.timingFunction = timingFunction; this.delay = delay; } run(time) { console.log(time); let range = this.endValue - this.startValue; this.object[this.property] = this.startValue + (range * time) / this.duration; }}

這里無(wú)非就是給 constructor 中，加入一個(gè) delay 參數(shù)，并且存儲(chǔ)到類的屬性對(duì)象當(dāng)中。

因?yàn)槊恳粋€(gè)加入 Timeline 隊(duì)列的 Animation 動(dòng)畫(huà)都可能有不一樣的 delay，也就是說(shuō)有不一樣的開(kāi)始動(dòng)畫(huà)的時(shí)間。所以我們需要在 Timeline 類中的 constructor 下建立一個(gè) START_TIMES 存儲(chǔ)空間，把我們所有 Animation 對(duì)應(yīng)的開(kāi)始時(shí)間都存儲(chǔ)起來(lái)。

export class Animation { constructor(object, property, startValue, endValue, duration, delay, timingFunction) { this.object = object; this.property = property; this.startValue = startValue; this.endValue = endValue; this.duration = duration; this.timingFunction = timingFunction; this.delay = delay; } run(time) { console.log(time); let range = this.endValue - this.startValue; this.object[this.property] = this.startValue + (range * time) / this.duration; }}

然后在 Timeline 加入動(dòng)畫(huà)的 add 方法中，把動(dòng)畫(huà)的開(kāi)始時(shí)間加入到 START_TIMES 數(shù)據(jù)里面。如果使用者沒(méi)有給 add 方法傳入 startTime 參數(shù)，那么我們需要給它一個(gè)默認(rèn)值為 Date.now() 。

add(animation, startTime) { if (arguments.length < 2) startTime = Date.now(); this[ANIMATIONS].add(animation); this[START_TIMES].set(animation, startTime);}

接下來(lái)我們就可以去改造開(kāi)始時(shí)間的邏輯：

第一種情況： 如果我們動(dòng)畫(huà)的開(kāi)始時(shí)間是小于，Timeline 的開(kāi)始時(shí)間的，那么我們當(dāng)前動(dòng)畫(huà)的時(shí)間進(jìn)度就是 當(dāng)前時(shí)間 - Timeline 開(kāi)始時(shí)間 第二種情況： 動(dòng)畫(huà)的開(kāi)始時(shí)間大于 Timeline 的開(kāi)始時(shí)間，那么當(dāng)前動(dòng)畫(huà)的時(shí)間進(jìn)度就是 當(dāng)前時(shí)間 - 動(dòng)畫(huà)的開(kāi)始時(shí)間

代碼實(shí)現(xiàn)如下：

start() { let startTime = Date.now(); this[TICK] = () => { let now = Date.now(); for (let animation of this[ANIMATIONS]) { let t; if (this[START_TIMES].get(animation) < startTime) { t = now - startTime; } else { t = now - this[START_TIMES].get(animation); } if (t > animation.duration) { this[ANIMATIONS].delete(animation); t = animation.duration; } animation.run(t); } requestAnimationFrame(this[TICK]); }; this[TICK]();}

這樣 Timline 就支持隨時(shí)給它加入一個(gè) animation 動(dòng)畫(huà)。為了方便我們測(cè)試這個(gè)新的功能，我們把 tl 和 animation 都掛載在 window 上。

這里我們就改動(dòng)一下 main.js 中的代碼：

start() { let startTime = Date.now(); this[TICK] = () => { let now = Date.now(); for (let animation of this[ANIMATIONS]) { let t; if (this[START_TIMES].get(animation) < startTime) { t = now - startTime; } else { t = now - this[START_TIMES].get(animation); } if (t > animation.duration) { this[ANIMATIONS].delete(animation); t = animation.duration; } animation.run(t); } requestAnimationFrame(this[TICK]); }; this[TICK]();}

我們重新 webpack 打包后，就可以在 console 里面執(zhí)行以下命令來(lái)給 Timeline 加入一個(gè)動(dòng)畫(huà)：

tl.add(animation);

好，這個(gè)就是 Timeline 更新的設(shè)計(jì)。但是寫到這里，我們其實(shí)還沒(méi)有去讓 delay 這個(gè)參數(shù)的值去讓動(dòng)畫(huà)被延遲。

其實(shí)這里無(wú)非就在 t 的計(jì)算中，最后減去 animation.delay 即可。

if (this[START_TIMES].get(animation) < startTime) { t = now - startTime - animation.delay;} else { t = now - this[START_TIMES].get(animation) - animation.delay;}

但是我們需要注意一種特殊情況，如果我們 t - 延遲時(shí)間 得出的時(shí)間是小于 0 的話，那么代表我們的動(dòng)畫(huà)還沒(méi)有到達(dá)需要執(zhí)行的時(shí)間，只有 t > 0 才需要執(zhí)行動(dòng)畫(huà)。所以最后在執(zhí)行動(dòng)畫(huà)的邏輯上，加入一個(gè)判斷。

if (t > 0) animation.run(t);

那么接下來(lái)我們來(lái)嘗試實(shí)現(xiàn)它的 pause（暫停） 和 resume（恢復(fù)） 的能力。

實(shí)現(xiàn)暫停和重啟功能

首先我們來(lái)嘗試加入暫停的功能。

實(shí)現(xiàn) Pause

要給 Timeline 實(shí)現(xiàn) Pause 的能力，首先我們就要把 tick 給 cancel 掉。也就是讓我們 Timline 的時(shí)間停止，如果一個(gè)鐘或者手表的秒針不再動(dòng)了，那么時(shí)間自然就停止了。

要取消掉 tick ，首先我們要知道觸發(fā)的這個(gè) tick 在運(yùn)作的是什么。毋庸置疑，就是我們的 requestAnimationFrame。

還記得我們一開(kāi)始聲明的 TICK_HANDLER 嗎？這個(gè)常量就是用來(lái)存儲(chǔ)我們當(dāng)前 tick 的事件的。

所以第一步就是用 TICK_HANDLER 來(lái)儲(chǔ)存我們的 requestAnimationFrame。tick 的啟動(dòng)是在我們 Timeline 類中的 start 方法中啟動(dòng)的，所以這里我們需要改動(dòng) start 方法中的 requestAnimationFrame：

start() {let startTime = Date.now(); this[TICK] = () => { let now = Date.now(); for (let animation of this[ANIMATIONS]) { let t; if (this[START_TIMES].get(animation) < startTime) { t = now - startTime - animation.delay; } else { t = now - this[START_TIMES].get(animation) - animation.delay; } if (t > animation.duration) { this[ANIMATIONS].delete(animation); t = animation.duration; } if (t > 0) animation.run(t); } this[TICK_HANDLER] = requestAnimationFrame(this[TICK]); }; this[TICK]();}

然后我們?cè)?pause() 方法中調(diào)用以下 cancelAnimationFrame 。

pause() { cancelAnimationFrame(this[TICK_HANDLER]);}

Pause（暫停） 還是比較簡(jiǎn)單的，但是 resume（重啟）就比較復(fù)雜了。

實(shí)現(xiàn) Resume

那么實(shí)現(xiàn) resume 的第一步必然就是重新啟動(dòng) tick。但是 tick 中的 t（動(dòng)畫(huà)開(kāi)始時(shí)間）肯定是不對(duì)的，所以我們要想辦法去處理 pause 當(dāng)中的邏輯。

在實(shí)現(xiàn) Resume 之前，我們需要弄一點(diǎn) DOM 的東西來(lái)測(cè)試它。所以我們先建立一個(gè)新的 HTML，在里面建立一個(gè) div 元素。

<!-- 新建立一個(gè) animation.html (放在 dist 文件夾里面) --><style>.box { width: 100px; height: 100px; background-color: aqua;}</style><body> <div class='box'></div> <script src='http://www.lshqa.cn/bcjs/main.js'></script></body>

然后我們也不用 main.js 了，另外建立一個(gè) animation-demo.js 來(lái)實(shí)現(xiàn)我們的動(dòng)畫(huà)調(diào)用。這樣我們就不需要和我們的 carousel 混攪在一起了。

// 在根目錄建立一個(gè) `animation-demo.js`import { Timeline, Animation } from ’./animation.js’;let tl = new Timeline();tl.start();tl.add( new Animation( { set a(a) { console.log(a); }, }, ’property’, 0, 100, 1000, null ));

因?yàn)槲覀冃薷牧宋覀冺?yè)面使用的 js 入口文件。所以這里我們需要去 webpack.config.js 把 entry 改為 animation-demo.js。

module.exports = { entry: ’./animation-demo.js’, mode: ’development’, devServer: { contentBase: ’./dist’, }, module: { rules: [ { test: /.js$/, use: { loader: ’babel-loader’, options: { presets: [’@babel/preset-env’], plugins: [[’@babel/plugin-transform-react-jsx’, { pragma: ’createElement’ }]], }, }, }, ], },};

目前我們的 JavaScript 中是一個(gè)模擬的動(dòng)畫(huà)輸出。接下來(lái)我們嘗試給動(dòng)畫(huà)可以操縱一個(gè)元素的能力。

我們先給元素加一個(gè) id='el'，方便我們?cè)谀_本中獲取到這個(gè)元素。

<div id='el'></div>

然后我們就可以對(duì)這個(gè)原形進(jìn)行動(dòng)畫(huà)的操作了。首先我們需要回到 animation-demo.js，把 Animation 實(shí)例化的第一個(gè)參數(shù)改為 document.querySelector(’#el’).style。

然后第二個(gè)參數(shù)的屬性就改為 'transform'。但是這里要注意，后面的開(kāi)始時(shí)間和結(jié)束時(shí)間是無(wú)法用于 transform 這個(gè)屬性的。

所以我們需要有一個(gè)轉(zhuǎn)換的 template（模版），通過(guò)使用這個(gè)模版來(lái)轉(zhuǎn)換時(shí)間成 transform 對(duì)應(yīng)的值。

這里的 template 值就直接寫成一個(gè)函數(shù)：

v => `translate(${$v}px)`;

最后我們的代碼就是這樣的：

tl.add( new Animation( document.querySelector(’#el’).style, ’transform’, 0, 100, 1000, 0, null, v => `translate(${v}px)` ));

這部分調(diào)整好之后，我們需要去到 animation.js 中去做對(duì)應(yīng)的調(diào)整。

首先是給 Animation 類的 constructor 加入 template 參數(shù)的接收。與其他屬性一樣，在 constructor 中只是做一個(gè)存儲(chǔ)的操作。

然后在 Animation 中的 run 方法，在 this.object[this.property] 這里面的值就應(yīng)該調(diào)用 template 方法來(lái)生成屬性值。而不是之前那樣直接賦值給某一個(gè)屬性了。

export class Animation { constructor( object, property, startValue, endValue, duration, delay, timingFunction, template ) { this.object = object; this.property = property; this.startValue = startValue; this.endValue = endValue; this.duration = duration; this.timingFunction = timingFunction; this.delay = delay; this.template = template; } run(time) { let range = this.endValue - this.startValue; this.object[this.property] = this.template( this.startValue + (range * time) / this.duration ); }}

最后效果如下：

我們發(fā)現(xiàn)，已經(jīng)可以用我們的 Animation 庫(kù)來(lái)控制元素的動(dòng)畫(huà)了。

首先我們來(lái)調(diào)整一下這些動(dòng)畫(huà)的參數(shù)，讓開(kāi)始到結(jié)束位置改為 0 到 500，然后動(dòng)畫(huà)的時(shí)間長(zhǎng)改為 2000 毫秒。這樣的設(shè)置，有利于我們調(diào)試后面的功能。

tl.add( new Animation( document.querySelector(’#el’).style, ’transform’, 0, 500, 2000, 0, null, v => `translate(${v}px)` ));

好，接下來(lái)我們一起去加一個(gè) Pause 按鈕。

<body> <div id='el'></div> <button id='pause-btn'>Pause</button> <script src='http://www.lshqa.cn/bcjs/main.js'></script></body>

然后我們回到 animation-demo.js 里面去綁定這個(gè)元素。并且讓他執(zhí)行我們 Timeline 中的 pause 方法。

document.querySelector(’#pause-btn’).addEventListener( ’click’, () => tl.pause());

我們可以看到，現(xiàn)在 pause 功能是可以的了，但是我們應(yīng)該怎么去讓這個(gè)動(dòng)畫(huà)繼續(xù)播下去呢？也就是要實(shí)現(xiàn)一個(gè) resume 的功能。

在實(shí)現(xiàn)這個(gè) resume 功能的邏輯之前，我們先用同樣的方式建立一個(gè) resume 的按鈕。并且讓這個(gè)按鈕調(diào)用我們 Timeline 里面的 resume() 方法。

<!-- animation.html --><body> <div id='el'></div> <button id='pause-btn'>Pause</button> <button id='resume-btn'>Resume</button> <script src='http://www.lshqa.cn/bcjs/main.js'></script></body>

// animation-demo.js 中加入 resume 按鈕事件綁定。document.querySelector(’#resume-btn’).addEventListener( ’click’, () => tl.resume());

根據(jù)我們上面講到的邏輯，resume 最基本的理解，就是重新啟動(dòng)我們的 tick。那么我們就試試直接在 resume 方法中執(zhí)行 this[TICK]() 會(huì)怎么樣。

resume() { this[TICK]();}

在動(dòng)畫(huà)中，我們可以看到，如果我們直接在 resume 中執(zhí)行 tick 的話，重新開(kāi)始動(dòng)畫(huà)的盒子，并沒(méi)有在原來(lái)暫停的位置開(kāi)始繼續(xù)播放動(dòng)畫(huà)。而是跳到了后面。

很顯然，在我們點(diǎn)擊 resume 的時(shí)候，我們的動(dòng)畫(huà)并沒(méi)有記住我們暫停時(shí)候的位置。所以在我們動(dòng)畫(huà)暫停的同時(shí)，我們需要把 暫停的開(kāi)始時(shí)間和暫停時(shí)間給記錄下來(lái)。

這兩個(gè)變量因?yàn)槭切枰?Animation 類中使用的，所以這里要把它們定義在全局作用域之中。那么我們就用 PAUSE_START 和 PAUSE_TIME 兩個(gè)常量來(lái)保存他們。

const PAUSE_START = Symbol(’pause-start’);const PAUSE_TIME = Symbol(’pause-time’);

接下來(lái)就是在我們暫停的時(shí)候記錄一下當(dāng)時(shí)的時(shí)間：

pause() { this[PAUSE_START] = Date.now(); cancelAnimationFrame(this[TICK_HANDLER]);}

其實(shí)我們記錄暫停的開(kāi)始時(shí)間是為了什么呢？就是為了在我們繼續(xù)播放動(dòng)畫(huà)的時(shí)候，知道我們當(dāng)下距離開(kāi)始暫停的時(shí)候的時(shí)間相差了多久。

剛剛我們?cè)趧?dòng)畫(huà)里看到的現(xiàn)象是什么？就是我們重新啟動(dòng) tick 的時(shí)候，動(dòng)畫(huà)的開(kāi)始時(shí)間使用了當(dāng)前的時(shí)間。這里說(shuō)到的 “當(dāng)前” 時(shí)間，就是 Timeline 已經(jīng)跑到了哪里。顯然這個(gè)開(kāi)始時(shí)間是不正確的。

如果我們?cè)跁和５臅r(shí)候，記錄了那一刻的時(shí)間。然后在點(diǎn)擊 resume 的時(shí)候計(jì)算暫停開(kāi)始到點(diǎn)擊 resume 時(shí)的時(shí)長(zhǎng)。這樣我們就可以用 tick 中的 t（動(dòng)畫(huà)開(kāi)始時(shí)間）- 暫停時(shí)長(zhǎng) = 當(dāng)前動(dòng)畫(huà)應(yīng)該繼續(xù)播放的時(shí)間。

使用這個(gè)算法，我們就可以讓我們的動(dòng)畫(huà)，精確的在原來(lái)暫停的位置繼續(xù)開(kāi)始播放了。

接下來(lái)，我們來(lái)看看代碼的邏輯怎么實(shí)現(xiàn)：

剛剛我們已將在暫停的時(shí)候加入到時(shí)間記錄的邏輯里，接下來(lái)我們要記錄一個(gè)暫停時(shí)長(zhǎng)。在記錄暫停時(shí)長(zhǎng)之前，我們需要一個(gè)地方給這個(gè)值賦予一個(gè)初始值為 0 。

最好的地方就是在 Timeline 開(kāi)始的時(shí)候就賦予這個(gè)默認(rèn)值。我們的 PAUSE_TIME 有了初始值之后，我們?cè)趫?zhí)行 resume 的時(shí)候，就可以用 Date.now() - PAUSE_START 就能得到暫停動(dòng)畫(huà)到現(xiàn)在的總時(shí)長(zhǎng)。

這里有一個(gè)點(diǎn)，需要我們注意的。我們的動(dòng)畫(huà)可能會(huì)出現(xiàn)多次暫停，并且多次的續(xù)播。那么這樣的話，如果我們每次都使用這個(gè)公式計(jì)算出新的暫停時(shí)長(zhǎng)，然后覆蓋 PAUSE_TIME 的值，其實(shí)是不正確的。

因?yàn)槲覀兊?Timeline 一旦開(kāi)啟是不會(huì)停止的，時(shí)間一直都在流逝。如果我們每次都只是計(jì)算當(dāng)前的暫停時(shí)長(zhǎng)，回退的時(shí)間其實(shí)是不對(duì)的。而正確的方式是，每次暫停時(shí)都需要去疊加上一次暫停過(guò)的時(shí)長(zhǎng)。這樣最后回退的時(shí)間才是準(zhǔn)確的。

所以我們賦值給 PAUSE_TIME 的時(shí)候是使用 +=，而不是覆蓋賦值。

最后我們改造好的 Timeline 就是這樣的：

export class Timeline { constructor() { this[ANIMATIONS] = new Set(); this[START_TIMES] = new Map(); } start() { let startTime = Date.now(); this[PAUSE_TIME] = 0; this[TICK] = () => { let now = Date.now(); for (let animation of this[ANIMATIONS]) { let t; if (this[START_TIMES].get(animation) < startTime) { t = now - startTime - animation.delay - this[PAUSE_TIME]; } else { t = now - this[START_TIMES].get(animation) - animation.delay - this[PAUSE_TIME]; } if (t > animation.duration) { this[ANIMATIONS].delete(animation); t = animation.duration; } if (t > 0) animation.run(t); } this[TICK_HANDLER] = requestAnimationFrame(this[TICK]); }; this[TICK](); } pause() { this[PAUSE_START] = Date.now(); cancelAnimationFrame(this[TICK_HANDLER]); } resume() { this[PAUSE_TIME] += Date.now() - this[PAUSE_START]; this[TICK](); } reset() {} add(animation, startTime) { if (arguments.length < 2) startTime = Date.now(); this[ANIMATIONS].add(animation); this[START_TIMES].set(animation, startTime); }}

我們運(yùn)行一下代碼看看是否正確：

這樣我們就完成了 Pause 和 Resume 兩個(gè)功能了。

這里我們就實(shí)現(xiàn)了一個(gè)可用的 Timeline 時(shí)間軸，下一篇文章我們重點(diǎn)去加強(qiáng)動(dòng)畫(huà)庫(kù)的功能。

如果你是一個(gè)開(kāi)發(fā)者，做一個(gè)個(gè)人博客也是你簡(jiǎn)歷上的一個(gè)亮光點(diǎn)。而如果你有一個(gè)超級(jí)炫酷的博客，那就更加是亮上加亮了，簡(jiǎn)直就閃閃發(fā)光。

主題 Github 地址：https://github.com/auroral-ui/hexo-theme-aurora主題使用文檔：https://aurora.tridiamond.tech/zh/

到此這篇關(guān)于使用JavaScript 實(shí)現(xiàn)時(shí)間軸與動(dòng)畫(huà)效果的示例代碼(前端組件化)的文章就介紹到這了,更多相關(guān)js 實(shí)現(xiàn)時(shí)間軸動(dòng)畫(huà)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！