使您的網站與velocity.js（無jQuery）進行互動和樂趣

>本文介紹了朱利安·夏皮羅（Julian Shapiro）的高性能JavaScript動畫庫Velocity.js，展示了其功能而不依賴JQuery。 這是探索CSS以外的動態DOM動畫庫的系列中的第三個。 以前的文章涵蓋了Anime.js和Kute.js.

特別感謝詹姆斯·希伯德（James Hibbard）和速度開發人員以及社區貢獻者的支持。

> velocity.js的關鍵特徵：

>

> velocity.js是為CSS屬性，轉換，SVG和滾動事件動畫的強大工具，都在Vanilla JavaScript中。 它的靈活的API類似於JQuery's，提供了循環，延遲，緩解選項（包括春季物理學）和持續時間控制等功能。 forceFeeding允許精確定義動畫開始和結束值。 此外，它提供了對動畫序列的控制（停止，暫停，逆轉，恢復）。 速度UI包通過預構建的效果和自定義動畫創建擴展功能。

動畫元素：$.animate()

> velocity.js動畫：

>數字CSS屬性（包括顏色）

變換

> svg屬性
滾動事件（頁面或容器）
淡出和幻燈片
• >注意：通常一次為一個數字屬性而動畫。 對於多軸翻譯（例如，
和
• ），請使用單獨的屬性。 ForceFeeding提供了一個例外，允許同時進行價值規範。
>

選項：translateX translateY

>速度的選項對象提供靈活性：

>（毫秒）

（jQuery UI，CSS3寬鬆，bezier曲線，春季物理）
• duration（無限的重複次數或
）
• > easing
>（毫秒）
• loop true>請參閱完整選項列表的速度文檔。
>
• delay語法：
>

> velocity.js共享jQuery的API，使jQuery用戶可以輕鬆過渡（替換為

>>），它在無jQuery的情況下完美地發揮了功能。 基本語法是：

>鏈接動畫：

動畫多個元素：$.animate() $.velocity()

> unit（

<code class="language-javascript">Velocity(element, {property: value}, {option: optionValue});</code>

，

，

，

<code class="language-javascript">Velocity(element1, {property: value}, {option: optionValue});
Velocity(element1, {property: value}, {option: optionValue});</code>

，

，

，

const elements = document.querySelectorAll('<div>');
Velocity(elements, {property: value}, {option: optionValue});）。  如果省略了速度侵入單位（通常<p>）。  還支持相對數學（<code>px，%，rem，em）。 vw/vh>
degpx> forcefeeding：  =
-=而不是依靠velocity.js檢索初始值，而是使用forceFeeding：>
<code class="language-javascript">Velocity(element, {property: value}, {option: optionValue});</code>
陣列包含：最終值，可選的寬鬆和啟動值。 >

動畫控件：>
>使用：
控制動畫


 

Velocity(elem, 'stop');
 

Velocity(elem, 'pause');
 

Velocity(elem, 'reverse');
 

Velocity(elem, 'resume');
然後，該文章提供了幾個演示（落球，按鈕控制的彈跳球，滾動動畫，SVG動畫以及使用速度UI包），以說明這些概念。  每個演示的代碼可通過文章中的Codepen鏈接獲得。  最後，本文以FAQ部分結束，涉及常見速度。 JS使用問題，包括無jQuery的使用。  本文還包括有關進一步學習的其他資源的部分。