ニュース

May 12, 2023

Framer Motion を使用して React アプリにアニメーションを追加する方法

Scopri come aggiungere semplici animazioni alle tue app React con una codifica minima.

最小限のコーディング作業で簡単なアニメーションを React アプリに追加する方法を学びます。

アニメーションは、ほとんどすべての最新の Web アプリケーションの重要な部分です。 これは、正しく理解するのが最も難しい部分の 1 つでもあります。

Framer Motion は、コンポーネントを簡単にアニメーション化できるようにする React 用に構築されたライブラリです。

Framer Motion はアニメーションにモーション コンポーネントを使用します。 各 HTML/SVG 要素には、ジェスチャとアニメーションの小道具を持つ同等のモーション コンポーネントがあります。 たとえば、通常の HTML div は次のようになります。

一方、Framer Motion に相当するものは次のようになります。

モーションコンポーネントは、アニメーション化する値が変化したときにアニメーションをトリガーするプロップ。 複雑なアニメーションの場合は、アニメイトを使用するスコープ付き参照を持つフック。

プロジェクトで Framer Motion を使用する前に、Node.js ランタイムと Yarn パッケージ マネージャーをコンピューターにインストールし、React とは何か、その使用方法を理解する必要があります。

このプロジェクトのソース コードは、GitHub リポジトリから表示およびダウンロードできます。 使用スターターファイルこのチュートリアルに従うスターター テンプレートとしてブランチを作成するか、最終ファイル完全なデモのブランチ。 このライブ デモを通じてプロジェクトの動作を確認することもできます。

ターミナルを開いて次を実行します。

開けるときローカルホスト:5173ブラウザでは次のように表示されます。

これで、最初の単純なアニメーション、つまりホバーすると拡大し、カーソルを離れると縮小するボタンを作成できるようになりました。

を開きますsrc/App.jsxコードエディターでファイルを作成します。 このファイルには、React フラグメントを返す機能コンポーネントが含まれています。 インポートするボタンコンポーネントを作成してレンダリングし、文章小道具:

次に、ボタン.jsxファイルを作成してインポートするモーションからのユーティリティフレーマーモーション:

さて、通常のものと交換してくださいボタン要素を含むモーション。[要素]成分。 この場合は、モーションボタン成分。

次に、を追加しますホバーしながらジェスチャー prop を使用して、ユーザーがボタンの上にマウスを置いたときに Framer Motion がアニメーション化する値のオブジェクトを渡します。

マウス ポインタをボタンの上または外に移動すると、ボタンがアニメーション化されます。

なぜこのデモでは代わりに CSS アニメーションを使用しないのか疑問に思われるかもしれません。 Framer Motion は React 状態と統合され、一般的によりクリーンなコードになるため、CSS よりも優れています。

次に、より複雑なこと、モーダルのアニメーションを試してみましょう。 で背景.jsx、モーションユーティリティをインポートし、機能コンポーネントを作成しますオンクリックそして子供たち小道具。 を返すモーション.divクラス「backdrop」を持つコンポーネントとオンクリックJSX のリスナー。

次に、次の 3 つの小道具を追加します。イニシャル、アニメーション化する、そして出口 。 これらのプロパティは、コンポーネントの元の状態、コンポーネントがアニメーション化されるべき状態、およびアニメーション後のコンポーネントの状態をそれぞれ表します。

追加オンクリックそして子供たちの小道具モーション.divそして、遷移時間を 0.34 秒に設定します。

の背景コンポーネントは、モーダル成分。 背景をクリックするとモーダルが閉じます。 でモーダル.jsx、 輸入モーションそして背景コンポーネント。 デフォルトの機能コンポーネントは props を受け入れます。閉じるモーダルそして文章 。 バリアント変数をオブジェクトとして作成します。

バリアント オブジェクトを指す "variants" プロップを持つ Backdrop コンポーネントでラップされた motion.div コンポーネントを返します。 バリアントは、コンポーネントが取り得る事前定義されたアニメーション状態のセットです。

次に、ユーザーがボタンをクリックしたときにモーダルを表示する機能を追加する必要があります。 を開きますApp.jsxファイルを作成してインポートする使用状態反応フックとモーダル成分。

次に、モーダル開くデフォルト値が に設定された状態間違い。

次に関数を定義します閉じるモーダルそれはモーダル開くは誤りです。

React フラグメントの先頭で、条件付きでレンダリングします。モーダルコンポーネントを指定し、適切な値を渡します文章closeModal prop を使用して prop を実行します。

それから、2番目に、セクション要素、レンダリングボタンmodalOpen を false に設定する onClick イベント ハンドラーを持つ要素。

React が終了アニメーションなしで Modal コンポーネントを DOM からアンマウントしていることに気づくかもしれません。 それを修正するには、アニメイトプレゼンス成分。 AnimatePresence をインポートするフレーマーモーション。

次に、Modal コンポーネントを AnimatePresence コンポーネントでラップし、イニシャルprop を false に設定し、モード「待つ」こと。

AnimatePresence コンポーネントを使用すると、React が DOM からアンマウントする前に終了アニメーションを完了できます。

Framer Motion は、whileInView小道具。 を開きますスクロール要素.jsxをインポートし、モーションユーティリティ。 変化ディビジョンにモーション.divクラス「scroll-element」を使用します。

のビューポートprop は設定するオブジェクトを指します。一度に真実 。 次に、App.jsxファイルをインポートするスクロール要素コンポーネントを作成し、整数値を保持する変数scrollElementCountを定義します。

最後にセクション要素で、次のように定義された特定の長さの配列を作成します。スクロール要素数配列の各要素をマップし、インデックスに基づいて一意のキーを持つコンポーネントを生成します。私。

ここでブラウザに戻り、要素をスクロールして表示するとアニメーションが表示されるはずです。

Framer Motion は、市場に出ている唯一のアニメーション ライブラリではありません。 Framer Motion の動作方法が気に入らない場合は、React Spring などの他のライブラリを試してみてください。

CSS アニメーションを使用することもできます。CSS アニメーションはすべての最新ブラウザでネイティブにサポートされていますが、関連するテクニックの学習と設定は難しい場合があります。

すべてのユーザーは、Web アプリケーションを使用するときに非常にスムーズなエクスペリエンスを期待します。 アニメーションのない Web サイトやアプリケーションは静的で反応が鈍いと感じます。 アニメーションを使用すると、ユーザーが特定のアクションを実行したときにフィードバックを伝えることができるため、ユーザー エクスペリエンスが向上します。

David Uzondu は 3 年以上の経験を持つ JavaScript 開発者です。 彼は暇なときに書くのが大好きです。