Velocity (JavaScript ライブラリ)

Velocityは、ウェブサイトアニメーションのクライアント側スクリプトを簡素化するために設計されたクロスプラットフォームの JavaScriptライブラリです。^{[4] Velocityは、} MITライセンスの下でライセンスされた無料のオープンソースソフトウェアです。^[3]これは最も人気のあるオープンソースのウェブアニメーションエンジンです。^[5]

Velocity の構文は、 HTML 要素やSVG要素の複雑なアニメーションを簡単に作成できるように設計されています。 ^[6] Velocity は、ワークフローの利点に加えて、CSSベースのアニメーションに匹敵するアニメーション パフォーマンスを提供します。^[7] Velocity は、アニメーション状態の内部キャッシュを維持し、「レイアウトスラッシング」を最小限に抑えることでパフォーマンスを実現します。レイアウト スラッシングは、 Web ブラウザーが高速で視覚的に更新されるときに発生する望ましくない動作です。 ^[7]全体として、ワークフローとパフォーマンスの利点により、Velocity は Web アプリケーションとモバイル アプリケーションの両方に統合できる高度なアニメーション プログラミングに使用できます。^[8]幅広いブラウザーとデバイスのサポートにより、低電力デバイスをサポートする必要がある大規模なエンタープライズ ディストリビューションに最適です。^[9]

Velocityは、 Uber、Samsung、WhatsApp、Tumblr、HTC、Mazda、Microsoft Windowsなど、多くの有名なウェブサイトのユーザーインターフェースを強化するために使用されています。コードホスティングサービスGitHubで最も人気のあるプロジェクトの1つです。^{[10] 2015年、Velocityは}The Net Awardsのオープンソースプロジェクトオブザイヤーにノミネートされました 。^[11]

Velocityの機能は次のとおりです。^[4]

• ブラウザウィンドウと要素のスクロール
• jQueryフレームワークからの独立性^[12]
• アニメーションの反転（前のアニメーションを元に戻す機能）とアニメーションのループ
• SVG要素アニメーション^[13]
• RGBと16進カラーアニメーション
• CSSのtransformプロパティアニメーション
• VelocityのUIパックによる事前に作成されたアニメーション効果^[14]
• スプリングイージングタイプによる物理ベースのモーション
• 統合を約束する

Velocityは、すべての主要なデスクトップブラウザ（Firefox、Google Chrome、Safari）とiOSおよびAndroidモバイルオペレーティングシステムをサポートしています。そのサポートは、 Internet Explorer 8とAndroid 2.3まで遡ります。 ^[15]

Velocity ライブラリは、そのコア機能をすべて含む単一の JavaScript ファイルです。ローカル コピーまたは、MaxCDNのjsDelivrやCloudflareの cdnjs などのパブリック サーバーから入手できる多数のコピーのいずれかにリンクすることで、Web ページ内に含めることができます。

<スクリプト src = "velocity.min.js" ></スクリプト>

コンテンツ配信ネットワークから Velocity を直接含めることもできます。(整合性属性はサブリソース整合性に使用されます。) リソースには常にHTTPS を使用することをお勧めしますが、プロトコル相対 URL//を使用するにはこれを に置き換えることができます。

<スクリプト src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js" 整合性= "sha384-fcLDUAwcSMMfmpKMJ0dO2//SL2WJ5/kkyz/yvgtmLXBEp3GdqrQF9ahRerhdLXn+" クロスオリジン= "匿名" ></スクリプト>

Velocity には 2 つの使用スタイルがあります。

• この関数は、 jQueryルート オブジェクトから拡張されたファクトリ メソッド$.Velocityです。このメソッドは、jQueryでラップされた要素ではなく、生のDOM要素をアニメーション化します。これは、ページで jQuery を使用せずに Velocity を使用するときに使用されるスタイルです。
• 関数。これは、ページ上にjQueryが$element.velocity()存在する場合に jQuery 要素オブジェクトをアニメーション化するために使用されるスタイルです。

Velocity でのアニメーション呼び出しは、アニメーション化する要素、アニメーション化するCSSプロパティを指定するアニメーション プロパティ マップ、およびアニメーション設定 (期間など) を指定するオプションのオプションオブジェクトの提供から構成されます。

