Velocity

提示：此條目的主題不是速度或雙威偉樂城。

Velocity是一個跨平台的JavaScript庫，旨在簡化網站動畫的客戶端腳本。 Velocity是自由、開源軟件，用MIT許可證授權。 它是最流行的開源Web動畫引擎。

Velocity

原作者	Julian Shapiro
當前版本	1.4.3（2017年2月16日）
源代碼庫	github.com/julianshapiro/velocity
編程語言	JavaScript
操作系統	跨平台
平台	See Browser support
類型	JavaScript函式庫、動畫
許可協議	MIT
網站	velocityjs.org

Velocity的語法旨在讓為HTML和SVG元素創建複雜動畫變得更加容易。 Velocity除了在工作流程有上優勢外，還提供了與基於CSS的動畫相媲美的動畫性能。 Velocity通過維護動畫狀態的內部緩存並最小化「布局抖動」來實現其性能，這是網頁瀏覽器在以較快速度進行視覺更新時所經歷的不良行為。 總而言之，其工作流程和性能優勢使得Velocity能夠用於複雜的動畫編程，這些編程可以集成到網絡和移動應用程序中。 其廣泛的瀏覽器和設備支持使其成為必須支持低功耗設備的大型企業分布的理想選擇。

Velocity被用於驅動許多著名網站的用戶界面，包括優步、三星、WhatsApp、Tumblr、HTC、馬自達和Microsoft Windows。 它是代碼託管服務GitHub上最受歡迎的項目之一。 2015年，Velocity被The Net Awards提名為「年度開源項目」。

功能

Velocity的功能包括：

• 瀏覽器窗口和元素滾動
• 獨立於jQuery框架
• 動畫逆轉（撤消前一個動畫）和動畫循環
• SVG元素動畫
• RGB與hex顏色動畫
• CSS transform屬性動畫
• 通過Velocity的UI Pack預先創建動畫效果
• 彈簧釋放類型的基於物理學的運動
• 集成Future與promise

瀏覽器支持

Velocity支持所有主流桌面瀏覽器（Firefox、Google Chrome、Safari）以及iOS和Android移動操作系統。它可以支持到Internet Explorer 8和Android 2.3。

用法

引入Velocity

Velocity庫是一個包含所有核心功能的JavaScript文件。它可以通過鏈接到本地副本或從公共服務器（如MaxCDN的jsDelivr和Cloudflare的CDNjs （頁面存檔備份，存於網際網路檔案館））提供的許多副本中的一個包含在網頁中。

<script src="velocity.min.js"></script>

直接從內容交付網絡中包含Velocity也是可能的。（以//開頭的鏈接是協議相對URL）

<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>

使用方式

Velocity有兩種使用方式：

• $.Velocity函數，這是一個從jQuery根對象擴展的工廠方法。此方法使用原始DOM元素而不是jQuery封裝的元素進行動畫處理。這是在沒有jQuery的情況下使用Velocity的方式。
• $element.velocity()函數。當頁面上有jQuery時，用這種方式來給jQuery元素添加元素。

Velocity中的動畫調用包括提供需要附加動畫的元素、一個指定哪些CSS屬性需要附加動畫的「動畫屬性映射」，還有一個可選的「options對象」來指定動畫的設置（例如「duration」）。

參數

Velocity接受一個或多個參數。第一個參數可以是預定義的Velocity命令的名稱（scroll或reverse），也可以是要進行動畫的CSS屬性的對象：

// Animate an element's width to 100px and its left property to 200px
$element.velocity({ width: "100px", left: "200px" });

第二個參數是可選的，是一個對象。它用於指定動畫選項，如持續時間（duration）、緩動（easing）和完成（complete）（動畫完成後執行的任意函數）：

// Animate an element's width to 100px over a 1000ms duration after pausing for a 100s delay.
$element.velocity({ width: "100px" }, { duration: 1000, delay: 100 });

鏈接

要用Velocity創建一系列連續的動畫，就要讓目標jQuery元素對象一個接一個地調用velocity()：

$element
    .velocity({ height: 300 }, { duration: 1000 })
    // Continue on to this animation once the previous one has completed
    .velocity({ top: 200 }, { duration: 600 })
   // And once more...
    .velocity({ opacity: 0 }, { duration: 200 });

滾動和逆轉

滾動的話，就要在第一個參數傳scroll — 代替典型的CSS屬性映射：

// Scroll with a duration of 750ms
$element.velocity("scroll", { duration: 750 });

瀏覽器隨後會向下滾動到Velocity被調用的元素的頂部邊緣。

動畫逆轉，就要在第一個參數傳reverse：

// Animate an element's height
$element.velocity({ height: "500px" }, { duration: 500 });
// Reverse the previous animation; animate back to the element's original height using the previous duration
$element.velocity("reverse");

Velocity的reverse命令默認是針對之前一個調用的。如果傳新的參數的話，就會擴展前一個動畫（改變其option）：

$element.velocity({ height: "500px" }, { duration: 500 });
// Extend the previous reverse call's options object with a new duration value
$element.velocity("reverse", { duration: 1000 });

歷史

Velocity由Julian Shapiro開發，旨在解決缺乏高性能和面向設計者的JavaScript動畫庫的問題。 Stripe是一家頗受歡迎的以Web開發人員為中心的互聯網技術公司，為Shapiro提供經濟上的資助，讓他可以繼續專職開發Velocity。

Velocity內部動畫引擎性能較高，對重新推廣基於JavaScript的網絡動畫起到了積極作用；這個領域在之前由於基於CSS的動畫的出現而一度失去人們的關注，因為基於CSS的動畫在速度上超越了對動畫缺乏關注的以前一些JavaScript庫。

2014年9月，Shapiro發布了Velocity Motion Designer，這是一個在現成的網站上設計動畫的工具，可以實時導出生成的動畫代碼，以便在IDE中隨後使用。 2015年3月，Peachpit發布了Shapiro的《使用JavaScript的網頁動畫》（Web Animation using JavaScript）一書，該書教導了使用Velocity開發網頁動畫的入門和高級原則。 截至2015年中期，Velocity繼續由Shapiro專職開發和維護。

Velocity除了在專業企業環境中的使用外，它還廣泛用於Web開發實驗和初學者練習。

參見

• D3.js
• Raphaël
• Three.js
• jQuery

延伸閱讀

• Animating without jQuery （頁面存檔備份，存於網際網路檔案館）
• How to use Velocity to easily add animations （頁面存檔備份，存於網際網路檔案館）
• Fast UI animation using Velocity.js （頁面存檔備份，存於網際網路檔案館）

外部連結

• 官方網站
• Velocity demo gallery