JavaScript アニメーション ライブラリ: 10 の一般的な選択肢

さまざまなアニメーション効果、特にシンプルで CSS で実装できるものを試すのが大好きです。 しかし、全体像を見ると、CSS アニメーションはそこまでしか行きません。 また、複雑でインタラクティブなユーザー エクスペリエンスを作成したい場合は、遅かれ早かれ JavaScript に切り替える必要があります。

アニメーション効果に JavaScript を使用する主な利点は、より多くのアニメーション ロジックを制御できることです。 これには、トランジションの流動性、DOM の状態と応答の制御が含まれますが、WebGL による 2D および 3D グラフィックの使用も含まれます。

JavaScript アニメーション ライブラリの種類

したがって、JS アニメーション ライブラリにはさまざまな形や形式があるため、対象となる特定の領域を絞り込むのに非常に役立ちます。 多くのエンジンとフレームワークは、フロントエンドだけでなく、ゲームの構築やその他のインタラクティブ コンテンツの作成にも使用されます。

この特定のまとめでは、フロントエンド開発で単独で、または現在のフレームワークと組み合わせて最も一般的に使用されるライブラリに焦点を当てます。

やがて、規模は小さくてもインタラクティブなアニメーションをプロジェクトに追加する意味のある方法を提供するライブラリをこのリストに追加することを検討します。

各ライブラリには、その Web サイトと GitHub ページへのリンクがあります。 また、このページから実行できる CodePen の例と、追加のリソース (チュートリアルまたはビデオ ガイド) も追加しました。

#1 – Three.js

Three.js は、クリエイティブな Web サイト開発で使用する 3D アニメーション効果を作成するための頼りになるライブラリです。 Three.js を使用すると、開発者は WebGL について学ぶ必要がなくなり、代わりに、複雑さを感じることなくインタラクティブな 3D 効果の構築に専念できます。

ハイエンドでは、Mozilla Hubs などのインタラクティブな仮想体験を作成するために Three.js が使用されています。 さらに、このライブラリは、没入型のランディング ページ エクスペリエンスの作成にもよく利用されます。 世界クラスの出版社や社説は、何年もの間 Three.js を使用して、動的な更新を伴うデータベースのページを構築してきました。

ホームページにアクセスすると、膨大な数のハイライトされたプロジェクトがリストされており、このライブラリが日常の環境でどのように使用されているかについて多くのインスピレーション/明確さを与えるはずです.

Three.js サンプルアニメーション

CodePen の CP Designer (@cpandya) による Pen Mesh Line Waves Background – THREE.js を参照してください。

Three.js 追加リソース

• GitHub グローブの構築方法
• Three.jsによるピクセル歪み効果

#2 – Anime.js

Julian Garnier の Anime.js は、アニメーションを Web ベースのプロジェクトに統合するためのおそらく 2 番目に有名なライブラリです。 その人気は、CSS、SVG、および DOM 要素をアニメーション化するプロセスを高速化するツールが組み込まれていることに起因しています。

たとえば、 @keyframesを自分で記述するのではなく、特定の CSS セレクターをターゲットにしてから、JavaScript を介して洗練されたアニメーション ロジックを適用できます。

 anime({ targets: '.staggering-axis-grid-demo .el', translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}), translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}), rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}), delay: anime.stagger(200, {grid: [14, 5], from: 'center'}), easing: 'easeInOutQuad' });

上記のスニペットだけで、次のような効果を作成できます。

これを CSS で行う場合は、個々のグリッド ブロックを選択し、個別のロジックを記述する必要があります。 それは非現実的であるだけでなく、大変な作業でもあります。 Anime.js のドキュメント ページには、似たような例がたくさんあります。 また、以下のデモではさらに一歩進んで、このライブラリを最新のフロントエンド開発で使用する方法を紹介しています。

Anime.js サンプルアニメーション

Julian Garnier (@juliangarnier) による CodePen の Pen anime.js ロゴ アニメーションを参照してください。

Anime.js 追加リソース

• Anime.js チュートリアル – 10 分でわかる JavaScript アニメーション エンジン
• Anime.js を使用したユーザー インターフェイス アニメーション

#3 – ポップモーション

Popmotion は、TypeScript で記述された低レベルのアニメーション ライブラリです。 これは、React プロジェクトで使用される人気のある Framer Motion (この記事に記載されています) ライブラリを強化するライブラリでもあります。 こだわりがないので、Popmotion を使用して、使用したい追加関数を作成することでカスタム エフェクトを統合できます。

