簡単な React アニメーション: フレーマー モーションのガイド

TL;DR: このブログ投稿では、React アニメーション ライブラリである Framer Motion を使用する包括的なガイドを提供します。モーション コンポーネント、バリアント、トランジションなどの重要な概念をカバーし、フェーディング ボタン、スライドイン サイドバー、ドラッグ可能なモーダル、カード フリップ アニメーションの作成の実践例を示します。

フロントエンド開発者としての私たちの最優先事項は、ユーザーの関心を維持する Web アプリケーションを作成することです。これは、インタラクティブなページを作成し、より良いユーザー エクスペリエンスを提供することで可能になります。

アニメーションによりページがインタラクティブになります。ユーザーをガイドし、インタラクションを興味深いものにします。ユーザーインタラクションやイベント、ページナビゲーションなど、ページ上の小さな視覚的な動きは、私たちのアクションに反応する生き物と対話しているような活気の感覚を与えます。

アニメーションとは、簡単に言うと、インタラクションや特定のイベントで時間の経過とともに要素のプロパティや寸法を更新することにより、要素を視覚的に変更する方法です。たとえば、アクションが進行中であることを示す読み込みインジケーター。

Web ページ上の要素をアニメーション化するには 2 つの方法があります (要素のプロパティを変更するには 2 つの方法)。

1. Animate.css などのライブラリは、CSS を通じて、HTML 要素に追加できる一連のアニメーション クラスを提供します。
2. Framer Motion のようなライブラリは、JavaScript を通じてコードを通じて実行時に DOM 要素のプロパティを操作します。

この記事では、アニメーション用の最も人気のあるライブラリの 1 つである Framer Motion について説明します。シンプルさと柔軟性を提供し、React のような最新のフロントエンド フレームワークで動作するように設計されています。

なぜフレーマーモーションなのか?

Framer Motion は、宣言構文を通じてトランジションや複雑なジェスチャーベースのインタラクションなどの単純なアニメーションを作成する、制作対応の React 用アニメーション ライブラリです。特徴:

• 使いやすさ: Framer Motion は、直感的な API とメソッドのおかげで、非常にシンプルで使いやすいです。
• 柔軟性: パン、ドラッグ、ピンチなどの複雑なアニメーションや、フェード、トランジションなどの単純なアニメーションを作成するために使用できます。
• パフォーマンス: モーション コンポーネントは React ライフサイクルの外でレンダリングされるため、パフォーマンスが最適化され、スムーズに実行され、シームレスなユーザー エクスペリエンスが保証されます。
• コミュニティとサポート: 広範なドキュメント、多数のサンプル セット、およびコミュニティによる優れた採用により、簡単に開始できます。

Framer Motion を始める

npm または yarn パッケージ マネージャーを使用して、Framer Motion ライブラリをプロジェクトに追加します。

npm install framer-motion

または

npm install framer-motion

依存関係が読み込まれたら、これをプロジェクトに組み込んでインタラクティブなアニメーションを作成できます。

yarn add framer-motion

基本的な概念

モーションコンポーネント:

Framer Motion には、120fps アニメーションを作成するためのモーション コンポーネントのリストが付属しています。これは、使用できる特別な React コンポーネントであるすべての HTML 要素 (motion.div など) と一般的な SVG 要素 (motion.square など) を含むジェスチャ サポートを提供します。

// On Client side
import { motion } from "motion/react"

// On Server-side 
import * as motion from "motion/react-client"

プロップと API:

Framer Motion は、アニメーションの動作を定義する initial、animate、exit などの API のリストを小道具として提供します。

<motion.div className="card" />

Initial プロパティはコンポーネントのマウント時に起動され、animate はコンポーネントの更新時に起動され、exit プロパティはコンポーネントのアンマウント時に起動されます。詳細については、完全な Framer Motion アニメーション ガイドを参照してください。

