摘要：需要使用，本文未使用，所以暫不考慮。然后，只需要在主函數(shù)中調(diào)用這些函數(shù)，主函數(shù)包含方法。每個(gè)函數(shù)使用關(guān)鍵字存儲(chǔ)在常量中。下面是有計(jì)時(shí)器的主函數(shù)。在主函數(shù)里調(diào)用以上函數(shù)注意全局變量。簡(jiǎn)而言之，不要在動(dòng)態(tài)上下文的回調(diào)函數(shù)中使用箭頭函數(shù)。

本文翻譯自https://www.sitepoint.com/how...

在本文中，我將介紹Velocity.js，這是一個(gè)快速，高性能的JavaScript動(dòng)畫引擎。當(dāng)您瀏覽完所有的demo時(shí)，您可以使用Velocity.js創(chuàng)建自己的動(dòng)畫，并使您的網(wǎng)站更具互動(dòng)性和用戶友好性。本文所講內(nèi)容不使用jQuery。

Velocity.js功能概覽

Velocity.js是一個(gè)功能強(qiáng)大的庫(kù)，它將DOM置于你的指尖！它的動(dòng)畫涵蓋：

CSS動(dòng)畫屬性的數(shù)值，包括顏色

Transform（變換）

SVG屬性

滾動(dòng)事件，相對(duì)于頁(yè)面或頁(yè)面中的容器元素

淡入淡出動(dòng)畫

一般來(lái)說(shuō)，Velocity一次可以操控一個(gè)數(shù)值屬性值的動(dòng)畫。
例如，如果要沿X和Y坐標(biāo)移動(dòng)元素，則不能使用translate["10px", "15px"]。 相反，應(yīng)該將translate屬性與其相應(yīng)的軸結(jié)合在一起，如：translateX："10px"，translateY："15px"。
Velocity有一個(gè)功能稱為forcefeeding，它可以讓你同時(shí)指定兩個(gè)值。 將在本文后面介紹這個(gè)功能。

配置項(xiàng)