名前が示すように、Popmotion は、さまざまなモーション ベースのアニメーションを使用してユーザー インターフェイス要素をアニメーション化するのに特に適しています。 これには、イージング、スプリング、キーフレーム、およびより複雑な遷移効果などの効果が含まれます。 以下の例は、コンポーネント要素のアニメーション効果の実用的なアプリケーションをうまく紹介しています。

ポップモーション サンプルアニメーション

CodePen の Arden (@aderaaij) による Pen Popmotion デモを参照してください。

Popmotion 追加リソース

• React と Popmotion.io でパンケーキ アルゴリズムを視覚化する
• popmotion を使用して、angular アプリにスプリング アニメーションを追加する

#4 – mo.js

Mo.js はモーション グラフィックスに重点を置いており、自己完結型のプロジェクトに実装できるだけでなく、React などのフレームワークと組み合わせて実装できるシンプルなコード構造を提供することに優れています。

また、Mo.js には独自の宣言型 API が付属しているため、アニメーションの各ステップを制御できます。 これには、達成したいことのロジックだけでなく、そこに到達する方法も定義することが含まれます。 ライブラリには、視覚的にリッチなユーザー エクスペリエンス向けに調整された、事前に作成されたコンポーネントとサンプルが含まれています。

サンプル スニペットを次に示します。

 const travelCircleExpand = new mojs.Shape({ fill: COLORS.BLACK, radius: 126, scale: { .1: 1 }, opacity: { 0 : 1 }, easing: 'cubic.out', duration: 400, isForce3d: true, isTimelineLess: true, });

ご覧のとおり、多くのロジックが事前定義されています。 そのため、独自のアイデアを思い付く必要はなく、提供されたプロパティに注意して、独自の方法を構築できます。 ドキュメントのチュートリアル セクションには、実用的なアプリケーションのかなりの数の例があり、特に日常の Web ページ要素に非常に小さいが意味のあるアニメーションを追加する効果があります。

mo.js サンプルアニメーション

CodePen の Mike Quinn (@mprquinn) による mo.js を使用した Pen Link Hover Effects を参照してください。

mo.js 追加リソース

• React で MoJS を使用する方法
• MoJS を理解する

#5 – p5.js

p5.j​​s は、Processing の JavaScript 実装であり、ビジュアル アーティストによる使用を目的とした別の「言語」です。 これまで見てきたいくつかの例とは異なり、p5.js はユニバーサル アニメーション ライブラリであり、実用的なアプリケーションだけでなく、より堅牢で複雑なプロジェクトにもソリューションを提供します。 これには、2D および 2D 効果の完全なサポートが含まれます。

Web サイトのプロジェクトで p5.js を使用する限り、このライブラリーは深い創造性への道を開きます。 たとえば、煙幕、アニメーション化された樹木、ユーザーが操作できるデータベースのランディング ページなどの効果をすばやくブートストラップできます。

すべての描画を自分で行う必要がありますが、p5.js で利用できるリソースの数を考えると、始めるのはそれほど難しくないことがわかると思います。 そして、言うまでもなく、これらのプロジェクトの背後にあるコミュニティは非常に関与しています.

p5.j​​s サンプルアニメーション

ペン P5.JS ツイスト アンド ターンを参照してください。 CodePen の Sdsmnc (@supastrocat) による。

p5.j​​s 追加リソース

• 処理と p5.js
• p5.j​​s の夕日と流れ星

#6 – モーション

React は非常に人気が高いため、独自のアニメーション ライブラリを用意するのは理にかなっています。 Framer Motion には、React 開発者がアニメーション化されたコンポーネントを構築するプロセスを簡素化できるビルド済みの API が付属していますが、CSS とその独立したアニメーション プロパティを学習する必要があるというハードルの一部も軽減されます。 そして、それを扱うのはとても簡単です。

スニペットの例:

 import { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} /> )

Framer のアニメーションは、 motionおよびanimateプロパティによって定義されます。 これにより、コンポーネント全体とその内部要素を選択して、カスタム アニメーション ロジックで強化できます。 リソース セクションにある Nefe Emadamerho-Atori のSmashingの記事は、Framer Motion がどのように機能するかを理解するための出発点として最適です。

モーション例のアニメーション

CodePen の codebro (@codebro) による Pen Laser Sight Button を参照してください。

モーションの追加リソース

• Framer Motion の紹介
• Framer Motion によるレスポンシブ アニメーション

#7 - GSAP

