摘要：簡(jiǎn)明教程中文版上滾動(dòng)動(dòng)畫(huà)使用，你可以快速實(shí)現(xiàn)垂直和水平滾動(dòng)動(dòng)畫(huà)。下面的顯示了一條微笑魚(yú)的圖像。不幸的是，瀏覽器不支持的，并且沒(méi)有為此錯(cuò)誤提供兼容性修補(bǔ)程序。這是為了防止用戶(hù)在動(dòng)畫(huà)過(guò)程中重復(fù)按下按鈕，這將構(gòu)建動(dòng)畫(huà)隊(duì)列。

Velocity.js簡(jiǎn)明教程（中文版上）

滾動(dòng)動(dòng)畫(huà)

使用Velocity.js，你可以快速實(shí)現(xiàn)垂直和水平滾動(dòng)動(dòng)畫(huà)。滾動(dòng)可以與整個(gè)頁(yè)面或元素相關(guān)。無(wú)論哪種方式，都要在即將滾動(dòng)到視圖中的元素上調(diào)用Velocity。

下面的demo使用兩個(gè)鏈接：點(diǎn)擊頂部鏈接將容器滾動(dòng)到最后一部分，單擊底部鏈接將容器滾動(dòng)到第一部分。

由于兩個(gè)鏈接的滾動(dòng)動(dòng)作相同，為避免寫(xiě)重復(fù)的代碼，將其組織成一個(gè)函數(shù)：

const scrolling = (element, container, direction) => {
    let offsetDistance = 0;
    direction === "up" ? offsetDistance = -200 : 200;
    Velocity(element, "scroll", {
        container: container,
        duration: 500,
        offset: offsetDistance,
        easing: "ease-out"
    });
};

element代表要滾動(dòng)到視圖中的元素，在這個(gè)demo中指的是第一個(gè)部分或最后一個(gè)部分，具體取決于滾動(dòng)的方向。

滾動(dòng)的方向存儲(chǔ)在direction中。如果值為"up"，那么offsetDistance的值為-200px，即滾動(dòng)到相對(duì)當(dāng)前element向上偏移200px的位置，否則offsetDistance的值將為200px。offsetDistance將為Velocity的offset屬性存儲(chǔ)一個(gè)值，可以將目標(biāo)滾動(dòng)位置偏移指定的量。

因?yàn)閐emo中的滾動(dòng)不是相對(duì)于瀏覽器窗口，而是容器元素，上面的代碼將這個(gè)信息存儲(chǔ)在container參數(shù)中。因?yàn)檫@樣，將容器元素CSS的position屬性設(shè)置為relative，absolute或fixed不起作用。

最后，通過(guò)調(diào)用上面的函數(shù)來(lái)處理相關(guān)鏈接上的點(diǎn)擊事件。 例如，要滾動(dòng)到最后一部分，您的事件處理函數(shù)可能如下所示：

Link.addEventListener("click", (e) => {
    e.preventDefault();
    scrolling(lastSection, scrollerContainer, "down");
});

具體實(shí)現(xiàn)效果如下：
https://codepen.io/mengmengpr...

SVG動(dòng)畫(huà)

Velocity可以用一個(gè)number值對(duì)任何屬性進(jìn)行動(dòng)畫(huà)處理，包括應(yīng)用于SVG的CSS屬性，例如fill，stroke，stroke-width，stroke-color，rx，ry等。

有關(guān)Velocity可以操控的SVG屬性完整列表，可以去這里查看。

下面的demo顯示了一條微笑魚(yú)的SVG圖像。氣泡淡入淡出，眼睛每隔幾秒鐘閃爍一次。如果單擊播放按鈕，魚(yú)將移動(dòng)到其容器的左側(cè)，消失，返回并轉(zhuǎn)動(dòng)。

Bug alert：不幸的是，IE/Edge瀏覽器不支持CSS的transform，并且Velocity沒(méi)有為此錯(cuò)誤提供兼容性修補(bǔ)程序。 因此，demo在這些瀏覽器中無(wú)法正常工作。

在編寫(xiě)任何代碼之前，請(qǐng)確保你的SVG圖像可以使用Velocity.js進(jìn)行動(dòng)畫(huà)。

將class或id添加到即將動(dòng)畫(huà)的SVG。

如果要將某些元素作為一個(gè)整體進(jìn)行動(dòng)畫(huà)，請(qǐng)將元素包含在標(biāo)簽中

