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

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

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

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

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

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

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

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

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

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

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 プロパティはコンポーネントのアンマウント時に起動されます。詳細(xì)については、完全な Framer Motion アニメーション ガイドを參照してください。

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

<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 コンポーネントはバリアントを継承して、調(diào)整されたアニメーションを作成します。

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

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 內(nèi)のプロパティにはアクセスできません。

モーション プロパティにアクセスするには、モーション コンポーネントの作成中にフラグ 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() 関數(shù)は、カスタム DOM 要素のモーション コンポーネントを作成する文字列も受け入れます。

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

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

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

例

色褪せたボタン

npm install framer-motion

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

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>
  );
};

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

• duration: アニメーションの長さ (秒?yún)g位)
• 遅延: アニメーションの開始を遅延します (秒?yún)g位)
• ease: アニメーションがどのように進(jìn)行するかを規(guī)定する一連のイージング関數(shù) ('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: の出現(xiàn)と消滅を処理します。ページナビゲーションのコンポーネント。

結(jié)論

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

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

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

関連ブログ

• スムーズなドキュメント処理を?qū)g現(xiàn)するトップ 5 の React PDF ビューア
• 2025 年の React チャート ライブラリ トップ 5
• Vite.js: より高速なフロントエンドを構(gòu)築
• React 用 RxJS: リアクティブ狀態(tài)のロックを解除する

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