最近、GSAP のアートが Twitter で共有されているのをよく見かけます。 しかし、それは驚くべきことではありません。 クリエイティブなプロジェクトで見られる多くのアニメーションや動的効果は、堅牢な GSAP エンジンのおかげで可能になりました。

ライブラリはパフォーマンスが最適化されているだけでなく、お気に入りのテクノロジとの互換性も高いです。 これには、React や Vue などのフレームワークだけでなく、jQuery などのライブラリも含まれ、モバイルおよび古いWeb ブラウザーのサポートが追加されています。

GSAP は実質的にあらゆる種類の Web 要素 (CSS から Canvas、DOM オブジェクトまで) を照会してアニメーション化できるため、スピナー効果のような単純なものに使用することも、全力を尽くして真に動的な Web サイト体験を構築することもできます。

Showcaseセクションには、開発者が取り組んだ何百ものサンプル プロジェクトがあります。 両方のインスピレーションを得るためだけでなく、このライブラリで何が可能かを確認するためにもチェックしてください。

GSAP サンプルアニメーション

CodePen の Hyperplexed (@Hyperplexed) による Pen Hulu Originals Intro を参照してください。

GSAP 追加リソース

• GSAP による素晴らしいアニメーション技術
• 精巧なウェブサイト アニメーション シーケンスの作成 – GSAP 3 チュートリアル

#8 – Paper.js

Paper.js は、ベクター グラフィックスのアニメーション化に重点を置いたアニメーション ライブラリです。 このアプローチにより、静的効果だけでなく、インタラクティブで動的な体験も可能になります。 特に、Paper.js は、ユーザーがオブジェクトをドラッグして再配置し、カスタム入力を提供できるアニメーション プロジェクトで人気があります。

オブジェクトはレイヤーごとに分類でき、各レイヤーにはカスタム アニメーション仕様があります。 これは、複雑な構造で作業する場合に便利で、ユーザーが要求しない限り、特定のレイヤーを削除/無効にすることができます。

Paper.js サンプル アニメーション

CodePen の Fiorald Ismaili (@Fiorald) による Pen Filling Glasses – Paper.js を参照してください。

Paper.js のその他のリソース

• Paper.js ベクター消去
• Paper.js の Wave

#9 - Web アニメーション

このライブラリは、Web Animation API の直接の JavaScript ポートです。 このライブラリはElement.animate()仕様と直接統合されているため、通常は CSS ロジックを使用して記述されたアニメーション機能を使用できます。 著者たちは次のように説明しています。

「ネイティブでサポートしていないブラウザで Web アニメーション機能を提供する、Web アニメーション API の JavaScript 実装。 ネイティブ実装が利用可能になると、ポリフィルはネイティブ実装にフォールバックします。」

Web アニメーション サンプル アニメーション

CodePen の Sam Thorogood (@samthor) による Pen Imperative Animations を参照してください。

Web アニメーションの追加リソース

• Web アニメーション API – Web API | MDN
• Web アニメーション レベル 2 | W3C

#10 – プロトン

パーティクル エフェクトは、最新の Web デザインのトレンドにおいて間違いなく重要な役割を果たしています。 デザイナーは、背景効果だけでなく、興味深いトランジション、さらにはクリエイティブ プロジェクトのプレゼンテーションにもそれらを実装します。 Proton ライブラリは、クリエイティブなパーティクル エフェクトをすばやくスケーリングするというニーズに合わせて特別に調整されています。

スパーク エフェクトや衝突ベースのインタラクションの作成などを行うことができますが、テキストを新しいエキサイティングなアニメーション エクスペリエンスに変換することもできます。

陽子の例のアニメーション

CodePen の matsu7089 (@matsu7089) による Pen my-emitter を参照してください。

プロトンの追加リソース

• プロトンエンジンの例
• パーティクル バックグラウンドの React コンポーネント

概要

これらのライブラリの多くの良い点は、それらがしばらく前から存在していることです。 そのため、例を見つけるのは比較的簡単ですが、特定のコンテキストで特定のライブラリを使用する方法に関する詳細なガイドも見つけることができます。

特に、リアルタイム データまたはユーザー ベースの入力を実装するアニメーションに取り組んでいる場合は、達成しようとしている目標の種類を知ることが役立ちます。

つまり、最高というものはありません。 各ライブラリには、独自の長所と短所があります。 私にとっては、考えられるほぼすべてのフロントエンド プロジェクトで使用できるように適切に最適化されているため、おそらく GSAP を使用するでしょう。

しかし、野心的ではないプロジェクトを行っている場合は、Popmotion のようなライブラリで十分です。