無料でオープンソースの最高の JavaScript アニメーション ライブラリ

アニメーションは正しく使用すると、ユーザー エクスペリエンスを大幅に向上させることができます。 Web ページには、アニメーション化して生き生きとしたものにできる要素がたくさんあります。ボタンの背景色や Web ページ上の特定の要素の境界線の半径などの基本的なものも、CSS を使用してアニメーション化できます。

ただし、CSS には制限があるため、アニメーション要素のあらゆる側面をより詳細に制御したい場合は、JavaScript を使用する必要があります。この記事では、プロジェクトで今すぐ使用できる、無料でオープンソースの最高の JavaScript アニメーション ライブラリを 8 つ紹介します。

Mo.js

Mo.js は、JavaScript ベースのモーション グラフィックスを Web サイトに追加するための優れたライブラリです。非常に高速で、スムーズなアニメーションを生成し、さまざまなデバイスで見栄えがよくなります。また、モジュール式であるため、特定のコンポーネントのみを使用する場合に余分なオーバーヘッドを回避できます。

ライブラリには、作成するコンポーネントのさまざまなプロパティの値を設定するための宣言型 API があります。これには、Html、Shape、ShapeSwirl、Burst という 4 つの異なる組み込みモジュールが付属しています。バーストと渦巻きは、Web サイト上の要素とのさまざまなユーザー インタラクションで創造的に使用できます。

上の CodePen 内の任意の場所をクリックしてみると、たくさんの丸と星が表示されます。これは、mo.js の Burst モジュールと Shape モジュールを使用して LegoMushroom によって作成されました。

mo.js のドキュメントには、ライブラリのさまざまな側面を理解するのに役立つこのような興味深い例が多数提供されています。

＃＃＃漫画＃＃＃

Anime は、GitHub で最も人気のあるアニメーション ライブラリの 1 つです。非常に軽量で、習得しやすい API が付属しています。このライブラリは、CSS プロパティ、SVG、および DOM プロパティをアニメーション化するために使用できます。

これにより、要素のアニメーション方法を大幅に制御できるようになります。オブジェクトが移動する速度、方向、順序を制御できます。これを選択するたびに、アニメーションを一時停止、再開、または反転することを選択できます。

このライブラリは、SVG アニメーションの優れたサポートも提供します。滑らかな変形効果を作成したり、2 つの異なる SVG シェイプ間に線画アニメーションを作成したりできます。

上記の CodePen の

Write Name

ボタンをクリックしてみると、私の名前の文字が一度に 1 つずつアニメーション表示されるのがわかります。このデモは、アニメに関する一連のチュートリアルの一部です。図書館について詳しく知るには、これらをチェックしてください。 人気のアクション

Popmotion も軽量で人気のあるアニメーション ライブラリです。これを使用して、数値、色、複雑な文字列をアニメーション化できます。ライブラリ内の主要なアニメーション関数は約 5kb で、ライブラリ全体では約 12kb です。

これを使用して、キーフレームとスプリングの 2 種類のアニメーションを作成できます。キーフレームアニメーションの開始点や終了点などを指定できます。スプリング アニメーションには剛性、減衰、質量、速度などのプロパティがあり、アニメーションにより自然な動きを与えます。このライブラリには、

angle

、clamp、 distance、snapp などの計算用のユーティリティ関数も多数付属しています。

上記の gaougalos の CodePen デモのキーフレーム アニメーションは、Popmotion ライブラリを使用して作成されたアニメーションです。

スクロール表示

ScrollReveal ライブラリは、ビューポート内またはビューポートからスクロールする要素をアニメーション化する場合に便利です。

要素をアニメーション化するには多くのオプションがあります。遅延、継続時間、および間隔のプロパティを使用して、アニメーションの進行状況を制御できます。表示されるオブジェクトの回転、拡大縮小、移動を制御するオプションもあります。このライブラリには、要素が表示される前または後に何が起こるかを決定するために使用できるコールバックも付属しています。

Sava Lazic による上記の CodePen デモでは、ScrollReveal ライブラリを使用して、視覚的に魅力的な垂直タイムラインを作成しています。 Web サイトで製品やプロジェクトを紹介するのと同様のコンテンツを作成できます。

