跳至內容

Velocity

本頁使用了標題或全文手工轉換
維基百科，自由的百科全書
  提示：此條目頁的主題不是速度或雙威偉樂城。
Velocity
原作者Julian Shapiro
目前版本1.4.3[1]（2017年2月16日[2]）
原始碼庫
編輯維基數據連結
程式語言JavaScript
作業系統跨平台
平台See Browser support
類型JavaScript函式庫、動畫
許可協定MIT[3]
網站velocityjs.org

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

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

Velocity被用於驅動許多著名網站的用戶介面，包括優步、三星、WhatsApp、Tumblr、HTC、萬事得和Microsoft Windows。[10] 它是代碼寄存服務GitHub上最受歡迎的專案之一。[11] 2015年，Velocity被The Net Awards提名為「年度開源專案」。[12]

功能

Velocity的功能包括：[4]

  • 瀏覽器窗口和元素捲動
  • 獨立於jQuery框架[13]
  • 動畫逆轉（復原前一個動畫）和動畫迴圈
  • SVG元素動畫[14]
  • RGB與hex顏色動畫
  • CSS transform屬性動畫
  • 通過Velocity的UI Pack預先建立動畫效果[15]
  • 彈簧釋放類型的基於物理學的運動
  • 整合Future與promise

瀏覽器支援

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

用法

引入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動畫庫的問題。[17][18] Stripe是一家頗受歡迎的以Web開發人員為中心的互聯網技術公司，為Shapiro提供經濟上的資助，讓他可以繼續專職開發Velocity。[19]

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

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

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

參見

延伸閱讀

外部連結

參考文獻

  1. ^ julianshapiro. velocity/README.md at master · julianshapiro/velocity · GitHub. Github.com. [2017-03-17]. （原始內容存檔於2019-02-18）. 
  2. ^ History for package.json - julianshapiro/velocity · GitHub. Github.com. [2017-03-17]. （原始內容存檔於2019-02-18）. 
  3. ^ 3.0 3.1 julianshapiro. velocity/LICENSE.md at master · julianshapiro/velocity · GitHub. Github.com. 2014-10-09 [2016-01-20]. （原始內容存檔於2018-10-01）. 
  4. ^ 4.0 4.1 存档副本. [2018-06-02]. （原始內容存檔於2021-08-12）. 
  5. ^ Major Contributor To Open Source Technologies, Julian Shapiro, Pulls Back the Curtains on SAAS Usage. Forbes.com. [2016-01-20]. （原始內容存檔於2021-10-10）. 
  6. ^ Velocity.js for designers. Studio Wolf. [2016-01-20]. （原始內容存檔於2016-03-06）. 
  7. ^ 7.0 7.1 存档副本. [2018-06-02]. （原始內容存檔於2022-05-13）. 
  8. ^ Velocity, the Powerhouse of JavaScript Libraries. [2018-06-02]. （原始內容存檔於2020-11-09）. 
  9. ^ Julian Shapiro. Incredibly Fast UI Animation Using Velocity.js. Sitepoint.com. 2014-06-16 [2016-01-20]. （原始內容存檔於2022-05-11）. 
  10. ^ 存档副本. [2018-06-02]. （原始內容存檔於2016-03-14）. 
  11. ^ Search · stars:>1 · GitHub. Github.com. [2016-01-20]. 
  12. ^ Shortlist The Net Awards 2015 Celebrating the best in web design and development. Thenetawards.com. [2016-01-20]. （原始內容存檔於2016-03-04）. 
  13. ^ Animating Without jQuery – Smashing Magazine. Smashingmagazine.com. 2014-09-04 [2016-01-20]. （原始內容存檔於2015-06-26）. 
  14. ^ 存档副本. [2018-06-02]. （原始內容存檔於2022-05-08）. 
  15. ^ Use Velocity.js to apply slick app-like motion effects | JavaScript | Web Designer. Webdesignermag.co.uk. 2015-01-21 [2016-01-20]. （原始內容存檔於2016-07-08）. 
  16. ^ Velocity.js. Julian.com. [2016-01-20]. 
  17. ^ Team, Awwwards. Interview with Julian Shapiro. Awwwards.com. [2016-01-20]. （原始內容存檔於2021-04-17）. 
  18. ^ Shapiro, Julian. Treat Open Source Like a Startup ★ Mozilla Hacks – the Web developer blog. Hacks.mozilla.org. 2014-05-21 [2016-01-20]. （原始內容存檔於2021-08-27）. 
  19. ^ Greg Brockman. Open-Source Retreat grantees. Stripe.com. 2014-06-06 [2016-01-20]. （原始內容存檔於2021-06-22）. 
  20. ^ Aurelio De Rosa. Easily Improving jQuery Animations. Sitepoint.com. 2014-06-23 [2016-01-20]. （原始內容存檔於2021-05-17）. 
  21. ^ Remix this video. Velocity Motion Designer: Overview. YouTube. 2014-09-06 [2016-01-20]. （原始內容存檔於2021-07-22）. 
  22. ^ [來源請求]
  23. ^ 存档副本. [2018-06-02]. （原始內容存檔於2020-10-31）. 
取自 "https://zh.wikipedia.org/w/index.php?title=Velocity&oldid=71698140"