摘要：需要使用，本文未使用，所以暫不考慮。然后，只需要在主函數中調用這些函數，主函數包含方法。每個函數使用關鍵字存儲在常量中。下面是有計時器的主函數。在主函數里調用以上函數注意全局變量。簡而言之，不要在動態上下文的回調函數中使用箭頭函數。

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

在本文中，我將介紹Velocity.js，這是一個快速，高性能的JavaScript動畫引擎。當您瀏覽完所有的demo時，您可以使用Velocity.js創建自己的動畫，并使您的網站更具互動性和用戶友好性。本文所講內容不使用jQuery。

Velocity.js功能概覽

Velocity.js是一個功能強大的庫，它將DOM置于你的指尖！它的動畫涵蓋：

CSS動畫屬性的數值，包括顏色

Transform（變換）

SVG屬性

滾動事件，相對于頁面或頁面中的容器元素

淡入淡出動畫

一般來說，Velocity一次可以操控一個數值屬性值的動畫。
例如，如果要沿X和Y坐標移動元素，則不能使用translate["10px", "15px"]。 相反，應該將translate屬性與其相應的軸結合在一起，如：translateX："10px"，translateY："15px"。
Velocity有一個功能稱為forcefeeding，它可以讓你同時指定兩個值。 將在本文后面介紹這個功能。

配置項

Velocity的配置項在制作動畫時給予了相當的靈活性。

以下是本文的demo中將會看到的配置項：

Durantion：每個動畫持續的時間，測量單位為毫秒。

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

Loop：動畫應該重復的次數。如果將此選項設置為true，它將無限期運行。

Delay：動畫開始之前的延遲時長。

全部的配置項可以在Velocity的官網查看，此處也附上Velocity中文網站。

語法

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

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

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

要在同一個元素上鏈接另一個動畫，只需在之前的velocity后再添加一個：

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

要將動畫同時應用于多個元素，只需將所有元素存儲到變量中，并將Velocity應用于該變量，無需通過循環實現：

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

對于選項值單位，你可以使用px，％，rem，em，vw/vh和deg。如果不添加單位，Velocity將提供適當的單位，通常為px。

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

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

在上面的代碼中，translateX和backgroundColor分別設置了一個數組：

第一個值代表動畫的結束狀態。

第二個值（可選）是特定屬性的easing選項。

第三個值即是指定動畫的起始狀態。

你可以去這里閱讀更詳細的forcefeeding。

您可以使用以下語法停止，暫停，反向以及恢復元素上的所有Velocity調用：

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

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

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

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

根據這些基本指導，你可以開始進入一些實際的例子。

Demo: 掉落的小球

我們從一個由頂部落下的球開始。

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

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

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

你可以使用Velocity的彈簧效果快速實現此功能，通過向velocity的easing選項傳遞一個數組：第一個數組項表示張力，第二個表示摩擦。
高張力值會增加總速度和波峰（默認值為500），較低的摩擦值會增加振動速度（默認值為20）。

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

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

具體實現效果點此看看：
https://codepen.io/mengmengpr...

Demo：按鈕控制的彈簧小球

接下來的這個demo，目標是創建一個動畫序列：

小球從頂端落下

當小球撞擊地面的時候樣式有所擠壓

當小球反彈回來的時候樣式恢復正常

這個動畫會一直循環

你可以通過一個按鈕控制動畫的循環和停止

實現這種動畫需要將各種各樣的片斷連在一起，并使用按鈕來整體控制它們的動畫。

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

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

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

為了保持代碼整潔，可以根據你需要的動畫場景構建一個函數。 然后，只需要在主函數中調用這些函數，主函數包含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箭頭函數的示例。
每個函數使用const關鍵字存儲在常量中。如果需要在整個程序中存儲需要更新的值，請改用let。

可以看到，每個功能都調用了Velocity來讓小球進行特定的移動。注意，要移動球并更改其寬度，代碼沒有分別更改CSS的top和width。相反，它改變了translate和scale的值，從而帶來更好效的動畫效果。

下面是有計時器的主函數。在主函數里調用以上函數：

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()中用這個變量停止動畫。

要使球運動，需要在按鈕的點擊事件中調用launchBall()函數，我們需要把小球這個變量傳遞給函數：

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

注意，在這個點擊函數的回調中用了this關鍵字，這里的this指向被點擊的按鈕。如果使用箭頭函數，this關鍵字將引用全局的window對象。簡而言之，不要在動態上下文的回調函數中使用箭頭函數。

為了讓小球停止，需要一個新的函數:

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

在這里，你通過傳遞animationFrameId來調用cancelAnimationFrame()，animationFrameId包含一個對小球循環動畫的引用。

停止動畫的點擊事件：

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

有趣的是，調用Velocity的stop()方法時用了一個額外的布爾值。這是清除動畫隊列所必需的。如果你不用這個參數，點擊停止按鈕，球不會立即停止動畫。等所有排隊的Velocity調用完成執行，它才會停止動畫。

具體實現效果請看如下demo：
https://codepen.io/mengmengpr...

中文版下已經出爐，點擊這里直達。