2020年に使用する10以上のJavaScriptアニメーションライブラリ

2020年に使用する10以上のJavaScriptアニメーションライブラリ

2020年に使用する10以上のJavaScriptアニメーションライブラリ
СОДЕРЖАНИЕ
02 июня 2020

最高のJavaScriptアニメーションライブラリ


ウェブサイトの訪問者の注意を引きたいと考えている場合、アニメーションよりも優れているものは何ですか?ウェブ上で自由に利用できる多くのアプリケーションエンジンを使用して、ウェブサイトの要素を簡単にフェード、バウンス、またはシューという音に変えることができます。今日の投稿では、 JavaScriptアニメーションライブラリがどのように役立つか それですべて.

まず、JavaScriptアニメーションについて少し

たった1つのアクション(たとえば、切り替え)を必要とする単純なアニメーションを追加することは1つのことです。このために、常に簡単なCSSアニメーションを使用できます。ただし、より複雑または高度な効果を得るには、JavaScriptの方が優れたツールです。言うまでもなく、JavaScriptを使用してアニメーションを作成することは、CSSを使用するよりも困難です。.

それでも、JavaScriptはCSSができないことを処理できます。これにより、開発者は複数の可動部分を調整する必要がある複雑なアニメーションを制御するためのより多くの力を得ることができます.

JavaScriptアニメーションは、要素のスタイルに段階的な変更を加えることで実装されます。それらをコードの一部としてインラインで追加するか、他のオブジェクトに含めることができます。レンダリング時に、これらの変更はタイマーによって呼び出されます。また、変更の時間間隔を調整することで、アニメーションの連続性を制御できます.

最高のJavaScriptアニメーションライブラリ

以下は、素晴らしい外観のアニメーションをWebサイトに追加するために使用できるJavaScriptアニメーションライブラリのリストです。

1. Anime.js

JavaScriptアニメーションライブラリ:Anime.js

このJavaScriptアニメーションライブラリのリストをAnime.jsから始めましょう。この軽量のアニメーションライブラリは、35K以上の星を表示します GitHub. 単一の強力なAPIを使用して、それを使用してHTML、CSS、JS、SVG、およびDOM属性をアニメーション化できます。ビルトインの千鳥配置システムを使用すると、波紋、方向性のある動き、フォロースルー、重なり合うエフェクトの作成を簡単に見せることができます。このシステムは、タイミングとプロパティの両方で使用できます.

組み込みのコールバック関数と制御関数を使用してできることはたくさんあります。たとえば、同期してイベントを再生、一時停止、制御、逆転、トリガーできます。このライブラリを使用して他に何ができるかを確認するには、次のURLにアクセスしてください Codepen.

2. Velocity.js

Velocit.js

Velocity.jsは、jQueryとCSSのトランジションを組み合わせたものです。それは17K星に近い評価 GitHub WhatsAppやMailchimpなどの著名なユーザーを誇っています。ループ、逆転、遅延、要素の非表示/表示、プロパティ計算(+、-、*、/)、ハードウェアアクセラレーションなど、すべて機能の一部.

Velocity.jsを使用してブラウザウィンドウをスクロールできます。ブラウザにロードされたjQueryと独立して動作し、以前のアニメーションを取り消すこともできます.

3. ポップモーション

ポップモーション

近くで 18K スター、PopmotionはJavaScript環境用の機能的なアニメーションライブラリです。 React、Three.js、A-Frame、PixiJSなど、入力として数値を受け入れるほぼすべてのAPIで動作します。.

Popmotionの重さはわずか11.7kBですが、それでもパンチが詰まります。キーフレーム、ディケイ、複数のインスタンスを同期するためのタイムラインなどのアニメーションが特徴です。一連のアニメーションや関数をずらすことができ、純粋な関数を使用して独自の構成を作成できます.

4. Three.js

JavaScriptアニメーションライブラリ:Three.js

Three.jsは、JavaScriptアニメーションライブラリのこのリストで60,000以上の星を獲得しています GitHub. それはに依存しています WebGL ブラウザで3Dアニメーションを作成およびレンダリングする.

役立つドキュメントはたくさんあります。一度学習曲線を過ぎると、このライブラリを使用して達成できないことはほとんどありません。まず、Three.jsエディターを使用して、シーンを作成します。その後、幾何学的図形を追加し、照明とカメラを調整します。マテリアル、テクスチャ、オブジェクト、色、フォギングをすべて調整し、最終的なファイルをプロジェクトに公開できます.

5. GreenSock JS

GreenSock

GreenSockのGSAPは、主要なすべてのブラウザでアニメーションを美しく見せるための一連の小さなJavaScriptファイルで動作します。複数のアニメーションプロパティをスムーズにチェーンし、ブラウザのバグを排除します.

