一個高效能js動畫庫velocity.js簡介

一、為什麼是velocity不是jquery

時下，如何快速製作js動效，許多人可能會首先想到使用jquery。jquery的就是如此流行。使用jquery製作的各種動效在網路上也非常豐富。jquery的優點不言而喻，簡單易用，高效開發。但要知道jquery動畫效能並不是最優的。因為jquery想要實現的目標太多，動畫效能上就不可避免做出妥協。因此要製作高效能js動畫，可能不得不放棄jquery，轉而使用原生js製作動畫。那有沒有一種js高效能動效庫，既像jquery一樣簡單易用，動畫又高效能？這就是velocity.js動畫庫了。

二、velocity的優點

1、Velocity 是一個簡單易用、高效能、功能豐富的輕量級JS動畫庫。它能和 jQuery 完美協作，並和$.animate()有相同的 API，但它不依賴 jQuery，可單獨使用。 Velocity 不僅包含了 $.animate() 的全部功能， 還擁有：顏色動畫、轉換動畫(transforms)、迴圈、 緩動、SVG 動畫、和 滾動動畫 等特色功能。2.也有幾十種類似animate.css的預定義動畫api3.支援自定義動效，拼裝佇列動效等等4.動畫回撥 比如 Begin & Complete & Progress 回撥函式

三、velocity的使用

1、velocity的引入

可以使用標籤引入

< src="../lib/velocity.min.js" data-ke-src="../lib/velocity.min.js">

也可以透過npm安裝

npm install velocity-animate

2、Velocity語法

Velocity使用和jquery相同的語法。換句話說，如果你熟悉jquery的animate()函式，那麼你只需把animate()語法套用在velocity()就行。

Jquery：

$(選擇器).animate();

Velocity：

$(選擇器).velocity();

Velocity引數用法

$element.velocity({

width: "500px", // 動畫屬性 寬度到 "500px" 的動畫

property2: value2 // 屬性示例

}, {

/* Velocity 動畫配置項的預設值 */

duration: 400, // 動畫執行時間

easing: "swing", // 緩動效果

queue: "", // 佇列

begin: undefined, // 動畫開始時的回撥函式

progress: undefined, // 動畫執行中的回撥函式（該函式會隨著動畫執行被不斷觸發）

complete: undefined, // 動畫結束時的回撥函式

display: undefined, // 動畫結束時設定元素的 css display 屬性

visibility: undefined, // 動畫結束時設定元素的 css visibility 屬性

loop: false, // 迴圈

delay: false, // 延遲

mobileHA: true // 移動端硬體加速（預設開啟）

});

簡單點就是：

$element.velocity(

{css引數列表},

{動畫配置項}

)

其他寫法：

$element.velocity({css引數列表 }, dalay延遲,easing緩動效果, function回撥函式);

示例：

$element.velocity({ width: "50px" }, 1000);

$element.velocity({ width: "50px" }, 1000, "swing");

$element.velocity({ width: "50px" }, "swing");

$element.velocity({ width: "50px" }, 1000, function() {});

這裡特別講解一個非常有趣的用法，就是動畫效果原路返回。如果我們做了一個比較炫酷或者比較複雜的動畫效果，然後需要製作動畫原路返回的效果，只需如此：

$element.velocity("reverse")；

Velocity作者做出的說明是，velocity會自動記錄下動畫執行的路徑、時間以及效果等，然後會按動畫原效果返回。也就是說，不管你動畫效果設計得再複雜，如果要動畫原路返回，只需一句程式碼，是不是很酷?繼續關注，更多技術文。