Velocity は 1 つ以上の引数を受け入れます。最初の引数は必須で、定義済みの Velocity コマンドの名前 (例: scrollまたはriver )、またはアニメーション化する CSS プロパティで構成されるオブジェクトのいずれかになります。

// 要素の幅を 100px に、left プロパティを 200px にアニメーション化します
。$ element.velocity ({ width : "100px" , left : "200px" });     

2 番目の引数はオプションで、オブジェクトです。duration 、easing、complete (アニメーションが完了した後に実行される任意の関数) などのアニメーション オプションを指定するために使用されます。

// 100 秒の遅延後、1000 ミリ秒かけて要素の幅を 100 ピクセルまでアニメーション化します。
$element . velocity ({ width : "100px" }, { duration : 1000 , delay : 100 });         

Velocity で一連の連続したアニメーション呼び出しを作成するには、対象のjQuery要素オブジェクトにvelocity()呼び出しを連続して配置します。

$element 
. velocity ({ height : 300 }, { duration : 1000 }) // 前のアニメーションが完了したら、このアニメーションを続行します。 . velocity ({ top : 200 }, { duration : 600 }) // そしてもう一度... . velocity ({ opacity : 0 }, { duration : 200 });           
    
           
   
           

Velocity でのスクロールは、一般的な CSS プロパティ マップの代わりに、Velocity の最初の引数として 「scroll」を渡すことで実現されます。

// 750 ミリ秒の期間でスクロールします
$element . velocity ( "scroll" , { duration : 750 });    

その後、ブラウザは Velocity が呼び出された要素の上端までスクロールします。

Velocity でのアニメーションの反転は、Velocity の最初の引数として「reverse」を渡すことで行われます。

// 要素の高さをアニメーション化します
$element . velocity ({ height : "500px" }, { duration : 500 }); // 前のアニメーションを逆にします。前の期間を使用して、要素の元の高さにアニメーション化します$element . velocity ( "reverse" );       

Velocity のリバースコマンドは、デフォルトで、前の呼び出しで使用されたアニメーション オプションを使用します。新しいオプション オブジェクトを渡すと、前のオプション オブジェクトが拡張されます。

$element . velocity ({ height : "500px" }, { duration : 500 }); // 前のリバース呼び出しのオプション オブジェクトを新しい期間値で拡張します$element . velocity ( "reverse" , { duration : 1000 });       

    

Velocityは、パフォーマンスが高くデザイナー向けのJavaScriptアニメーションライブラリの不足に対処するために、Julian Shapiroによって開発されました。^{[16] [17]} 人気のあるWeb開発者に重点を置いたインターネットテクノロジー企業であるStripeは、Velocityのフルタイム開発を継続するために必要な資金を提供するために、Shapiroに助成金を提供しました。^[18]

Velocityの内部アニメーションエンジンの高性能は、JavaScriptベースのWebアニメーションの再普及に貢献しました。JavaScriptベースのWebアニメーションは、アニメーションに重点を置かなかった古いJavaScriptライブラリよりも速度面で有利だったため、以前はCSSベースのアニメーションに取って代わられていました。^[19]

2014年9月、シャピロはVelocity Motion Designer をリリースしました。これは、ライブプロダクションのウェブサイトでアニメーションをデザインするためのツールで、生成されたアニメーションコードをリアルタイムでエクスポートして、後でIDE内で使用できるようにします。^[20] 2015年3月、ピーチピットはシャピロのWeb Animation using JavaScript という本を出版しました。この本では、Velocity を使用してウェブアニメーションを開発するための初級と上級の両方の原則が学べます。^[要出典] 2015年半ば現在、Velocity は引き続きシャピロによって独占的に開発および保守されています。^[21]

Velocity は、プロフェッショナルなエンタープライズ環境での使用に加えて、Web 開発の実験や初心者の練習にも広く使用されています。Velocity 上に構築された概念実証 Web 開発プロジェクトは、主要なコミュニティ コード共有サービスであるCodePen (例)によく投稿されます。

• D3.js
• ラファエル
• 3.js の
• jQuery
• JavaScriptフレームワーク
• JavaScript ライブラリ

• jQuery を使わないアニメーション
• Velocityを使用して簡単にアニメーションを追加する方法
• Velocity.js を使用した高速 UI アニメーション

• 公式サイト
• Velocity デモ ギャラリー