Velocity的配置項(xiàng)在制作動(dòng)畫時(shí)給予了相當(dāng)?shù)撵`活性。

以下是本文的demo中將會(huì)看到的配置項(xiàng)：

Durantion：每個(gè)動(dòng)畫持續(xù)的時(shí)間，測(cè)量單位為毫秒。

Easing：Velocity支持大多數(shù)的easing類型。ease，ease-in，ease-out, ease-in-out，貝塞爾曲線，甚至是很酷的物理彈簧效果。 可以在這個(gè)demo中查看彈簧效果：https://codepen.io/mengmengpr...。

Loop：動(dòng)畫應(yīng)該重復(fù)的次數(shù)。如果將此選項(xiàng)設(shè)置為true，它將無(wú)限期運(yùn)行。

Delay：動(dòng)畫開始之前的延遲時(shí)長(zhǎng)。

全部的配置項(xiàng)可以在Velocity的官網(wǎng)查看，此處也附上Velocity中文網(wǎng)站。

語(yǔ)法

如果你使用jQuery，Velocity.js可以輕松上手。 事實(shí)上，Velocity與jQuery具有相同的API：
下載Velocity，引入你的項(xiàng)目，然后將$.animate()替換成$.velocity()

但是，你也可以不用jQuery來(lái)使用Velocity，并且本文中的demo也將不使用jQuery。語(yǔ)法與使用jQuery的方式有所不同：

Velocity(element, {property: value}, {option: optionValue});

要在同一個(gè)元素上鏈接另一個(gè)動(dòng)畫，只需在之前的velocity后再添加一個(gè)：

Velocity(element1, {property: value}, {option: optionValue});
Velocity(element1, {property: value}, {option: optionValue});

要將動(dòng)畫同時(shí)應(yīng)用于多個(gè)元素，只需將所有元素存儲(chǔ)到變量中，并將Velocity應(yīng)用于該變量，無(wú)需通過(guò)循環(huán)實(shí)現(xiàn)：

const elements = document.querySelectorAll("
");
Velocity(elements, {property: value}, {option: optionValue});

對(duì)于選項(xiàng)值單位，你可以使用px，％，rem，em，vw/vh和deg。如果不添加單位，Velocity將提供適當(dāng)?shù)膯挝唬ǔ閜x。

這個(gè)功能可以讓你不用Velocity.js查詢DOM以獲取元素的初始值，而使用以下語(yǔ)法自行設(shè)置：

Velocity(element, {
  translateX: [endValue, startValue],
  backgroundColor: [endValue, easing, startValue]
}, {
  //options here
});

在上面的代碼中，translateX和backgroundColor分別設(shè)置了一個(gè)數(shù)組：

第一個(gè)值代表動(dòng)畫的結(jié)束狀態(tài)。

第二個(gè)值（可選）是特定屬性的easing選項(xiàng)。

第三個(gè)值即是指定動(dòng)畫的起始狀態(tài)。

你可以去這里閱讀更詳細(xì)的forcefeeding。

您可以使用以下語(yǔ)法停止，暫停，反向以及恢復(fù)元素上的所有Velocity調(diào)用：

停止：Velocity(elem, "stop")；

暫停：Velocity(elem, "pause")；

反向：Velocity(elem, "reverse")；

恢復(fù)：Velocity(elem, "resume")；

根據(jù)這些基本指導(dǎo)，你可以開始進(jìn)入一些實(shí)際的例子。

Demo: 掉落的小球

我們從一個(gè)由頂部落下的球開始。

const ball = document.querySelector(".ball");

Velocity(ball, {
    translateY: "200px"
}, {
    easing: [2000, 15],
    durantion: 3000
});

上面的代碼選擇了一個(gè)class為ball的HTML元素，它在Y軸上移動(dòng)200px，持續(xù)3秒。隨著小球的下落不斷加速，并在最后得到彈性。

你可以使用Velocity的彈簧效果快速實(shí)現(xiàn)此功能，通過(guò)向velocity的easing選項(xiàng)傳遞一個(gè)數(shù)組：第一個(gè)數(shù)組項(xiàng)表示張力，第二個(gè)表示摩擦。
高張力值會(huì)增加總速度和波峰（默認(rèn)值為500），較低的摩擦值會(huì)增加振動(dòng)速度（默認(rèn)值為20）。

為了好玩，我們讓球的背景顏色從藍(lán)色的初始值變成深色。 要設(shè)置背景顏色的初始值，您需要使用Velocity.js的forcefeeding：

Velocity(ball, {
    translateY: "130px",
    backgroundColor: ["#222", "#043d99"]
}, {
    easing: [2000, 15],
    duration: "3000"
});

具體實(shí)現(xiàn)效果點(diǎn)此看看：
https://codepen.io/mengmengpr...

Demo：按鈕控制的彈簧小球

接下來(lái)的這個(gè)demo，目標(biāo)是創(chuàng)建一個(gè)動(dòng)畫序列：

小球從頂端落下

當(dāng)小球撞擊地面的時(shí)候樣式有所擠壓

當(dāng)小球反彈回來(lái)的時(shí)候樣式恢復(fù)正常

這個(gè)動(dòng)畫會(huì)一直循環(huán)

你可以通過(guò)一個(gè)按鈕控制動(dòng)畫的循環(huán)和停止

實(shí)現(xiàn)這種動(dòng)畫需要將各種各樣的片斷連在一起，并使用按鈕來(lái)整體控制它們的動(dòng)畫。

理想的工具將是一個(gè)時(shí)間表，它將涵蓋所有的片斷，并可以控制所有片斷的開始和結(jié)束。Velocity.js沒有原生的時(shí)間軸，但有幾個(gè)解決方案：

使用Tweene - 這是一個(gè)動(dòng)畫代理，是一個(gè)可以使用很多Javascript動(dòng)畫庫(kù)的包裝器，包括Velocity.js。Tweene需要Velocity使用jQuery，本文未使用jQuery，所以暫不考慮。

JavaScript的requestAnimationFrame()。這是一個(gè)原生API，用于在瀏覽器環(huán)境中運(yùn)行任何平滑，高效的動(dòng)畫，例如CSS，畫布等。目前除了Opera Mini外，所有主流瀏覽器都支持。

為了保持代碼整潔，可以根據(jù)你需要的動(dòng)畫場(chǎng)景構(gòu)建一個(gè)函數(shù)。 然后，只需要在主函數(shù)中調(diào)用這些函數(shù)，主函數(shù)包含requestAnimationFrame()方法。

const changeBallPosition = (elem, propVal, easingVal, durationVal) => {
    Velocity(elem, {
        translateY: propVal
    }, {
        easing: easingVal, 
        duration: durationVal
    });
};

const changeBallWidth = (elem, propVal, easingVal, durationVal) => {
    Velocity(elem, {
        scaleX: propVal
    }, {
        easing: easingVal,
        duration: durationVal
    });
};

上面的代碼片段包含了如何編寫ES6箭頭函數(shù)的示例。
每個(gè)函數(shù)使用const關(guān)鍵字存儲(chǔ)在常量中。如果需要在整個(gè)程序中存儲(chǔ)需要更新的值，請(qǐng)改用let。

可以看到，每個(gè)功能都調(diào)用了Velocity來(lái)讓小球進(jìn)行特定的移動(dòng)。注意，要移動(dòng)球并更改其寬度，代碼沒有分別更改CSS的top和width。相反，它改變了translate和scale的值，從而帶來(lái)更好效的動(dòng)畫效果。

下面是有計(jì)時(shí)器的主函數(shù)。在主函數(shù)里調(diào)用以上函數(shù)：

let animationFrameId;
const launchBall = (elem) => {
    changeBallPosition(elem, "130px", "easeInQuart", 300);
    changeBallWidth(elem, 1.2, "linear", 50);
    changeBallWidth(elem, 1, "linear", 50);
    changeBallPosition(elem, "-10px", "easeOutQuart", 300);
    changeBallWidth(elem, 1, "linear", 50);
    animationFrameId = requestAnimationFrame(() => {
        launchBall(elem);
    });
};

注意全局變量animationFrameId。后面將需要在cancelAnimationFrame()中用這個(gè)變量停止動(dòng)畫。

要使球運(yùn)動(dòng)，需要在按鈕的點(diǎn)擊事件中調(diào)用launchBall()函數(shù)，我們需要把小球這個(gè)變量傳遞給函數(shù)：

btnPlay.addEventListener("click", function () {
    launchBall(ball);
    this.enabled = true;
    btnStop.disabled = false;
});

注意，在這個(gè)點(diǎn)擊函數(shù)的回調(diào)中用了this關(guān)鍵字，這里的this指向被點(diǎn)擊的按鈕。如果使用箭頭函數(shù)，this關(guān)鍵字將引用全局的window對(duì)象。簡(jiǎn)而言之，不要在動(dòng)態(tài)上下文的回調(diào)函數(shù)中使用箭頭函數(shù)。

為了讓小球停止，需要一個(gè)新的函數(shù):

const removeAnimFrame = () => {
    if (animationFrameId) {
        cancelAnimationFrame(animationFrameID);
    }
}

在這里，你通過(guò)傳遞animationFrameId來(lái)調(diào)用cancelAnimationFrame()，animationFrameId包含一個(gè)對(duì)小球循環(huán)動(dòng)畫的引用。

停止動(dòng)畫的點(diǎn)擊事件：

btnStop.addEventListener("click", function () {
    removeAnimFrame();
    Velocity(ball, "stop", true);
    this.disabled = true;
    btnPlay.disabled = false;
});

有趣的是，調(diào)用Velocity的stop()方法時(shí)用了一個(gè)額外的布爾值。這是清除動(dòng)畫隊(duì)列所必需的。如果你不用這個(gè)參數(shù)，點(diǎn)擊停止按鈕，球不會(huì)立即停止動(dòng)畫。等所有排隊(duì)的Velocity調(diào)用完成執(zhí)行，它才會(huì)停止動(dòng)畫。

具體實(shí)現(xiàn)效果請(qǐng)看如下demo：
https://codepen.io/mengmengpr...

中文版下已經(jīng)出爐，點(diǎn)擊這里直達(dá)。