アニメーションは、顧客の注意を引く優れた方法の 1 つです。
プロジェクト開発では、興味深いアニメーションを作成することで、プロジェクトに視覚的感覚とユーザー エクスペリエンスを追加することができます。同時に、Web サイトに独自の美学を追加するだけでなく、ユーザー エンゲージメントを高め、記憶に残る第一印象を生み出すこともできます。
そこで、今日の記事では、スクロール アニメーション、手書きアニメーション、SPA ページ遷移、タイピング アニメーション、カラー アニメーション、SVG アニメーションなどのアニメーションをすばやく作成するのに役立つ 10 個の面白くて便利な JavaScript アニメーション ライブラリをコンパイルします。これらの機能は実用的でシンプルです。 。
それでは、今すぐ始めましょう。
1.アニメ.js
アドレス：https://animejs.com/
GitHub 上に 43,000 を超えるスターが存在する Anime.js は、最も人気のあるアニメーション ライブラリの 1 つです。
これは、CSS プロパティ、SVG、DOM プロパティ、および JavaScript オブジェクトをアニメーション化するために使用できるシンプルな API を備えた軽量の JavaScript アニメーション ライブラリです。
Anime.js を使用すると、アニメーションを再生、一時停止、再開、または反転できます。このライブラリは、フォロー操作やオーバーラップ操作で複数の要素をアニメーション化する素晴らしい機能も提供します。ライブラリには、コールバックとプロミスを使用してリッスンできるさまざまなアニメーション関連のイベントも含まれています。
2.ロッティ
住所：https://airbnb.io/lottie/
Lottie は、Bodymovin プラグインを使用して JSON 形式でエクスポートされた Adobe After Effects アニメーションを解析し、モバイル アプリケーションや Web アプリケーションでネイティブにレンダリングするライブラリです。
これにより、プロのデザイナーが After Effects で作成した高度なアニメーションをユーザーが手動で再作成する必要がなくなります。GitHub には Web バージョンだけでも 27,000 を超えるスターが付いています。
3. 速度
アドレス: http://velocityjs.org/
Velocity を使用すると、カラー アニメーション、トランスフォーム、ループ、イージング、SVG アニメーションなどを作成できます。jQuery ライブラリのメソッドと同じ $.animate() API を使用し、利用可能な場合は jQuery と統合できます。
このライブラリは、グラデーション、スクロール、スライド効果を提供します。アニメーションの長さと遅延を制御できることに加えて、完了後のある時点でアニメーションを反転したり、進行中のアニメーションを完全に停止したりすることもできます。
このライブラリには GitHub 上に 17,000 個以上のスターがあり、Anime.js の理想的な代替品です。
4.大まかな表記
アドレス：https://roughnotation.com/
Rough Notation は、Web ページ上でカラフルな注釈を作成およびアニメーション化するための JavaScript ライブラリです。RoughJS を使用して手描きのルック アンド フィールを作成します。
下線、ボックス、円、ハイライト、取り消し線などを含む複数の注釈スタイルを作成し、各注釈スタイルの長さと色を制御できます。
5.ポップモーション
アドレス：https://popmotion.io/
Popmotion は、目を引くアニメーションを作成するための強力なライブラリです。なぜ違うのでしょうか？— Popmotion は、アニメーション化するオブジェクトのプロパティを想定しませんが、代わりに、任意の JavaScript 環境で使用できる、シンプルで構成可能な関数を提供します。
このライブラリは、キーフレーム、スプリング、数値、色、複雑な文字列の慣性アニメーションをサポートしています。このライブラリは十分にテストされ、積極的にメンテナンスされており、GitHub には 19,000 を超えるスターが付いています。
6. ライブ
アドレス: https://maxwellito.github.io/vivus/
Vivus は、SVG が描画されているようにアニメーション化できる JavaScript ライブラリです。高速、軽量、完全にツールに依存せず、3 つの異なる SVG アニメーション メソッドを提供します。 遅延、同期、1 対 1 の 3 つの異なる SVG アニメーション メソッドを提供します。
カスタム スクリプトを使用して、好みの方法で SVG を描画することもできます。
Vivus では、継続時間、遅延、タイミング関数、その他のアニメーション設定をカスタマイズすることもできます。
Vivus Instant の実際の実践例を確認してください。
7.GSAP：グリーンストッキングアニメーションプラットフォーム
アドレス：https://greensock.com/
GreenSock アニメーション プラットフォーム (GSAP) は、すべての主要なブラウザーで動作する素晴らしいアニメーションを作成できるライブラリです。React、Vue、WebGL、HTML キャンバスで使用して、色、文字列、モーション パスなどをアニメーション化できます。
また、ScrollTrigger プラグインも付属しており、わずか数行のコードで印象的なスクロールベースのアニメーションを作成できます。
GSAP は、1,100 万を超える Web サイトで使用されている多用途で人気のあるツールで、GitHub には 15,000 を超えるスターが付いています。GreenSock の GSDevTools を使用すると、GSAP を使用して作成されたアニメーションを簡単にデバッグできます。
8. Three.js
アドレス：https://trijs.org/
Three.js は、複雑な 3D オブジェクトやアニメーションを表示するための軽量ライブラリです。WebGL、SVG、CSS3D レンダラを活用して、さまざまなブラウザやデバイス上で実行される魅力的な 3D エクスペリエンスを作成します。これは JavaScript コミュニティではよく知られたライブラリであり、GitHub には 85,000 を超えるスターが付いています。
9.スクロールリビール
アドレス：https://scrollrevealjs.org/
ScrollReveal ライブラリを使用すると、ブラウザのビューポートに出入りする DOM 要素を簡単にアニメーション化できます。複数のブラウザでスクロール中に要素を表示または非表示にする、さまざまな種類のエレガントな効果を提供します。ScrollReveal ライブラリも非常に使いやすく、GitHub への依存関係はなく、2,100 人を超えるスター付きユーザーがいます。
10.Barb.js
アドレス：https://barba.js.org/
Web サイトを目立たせるクリエイティブな方法の 1 つは、ユーザーが閲覧するときに Web ページ間に鮮やかなトランジションを追加することです。これにより、単に新しい Web ページを表示したりブラウザをリロードしたりするよりも優れたユーザー エクスペリエンスが得られます。
Barba.js が非常に役立つのはこのためです。このライブラリを使用すると、Web サイトをシングル ページ アプリケーション (SPA) のように実行して、快適なページ遷移を作成できます。
これにより、ページ間の待ち時間が短縮され、ブラウザーによって行われる HTTP リクエストの数が最小限に抑えられます。GitHub には 11,000 近くのスターが付いています。
11.Mon.js
アドレス：https://mojs.github.io/
これは、あらゆる画面サイズで見栄えの良いスムーズなアニメーションや特殊効果を簡単に作成できる、シンプルな宣言型 API を提供します。
HTML または SVG DOM 要素を移動したり、独自の機能セットを持つ特別な Mo.js オブジェクトを作成したりできます。
これは信頼性が高く、十分にテストされたライブラリであり、1500 を超えるテストが書かれており、GitHub では 1700 を超えるスターが付いています。
12.型付き.js
アドレス: https://mattboldt.com/demos/typed-js/
その名前がすべてを物語っています。アニメーション タイピング ライブラリです。
あたかもリアルタイムで入力しているかのように特定の文字列を 1 文字ずつ入力できるため、入力速度を一時停止したり、特定の時間入力を一時停止したりすることもできます。
スマート バックスペース キーを使用すると、上記のデモで見たように、前の文字列全体をバックスペースすることなく、現在の文字と同じ文字セットで始まる連続した文字列を入力できます。
さらに、バッチ入力もサポートしています。バッチ入力とは、一連の文字を順番に入力するのではなく、画面上で同時に入力することです。Typed.js は GitHub 上で 12,000 個を超えるスターを獲得しており、Slack と Envato によって信頼されています。
要約する
開発者として、これらのツールを活用すると、間違いなくプロジェクトが強化され、競争が激化するデジタル環境で目立つようになります。