簡(jiǎn)化和優(yōu)化你的圖形。

下面是移動(dòng)魚(yú)的代碼：

const moveFish = (elem, moveBy, initialPos, btn, bool = false) => {
    Velocity(elem, {
        translateX: [moveBy, initialPos]
    }, {
        duration: 5000,
        easing: "linear",
        complete: () => {
            if (bool) {
                btn.disable = false;
            }
        }
    });
};

分析上面的代碼：

調(diào)用Velocity，并使用forcefeeding設(shè)置translateX屬性的值，該值決定了元素的最終和初始位置。當(dāng)稍后調(diào)用此函數(shù)時(shí)，提供的elem參數(shù)將是對(duì)SVG魚(yú)的引用。

只有在整個(gè)動(dòng)畫(huà)結(jié)束之后，才能利用Velocity.js內(nèi)置的complete()方法來(lái)激活“播放”按鈕。這是為了防止用戶(hù)在動(dòng)畫(huà)過(guò)程中重復(fù)按下按鈕，這將構(gòu)建動(dòng)畫(huà)隊(duì)列。

動(dòng)畫(huà)完成后，播放按鈕再次激活，用戶(hù)可以選擇重播動(dòng)畫(huà)。此功能通過(guò)bool參數(shù)實(shí)現(xiàn)。

我們還使用了一個(gè)ES6特性功能：默認(rèn)參數(shù)，即代碼中的bool = false。當(dāng)你調(diào)用moveFish()時(shí)，你可以選擇不輸入相應(yīng)的參數(shù)，因?yàn)樵O(shè)置的默認(rèn)值將自動(dòng)應(yīng)用。或者，你可以通過(guò)顯式輸入?yún)?shù)來(lái)更改默認(rèn)值。

要實(shí)現(xiàn)不同的移動(dòng)動(dòng)畫(huà)，在主函數(shù)內(nèi)使用不同的參數(shù)多次調(diào)用moveFish()，如下所示：

const play = () => { 
  moveFish(fish, "-1000", 0, btnPlay);
  moveFish(fish, 0, "-1000", btnPlay, true);
  //可以繼續(xù)調(diào)用
};

注意你調(diào)用moveFish()的不同方式：第一次沒(méi)有第五個(gè)參數(shù)，第二次第五個(gè)參數(shù)的值為true。在第一種情況下，第五個(gè)參數(shù)的值是您在構(gòu)建moveFish()函數(shù)時(shí)提供的默認(rèn)參數(shù)。

最后，只需在開(kāi)始按鈕的click事件上調(diào)用上面的play()函數(shù)即可。

可以試試做出來(lái)的效果哦：
https://codepen.io/mengmengpr...

Velocity UI Pack

我們稱(chēng)之為UI包。你可以用它來(lái)補(bǔ)充Velocity.js，這是一個(gè)大大提高了動(dòng)畫(huà)工作流程的插件。

你需要下載UI Pack并且在引用Velocity.js之后引用它。

你可以在UI Pack文檔中看到可以獲得的所有效果的列表。此外，你還可以注冊(cè)自己的自定義效果。

在下面的demo中，我使用UI Pack在提交后隱藏表單，并向用戶(hù)顯示成功圖標(biāo)。

這是Velocity隱藏表單的方法：

Velocity(formEl, "transition.bounceUpOut", 500);

第一個(gè)參數(shù)是要操作的元素，在這個(gè)demo中即為表單。

第二個(gè)參數(shù)是UI Pack中的一個(gè)預(yù)定義特效。

第三個(gè)參數(shù)是動(dòng)畫(huà)時(shí)長(zhǎng)。

下面是具體的效果：
https://codepen.io/mengmengpr...

更多資料

這里還有一些學(xué)習(xí)Velocity.js的資料：

Incredibly Fast UI Animation Using Velocity.js

Faster UI Animations With Velocity.js

Improving UI Animation Workflow with Velocity.js

Velocity.js: The Official Collection

來(lái)自譯者：

這篇文章大致介紹了Velocity.js，在閱讀完后推薦先大致瀏覽一遍官方文檔，然后再自己動(dòng)手寫(xiě)demo。
昨天發(fā)布的上半部分被官博分享了，很開(kāi)心，以后會(huì)繼續(xù)分享高質(zhì)量文章的。喜歡的話可以關(guān)注我或者我的微博，謝謝支持！