モーション コンポーネントは、パフォーマンスを向上させるために Reacts のライフサイクルやレンダリング サイクルから独立しています。したがって、再レンダリングをトリガーせずにスタイルを更新するモーション値を使用するのではなく、アニメーションの React 状態に依存する必要があります。

<motion.button
  initial={{opacity: 0}}
  animate={{opacity: 1}}
  transition={{duration: 1}}
  exit={{opacity: 0}}
>
  Click Me
</motion.button>

バリエーションには以下が含まれます:

• listVariants: リスト全体のアニメーション動作を定義します。起動時にプロパティにアクセスするプロップにバリアント値を渡します。 initial=”hidden” および animate=”visible”。 staggerChildren は、子要素が順番にアニメーションすることを保証します。
• itemVariants: リスト項目のアニメーション動作を定義します。
• motion.ul コンポーネントと motion.li コンポーネントはバリアントを継承して、調整されたアニメーションを作成します。

カスタム コンポーネント: React コンポーネントは、motion.create() 関数に渡すことでモーション コンポーネントに変換できます。

import { motion, useMotionValue } from "framer-motion";

const MotionState = () => {
  const xPosition = useMotionValue(0);

  useEffect(() => {
    // It won’t trigger a re-render on the component
    const interval = setInterval(() => {
    xPosition.set(xPosition.get() + 100);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <motion.div
   >



<p>In the previous example, the <strong>motion.div</strong> element will be translated by 100px on the x position (horizontally, translateX(100px)) at an interval of 1s.</p>

<p><strong>Variants:</strong> framer-motion provides support for the variants, which allows the reuse of animation configurations across multiple elements.<br>
</p>

<pre class="brush:php;toolbar:false">const AnimatedList = () => {
  const listVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
       opacity: 1,
       y: 0,
       transition: {
           staggerChildren: 0.2,
      },
    },
  };

  const itemVariants = {
      visible: { opacity: 1 },
    hidden: { opacity: 0 },
  };

  return (
    <motion.ul initial="hidden" animate="visible" variants={listVariants}>
    {[1, 2, 3].map((item) => (
        <motion.li key={item} variants={itemVariants}>
        Item {item}
        </motion.li>
    ))}
    </motion.ul>
  );
};

デフォルトでは、すべてのモーション プロップは React コンポーネントに渡すときにフィルターで除外されます。アニメーションはコンポーネントに適用されますが、React 内のプロパティにはアクセスできません。

モーション プロパティにアクセスするには、モーション コンポーネントの作成中にフラグ forwardMotionProps: true を渡します。

const ReactComponent = (props) => {
  return <button {...props}>ClickMe>/button>;
};

const MotionComponent = motion.create(ReactComponent);

const FadingButton2 = () => {
  return (
    <MotionComponent
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 3 }}
    >
    Click Me
    </MotionComponent>
  );
};

motion.create() 関数は、カスタム DOM 要素のモーション コンポーネントを作成する文字列も受け入れます。

const MotionComponent = motion.create(ReactComponent, {
  forwardMotionProps: true,
});

注: (useEffect) などの React ライフサイクル メソッドで motion.create() を使用しないでください。ライフサイクル メソッドが起動されるたびに新しいコンポーネントを作成します。

Framer Motion の仕組みとその API についてはよく理解できたので、一般的なアニメーションに Framer Motion を使用する方法の例をいくつか見てみましょう。

例

色褪せたボタン

npm install framer-motion

• initial: 要素がビューポートではない場合、ボタン opacity:0 の初期状態を設定します。
• animate: 要素がビューポート内にあるとき、ボタンの状態を opacity:1 に設定します。
• transition: アニメーションのトランジションを設定します。ボタンが opacity:0 から opacity:1 に移行するのに 1 秒かかります。
• exit: 要素がビューポートから出るときのボタンの状態を設定します。

exit プロパティは、AnimatePresence コンポーネントでラップされた場合にのみ有効になります。

yarn add framer-motion

AnimatePresence は、React コンポーネント ツリーから削除されるモーション コンポーネントである直接の子に影響します。

これは、ライフサイクル変更 (マウント、更新、アンマウント) でコンポーネントが更新されているときである可能性があります

// On Client side
import { motion } from "motion/react"

// On Server-side 
import * as motion from "motion/react-client"

そのキーが変化します

<motion.div className="card" />

子はリストに追加またはリストから削除されます。

<motion.button
  initial={{opacity: 0}}
  animate={{opacity: 1}}
  transition={{duration: 1}}
  exit={{opacity: 0}}
>
  Click Me
</motion.button>

スライドインサイドバー

import { motion, useMotionValue } from "framer-motion";

const MotionState = () => {
  const xPosition = useMotionValue(0);

  useEffect(() => {
    // It won’t trigger a re-render on the component
    const interval = setInterval(() => {
    xPosition.set(xPosition.get() + 100);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <motion.div
   >



<p>In the previous example, the <strong>motion.div</strong> element will be translated by 100px on the x position (horizontally, translateX(100px)) at an interval of 1s.</p>

<p><strong>Variants:</strong> framer-motion provides support for the variants, which allows the reuse of animation configurations across multiple elements.<br>
</p>

<pre class="brush:php;toolbar:false">const AnimatedList = () => {
  const listVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
       opacity: 1,
       y: 0,
       transition: {
           staggerChildren: 0.2,
      },
    },
  };

  const itemVariants = {
      visible: { opacity: 1 },
    hidden: { opacity: 0 },
  };

  return (
    <motion.ul initial="hidden" animate="visible" variants={listVariants}>
    {[1, 2, 3].map((item) => (
        <motion.li key={item} variants={itemVariants}>
        Item {item}
        </motion.li>
    ))}
    </motion.ul>
  );
};

トランジション プロップ はアニメーションにおいて重要な役割を果たします。これらは、時間の経過とともにアニメーションがどのように進行するかを制御します。 Framer Motion は、スムーズなアニメーションのための複数のプロパティをサポートしています。

• duration: アニメーションの長さ (秒単位)
• 遅延: アニメーションの開始を遅延します (秒単位)
• ease: アニメーションがどのように進行するかを規定する一連のイージング関数 ('ease'、'easeIn'、'easeInOut')

ドラッグ可能なモーダル

フレーマー モーションは、ホバー、タップ、ドラッグなどのジェスチャによるインタラクティブ アニメーションもサポートしています。

const ReactComponent = (props) => {
  return <button {...props}>ClickMe>/button>;
};

const MotionComponent = motion.create(ReactComponent);

const FadingButton2 = () => {
  return (
    <MotionComponent
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 3 }}
    >
    Click Me
    </MotionComponent>
  );
};

• ページ: 子コンポーネントをモーション アニメーションでラップします。
• Initial、 animate、 & exit: の出現と消滅を処理します。ページナビゲーションのコンポーネント。

結論

読んでいただきありがとうございます! Framer Motion は、React コンポーネントに魅力的なアニメーションを簡単に追加できる強力なアニメーション ライブラリです。これは、複雑なジェスチャベースのインタラクションを処理する単純なアニメーションを作成するのに役立ちます。 Framer Motion には、React アプリケーションにインタラクションを追加する無限の可能性があります。

既存のお客様は、Essential Studio® の新しいバージョンをライセンスとダウンロードのページから入手できます。初めての方は、30 日間の無料トライアルにサインアップして機能をお試しください。

サポート フォーラム、サポート ポータル、またはフィードバック ポータルを通じてお気軽にお問い合わせください。私たちはいつでもあなたをサポートします!

関連ブログ

• スムーズなドキュメント処理を実現するトップ 5 の React PDF ビューア
• 2025 年の React チャート ライブラリ トップ 5
• Vite.js: より高速なフロントエンドを構築
• React 用 RxJS: リアクティブ状態のロックを解除する

以上が簡単な React アニメーション: フレーマー モーションのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。