＃＃＃生きている＃＃＃

Vivus は、SVG アニメーションを作成するために特別に作成された素晴らしい JavaScript ベースのアニメーション ライブラリです。非常に軽量で依存関係がありません。

Vivus では、SVG でパスをアニメーション化する 3 つの異なる方法が提供されます。すべてのラインを一度に、遅延させて、または次々にアニメーション化できます。また、アニメーションのタイミングを調整する際に、非常に柔軟な対応が可能になります。

Vivus を使用する際に覚えておくべきことは、Vivus は常に SVG で定義された順序で要素をアニメーション化するということです。また、アニメーション化する要素には、塗りつぶしではなくストロークが必要です。

上記の Alex Nelson の CodePen デモの SVG パス アニメーションは、わずか 6 行のコードと Vivus の助けを借りて作成されました。

型付き.js

Typed.js という名前から、このアニメーション ライブラリがテキストの入力に使用されることが推測できます。入力したいすべての文字列を配列として渡すことができます。このライブラリは、Web ページ上の HTML div から入力して、アニメーション化するテキストを読み取るための、より SEO に適した方法も実装しています。

一連のパラメータを使用して、タイピング アニメーションの動作を微調整できます。これには、入力速度、バックスペース速度、開始遅延、バックスペース遅延、ループ数などが含まれます。さまざまなイベント (文字列の入力後など) で起動する一連のコールバック関数を定義することもできます。

Conner の上記の CodePen は、このライブラリを使用して退屈な 404 エラー ページを面白くする方法を示しています。

ProgressBar.js

完了までに時間がかかるプロセスには進行状況バーを追加することをお勧めします。これにより、ユーザーはタスクの進行速度を知ることができます。たとえば、オンライン画像エディターに進行状況バーを表示して、ページが停止しているだけでなく、画像が実際にバックグラウンドで処理されていることをユーザーに知らせることができます。

ProgressBar.js ライブラリを使用すると、開発者はスタイリッシュなプログレス バーを Web サイトに簡単に追加できます。線、円、半円などの組み込みの形状を使用して進行状況バーを作成するだけでなく、独自のカスタム形状の使用を選択することもできます。これにより、さまざまな興味深い可能性が開かれます。

上のデモでわかるように、進行状況バーでさまざまなプロパティをアニメーション化できます。このライブラリの詳細については、ProgressBar.js の入門チュートリアルをご覧ください。

ロッティ

Lotie for Airbnb は、これまで説明してきた他のアニメーション ライブラリとは異なります。 Bodymovin を使用して JSON にエクスポートされた Adob​​e After Effects で作成されたアニメーションを解析します。これらの効果を Web ページ上に直接レンダリングできます。

ライブラリの GitHub ページでは、インストール プロセスとその仕組みについて詳しく説明されています。アニメーションの進行状況を制御するために使用できるグローバル メソッドが多数あります。アニメーションの開始、停止、方向の反転を簡単に行うことができます。

数行のコードを記述するだけで、必要な JSON ファイルをロードし、いくつかのパラメータを使用してアニメーションを初期化できます。上記の kittons の CodePen デモは、ブラウザで After Effects アニメーションを簡単にレンダリングする方法を示す良い例です。

＃＃＃最終的な考え＃＃＃

この記事では、8 つの人気のある無料およびオープンソースの JavaScript アニメーション ライブラリを調査します。それぞれが異なることを行い、Web アニメーションの異なる側面を対象としています。これらのライブラリを使用すると、Web サイト上のほぼすべてのコンテンツをアニメーション化できます。これらのライブラリを使用して、競合他社と一線を画す美しい Web サイトを作成していただければ幸いです。アニメーションを使いすぎないように注意してください。

また、留意すべき点の 1 つは、単純なアニメーションには CSS を使用するように努めるべきであるということです。ユーザーが要素の上にマウスを置いたときに要素の色を変更したいだけの場合、完全な JavaScript アニメーション ライブラリをロードすることにあまり意味はありません。

以上が無料でオープンソースの最高の JavaScript アニメーション ライブラリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。