摘要：簡明教程中文版上滾動動畫使用，你可以快速實現垂直和水平滾動動畫。下面的顯示了一條微笑魚的圖像。不幸的是，瀏覽器不支持的，并且沒有為此錯誤提供兼容性修補程序。這是為了防止用戶在動畫過程中重復按下按鈕，這將構建動畫隊列。

Velocity.js簡明教程（中文版上）

滾動動畫

使用Velocity.js，你可以快速實現垂直和水平滾動動畫。滾動可以與整個頁面或元素相關。無論哪種方式，都要在即將滾動到視圖中的元素上調用Velocity。

下面的demo使用兩個鏈接：點擊頂部鏈接將容器滾動到最后一部分，單擊底部鏈接將容器滾動到第一部分。

由于兩個鏈接的滾動動作相同，為避免寫重復的代碼，將其組織成一個函數：

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代表要滾動到視圖中的元素，在這個demo中指的是第一個部分或最后一個部分，具體取決于滾動的方向。

滾動的方向存儲在direction中。如果值為"up"，那么offsetDistance的值為-200px，即滾動到相對當前element向上偏移200px的位置，否則offsetDistance的值將為200px。offsetDistance將為Velocity的offset屬性存儲一個值，可以將目標滾動位置偏移指定的量。

因為demo中的滾動不是相對于瀏覽器窗口，而是容器元素，上面的代碼將這個信息存儲在container參數中。因為這樣，將容器元素CSS的position屬性設置為relative，absolute或fixed不起作用。

最后，通過調用上面的函數來處理相關鏈接上的點擊事件。 例如，要滾動到最后一部分，您的事件處理函數可能如下所示：

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

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

SVG動畫

Velocity可以用一個number值對任何屬性進行動畫處理，包括應用于SVG的CSS屬性，例如fill，stroke，stroke-width，stroke-color，rx，ry等。

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

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

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

在編寫任何代碼之前，請確保你的SVG圖像可以使用Velocity.js進行動畫。

將class或id添加到即將動畫的SVG。

如果要將某些元素作為一個整體進行動畫，請將元素包含在標簽中

簡化和優化你的圖形。

下面是移動魚的代碼：

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

分析上面的代碼：

調用Velocity，并使用forcefeeding設置translateX屬性的值，該值決定了元素的最終和初始位置。當稍后調用此函數時，提供的elem參數將是對SVG魚的引用。

只有在整個動畫結束之后，才能利用Velocity.js內置的complete()方法來激活“播放”按鈕。這是為了防止用戶在動畫過程中重復按下按鈕，這將構建動畫隊列。

動畫完成后，播放按鈕再次激活，用戶可以選擇重播動畫。此功能通過bool參數實現。

我們還使用了一個ES6特性功能：默認參數，即代碼中的bool = false。當你調用moveFish()時，你可以選擇不輸入相應的參數，因為設置的默認值將自動應用?；蛘?，你可以通過顯式輸入參數來更改默認值。

要實現不同的移動動畫，在主函數內使用不同的參數多次調用moveFish()，如下所示：

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

注意你調用moveFish()的不同方式：第一次沒有第五個參數，第二次第五個參數的值為true。在第一種情況下，第五個參數的值是您在構建moveFish()函數時提供的默認參數。

最后，只需在開始按鈕的click事件上調用上面的play()函數即可。

可以試試做出來的效果哦：
https://codepen.io/mengmengpr...

Velocity UI Pack

我們稱之為UI包。你可以用它來補充Velocity.js，這是一個大大提高了動畫工作流程的插件。

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

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

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

這是Velocity隱藏表單的方法：

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

第一個參數是要操作的元素，在這個demo中即為表單。

第二個參數是UI Pack中的一個預定義特效。

第三個參數是動畫時長。

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

更多資料

這里還有一些學習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

來自譯者：

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