Velocity（JavaScriptライブラリ）
速度
原作者ジュリアン・シャピロ
安定版リリース
1.5.2 [ 1 ] / 2018年7月31日[ 2 ]
リポジトリ
書かれたJavaScript
オペレーティング·システムクロスプラットフォーム
プラットフォームブラウザのサポートを参照してください
タイプJavaScriptライブラリ、アニメーション
ライセンスマサチューセッツ工科大学[ 3 ]
Webサイト速度js.org

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 ]
  • スプリングイージングタイプによる物理ベースのモーション
  • Promisesの統合

ブラウザのサポート

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 を直接組み込むこともできます。( integrity 属性はサブリソースの整合性に使用されます。) リソースには常にHTTPSを使用することをお勧めしますが、プロトコル相対 URL//を使用するためにこれを に置き換えることができます。 

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

使用スタイル

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

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

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

議論

Velocity は1つ以上の引数を受け取ります。最初の引数は必須で、定義済みの Velocity コマンドの名前（例：scrollまたはreverse）か、アニメーション化する 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のreverseコマンドは、デフォルトで前回の呼び出しで使用されたアニメーションオプションを使用します。新しいオプションオブジェクトを渡すことで、前回のオプションオブジェクトを拡張できます。 

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

歴史

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

Velocityの内部アニメーションエンジンの高性能は、JavaScriptベースのウェブアニメーションの再普及に貢献しました。JavaScriptベースのウェブアニメーションは、アニメーションに重点を置かなかった古い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（例）によく投稿されています。

参照

さらに読む

参考文献

  1. ^ julianshapiro. "velocity/README.md at master · julianshapiro/velocity · GitHub" . Github.com . 2021年2月13日閲覧。
  2. ^ 「package.json の履歴 - julianshapiro/velocity · GitHub」 . Github.com . 2021年2月13日閲覧。
  3. ^ a b julianshapiro (2014-10-09). "velocity/LICENSE.md at master · julianshapiro/velocity · GitHub" . Github.com . 2016年1月20日閲覧。
  4. ^ a b「JavaScriptアニメーション」。2015年6月15日。
  5. ^ 「オープンソーステクノロジーの主要貢献者であるジュリアン・シャピロ氏がSAASの利用状況を明らかにする」 Forbes.com 2016年1月20日閲覧。
  6. ^ 「デザイナーのためのVelocity.js」 Studio Wolf. 2016年3月6日時点のオリジナルよりアーカイブ。2016年1月20日閲覧。
  7. ^ a b「CSS vs. JSアニメーション: どちらが速いか?」 2014年4月28日。
  8. ^ 「Velocity、JavaScript ライブラリの原動力」 2017 年 10 月 11 日。
  9. ^ Julian Shapiro (2014年6月16日). 「Velocity.jsを使った驚くほど高速なUIアニメーション」 . Sitepoint.com . 2016年1月20日閲覧。
  10. ^ "Search · stars:>1 · GitHub" . Github.com . 2016年1月20日閲覧。
  11. ^ 「Shortlist The Net Awards 2015 Celebrating the best in web design and development」 Thenetawards.com . 2016年1月20日閲覧。
  12. ^ 「jQueryを使わないアニメーション – Smashing Magazine」 Smashingmagazine.com、2014年9月4日。 2016年1月20日閲覧。
  13. ^ 「SVGアニメーションの簡単な入門」 2014年7月31日。
  14. ^ 「Velocity.jsを使って洗練されたアプリのようなモーションエフェクトを適用する | JavaScript | Web Designer」 Webdesignermag.co.uk. 2015年1月21日. 2016年1月20日閲覧。
  15. ^ "Velocity.js" . Julian.com . 2016年1月20日閲覧。
  16. ^ Awwwardsチーム、「ジュリアン・シャピロ氏へのインタビュー」 Awwwards.com 。 2016年1月20日閲覧。
  17. ^ Shapiro, Julian (2014年5月21日). 「オープンソースをスタートアップのように扱う ★ Mozilla Hacks – Web開発者ブログ」 . Hacks.mozilla.org . 2016年1月20日閲覧。
  18. ^ Greg Brockman (2014年6月6日). 「Open-Source Retreatの助成金受給者」 . Stripe.com . 2016年1月20日閲覧。
  19. ^ Aurelio De Rosa (2014年6月23日). 「jQueryアニメーションを簡単に改善する」 . Sitepoint.com . 2016年1月20日閲覧。
  20. ^この動画をリミックス（2014年9月6日）。「Velocity Motion Designer：概要」 YouTube 。 2016年1月20日閲覧。
  21. ^ 「julianshapiro/Velocity への貢献者」。GitHub 。
「 https://en.wikipedia.org/w/index.php?title=Velocity_(JavaScript_library)&oldid=1303140368」から取得