velocity.js（jqueryなし）であなたのウェブサイトをインタラクティブで楽しくする

この記事では、Julian Shapiroによる高性能JavaScriptアニメーションライブラリであるVelocity.jsを紹介し、JQueryに頼らずにその機能を実証しています。 これは、CSSを超えた動的DOMアニメーションライブラリを探索するシリーズの3番目です。 以前の記事では、anime.jsとkute.js.

をカバーしました

ジェームズ・ヒバードとヴェロシティ開発者、そしてコミュニティの貢献者とともに、彼らのサポートに感謝します。 velocity.jsの重要な機能：

Velocity.jsは、すべてVanilla JavaScript内のCSSプロパティ、変換、SVG、スクロールイベントをアニメーション化するための堅牢なツールです。 jqueryのに似た柔軟なAPIは、ループ、遅延、緩和オプション（春の物理学を含む）、期間制御などの機能を提供します。 フォースフィードは、アニメーションの開始値と終了値の正確な定義を可能にします。 さらに、アニメーションシーケンスを制御します（停止、一時停止、逆転、再開）。 Velocity UIパックは、事前に構築されたエフェクトとカスタムアニメーション作成で機能を拡張します。

アニメーション可能な要素：$.animate()

velocity.jsアニメーション：

数値CSSプロパティ（色を含む）

変換

• svgプロパティ
• スクロールイベント（ページまたはコンテナ）
• フェードアニメーションとスライドアニメーション
注：通常、一度に1つの数値プロパティをアニメーション化します。 多軸の翻訳（例：
• および
）には、個別のプロパティを使用します。 ForceFeedingは例外を提供し、同時値仕様を可能にします

オプション：translateXtranslateY

velocityのオプションオブジェクトは柔軟性を提供します：

（milliseconds）

（jquery ui、css3 easings、bezier curves、spring physics）
• duration
（無限の繰り返しの数または
• ）easing
• （milliseconds）loop true
完全なオプションリストについては、Velocityドキュメントを参照してください。
• delay構文：

velocity.jsはjQueryのAPIを共有している間、jQueryユーザーが簡単に移行できるようにします（

を

に置き換えます）、jQueryなしで完全に機能します。 基本的な構文は次のとおりです チェーンアニメーション：

$.animate()複数の要素のアニメーション：$.velocity()

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

units（

、

、

<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/vhdeg強制フィーディング：px =
-= velocity.jsに頼る代わりに初期値を取得するには、力を供給する：*=

<code class="language-javascript">Velocity(element, {property: value}, {option: optionValue});</code>
配列には：end値、オプションの緩和、および開始値。
アニメーションコントロール：
使用：
を制御します

 Velocity(elem, 'stop');

 Velocity(elem, 'pause');

 Velocity(elem, 'reverse');

 Velocity(elem, 'resume');


この記事では、これらの概念を示すいくつかのデモ（ボールの落下、ボタン制御のバウンスボール、スクロールアニメーション、SVGアニメーション、Velocity UIパックの使用）を提供します。  各デモのコードは、記事内のCodePenリンクを介して利用できます。  最後に、この記事は、jQueryの使用を含む、一般的なVelocity.jsの使用に関する質問に対処するFAQセクションで締めくくります。  この記事には、さらなる学習のための追加のリソースに関するセクションも含まれています。