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

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圖像準備動畫

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

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

• 若是要將某些元素做爲一個總體進行動畫，請將元素包含在<g></g>標籤中

• 簡化和優化你的圖形。

使用Velocity.js

下面是移動魚的代碼：

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。
昨天發佈的上半部分被官博分享了，很開心，之後會繼續分享高質量文章的。喜歡的話能夠關注我或者個人微博，謝謝支持！