GSAPアクションには、Canvasでアニメーションを作成したり、シーン内のオブジェクトをアニメーション化したりすることが含まれます。また、パスに沿ってオブジェクトを徐々に表示、モーフィング、または移動します。この目的のために、SVGPlugins、PixiPlugin、WebGL、Adobe Animate、EaseJSなどの一連のソフトウェアアプリケーションで動作します。そのモジュール構造により、必要な機能だけを選択できます。ユーザー数800万人、スター数1万以上 GitHub, この強力なライブラリはそれのために多くを行っています.

6. AniJS

AniJS

このリストのJavaScriptライブラリの中で、AniJSはいくぶんユニークです。シンプルな「文のような」構造で要素にアニメーションを追加できるので、アニメーションを初めて使う人に最適です。さらに、その非特定の性質により、ほとんどすべての人が日常的なUX設計でそれを使用できます.

オン GitHub, AniJSは星3.5K以上を評価しています。サードパーティのライブラリに依存せず、一般に開発のスピードアップに役立ちます。 AndroidとiOSだけでなく、人気のあるすべてのブラウザでも同様に機能します.

7. Mo.js

Mo.js

モーショングラフィックスはアニメーションで再生するために大きな役割を果たし、Mo.jsはインパクトを与えることができる1つのオプションです。多くのチュートリアルとデモが役立つので、初心者は幾何学的形状を作成し、ドットに時間アニメーションを作成するのは難しくないかもしれません.

APIはシンプルに見えるかもしれませんが、それらを使ってできることはたくさんあります。ツールキットには、アニメーションの構築に役立つカーブエディターとタイムラインエディター、アニメーションを制御するプレーヤーが含まれています。時差、イージング、タイムラインなどのさまざまなモジュールがあります。これにより、Mo.jsは16Kスターに近づきます GitHub.

8. Vivus.js

JavaScriptアニメーションライブラリ:Vivus

画面上のペン描画をリアルタイムで模倣したい場合は、Vivusを使用してマークを打ちます。 SVGをアニメーション化して、描かれているような印象を与えることができます。依存関係がないため、高速で軽量です.

利用可能なアニメーション(遅延、同期、OneByOne)を選択できます。または、SVGを描画するカスタムスクリプトを作成することもできます。柔軟性を高めるために、単純なJavaScript関数を使用して各パスのアニメーションをオーバーライドできます。 13,000人を超えるユーザーがこのライブラリを高く評価しています GitHub.

9. ScrollReveal JS

ScrollReveal

スクロールしてWeb要素をアニメーション化したい場合、ScrollRevealは期待を裏切りません。この学習しやすいアニメーションライブラリには依存関係がなく、18.5K以上のスターがあります。 GitHub.

ScrollRevealはさまざまなタイプのエフェクトをサポートし、Webおよびモバイルブラウザで適切に動作します。最小限の構成で意図的に機能するため、創造性のキャンバスとして使用できます。アニメーションの効果を最大化するために、クリエイターは慎重に使用することをお勧めします.

10. Typed.js

Typed.js

Typed.jsは、画面での入力をアニメーション化するための単純なライブラリ(実際にはプラグインの詳細)です。文字列を入力すると、訪問者は設定された速度で文字列が入力されるのを見ることができます。それだけでなく、Backspaceボタンを操作したり、新しい文を開始したりできます。 JSが無効になっている訪問者にも表示を許可する場合は、ページにHTML divを配置するだけです。そうすることで、ボットと検索エンジンは、入力された単語を表示することもできます.

このライブラリは9.5K以上の星を評価します GitHub. パワーユーザーにはSlackとEnvatoが含まれます.

11. ロッティby AirBnB

JavaScriptアニメーションライブラリ:Lottie

Lottieは、高品質のグラフィックスとレンダリングのコストのバランスをとる軽量​​のアニメーショングラフィックス形式です。アプリケーションが小さくなり、動的な機能が含まれます。追加のソフトウェアを必要とせずに、Web、Android、iOS、IoTに使用できます.

Lottieは、JavaScriptをサポートする任意のブラウザーで実行できます。アニメーションはプレーンテキストで保存され、人間が読める形式になっています。テキストデータはJSON形式で保存されるため、JavaScript環境と簡単に同化できます。これにより、モバイルフロントエンドを強化するための人気のあるアニメーショングラフィックス形式になります。 Androidバージョンだけでも、3万個近くの星を楽しめます GitHub.

このJavaSCriptアニメーションライブラリのリストの最後に達した場合は、他のJavaScriptライブラリとフレームワークの検索にも興味があるかもしれません。または、これらの最高のReact UIコンポーネントライブラリを確認してください。.

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector