Velocity

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

Velocity

原作者	Julian Shapiro
目前版本	1.2.2 (2014年5月6日；穩定版本) 1.2.3 (2015年9月26日；穩定版本) 1.3.0 (2016年10月20日；穩定版本) 1.3.1 (2016年9月21日；穩定版本) 1.3.2 (2016年11月21日；穩定版本) 1.4.0 (2016年12月4日；穩定版本) 1.4.1 (2016年12月17日) 1.4.2 (2017年1月30日；穩定版本) 1.4.3 (2017年2月16日；穩定版本) 1.5.0 (2017年3月18日；穩定版本) 1.5.1 (2018年1月6日；穩定版本) 1.5.2 (2018年7月31日；穩定版本) 0.0.3 (2014年5月6日；穩定版本) 0.0.4 (2014年5月6日；穩定版本) 0.0.5 (2014年5月8日；穩定版本) 0.0.51 (2014年5月9日；穩定版本) 0.0.52 (2014年5月9日；穩定版本) 0.0.53 (2014年5月9日；穩定版本) 0.0.54 (2014年5月9日；穩定版本) 0.0.55 (2014年5月11日；穩定版本) 0.0.9 (2014年5月12日；穩定版本) 0.0.10 (2014年5月14日；穩定版本) 0.0.11 (2014年5月18日；穩定版本) 0.0.12 (2014年5月19日；穩定版本) 0.0.13 (2014年5月21日；穩定版本) 0.0.14 (2014年5月23日；穩定版本) 0.0.15 (2014年5月27日；穩定版本) 0.0.16 (2014年5月30日；穩定版本) 0.0.17 (2014年5月30日；穩定版本) 0.0.18 (2014年6月1日；穩定版本) 0.0.19 (2014年6月3日；穩定版本) 0.0.20 (2014年6月3日；穩定版本) 0.0.21 (2014年6月5日；穩定版本) 0.0.22 (2014年6月5日；穩定版本) 0.0.23 (2014年6月13日；穩定版本) 0.1.0 (2014年6月15日；穩定版本) 0.2.0 (2014年6月19日；穩定版本) 0.2.1 (2014年6月20日；穩定版本) 0.3.0 (2014年6月28日；穩定版本) 0.4.0 (2014年7月1日；穩定版本) 0.4.1 (2014年7月3日；穩定版本) 0.5.0 (2014年7月8日；穩定版本) 0.5.1 (2014年7月10日；穩定版本) 0.5.2 (2014年7月10日；穩定版本) 0.5.3 (2014年7月10日；穩定版本) 0.6.0 (2014年7月11日；穩定版本) 0.7.0 (2014年7月13日；穩定版本) 0.8.0 (2014年7月16日；穩定版本) 0.9.0 (2014年7月23日；穩定版本) 0.10.0 (2014年7月30日；穩定版本) 0.10.1 (2014年8月4日；穩定版本) 0.11.0 (2014年8月10日；穩定版本) 0.11.1 (2014年8月11日；穩定版本) 0.11.2 (2014年8月12日；穩定版本) 0.11.3 (2014年8月15日；穩定版本) 0.11.4 (2014年8月15日；穩定版本) 0.11.5 (2014年8月15日；穩定版本) 0.11.6 (2014年8月18日；穩定版本) 0.11.7 (2014年8月20日；穩定版本) 0.11.8 (2014年8月23日；穩定版本) 0.11.9 (2014年8月24日；穩定版本) 1.0.0 (2014年8月28日；穩定版本) 1.0.1 (2014年8月29日；穩定版本) 1.1.0 (2014年9月18日；穩定版本) 1.2.0 (2015年1月5日；穩定版本) 1.2.1 (2015年1月5日；穩定版本) 2.0.1 (2018年2月11日；穩定版本) 2.0.2 (2018年3月4日；穩定版本) 2.0.3 (2018年5月27日；穩定版本) 2.0.4 (2018年5月28日；穩定版本) 2.0.5 (2018年6月10日；穩定版本) 2.0.6 (2020年4月10日；穩定版本)
原始碼庫	github.com/julianshapiro/velocity
程式語言	JavaScript
作業系統	跨平台
系統平台	See Browser support
類型	JavaScript函式庫、動畫
許可協定	MIT
網站	velocityjs.org

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

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