簡単な React アニメーション: フレーマーモーションのガイド-jsチュートリアル-php.cn

Effortless React Animation: A Guide to Framer Motion

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

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

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

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

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

Animate.css などのライブラリは、CSS を通じて、HTML 要素に追加できる一連のアニメーションクラスを提供します。
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 日間の無料トライアルにサインアップして機能をお試しください。

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