Framer Motionを使用したReactアニメーションの実装方法

インストールとセットアップ: まず、Framer MotionをReactプロジェクトにインストールします。以下のコマンドを使用して、必要なパッケージを追加します。

npm install framer-motion

または

yarn add framer-motion

インストールが完了したら、Reactコンポーネント内でFramer Motionをインポートします。

import { motion } from 'framer-motion';

基本的なアニメーションの作成: Framer Motionでは、要素のアニメーションをコンポーネントのプロパティとして定義します。以下は、要素のフェードインアニメーションの例です。

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 1 }}
>
  ここに要素のコンテンツを記述します。
</motion.div>

上記の例では、initialプロパティで初期スタイルを指定し、animateプロパティでアニメーション後のスタイルを指定しています。また、transitionプロパティでアニメーションの時間を指定しています。

複数のアニメーションの連携: Framer Motionでは、複数の要素やプロパティのアニメーションを連携させることができます。以下は、要素の移動と回転を組み合わせたアニメーションの例です。

<motion.div
  initial={{ x: -100, rotate: -180 }}
  animate={{ x: 0, rotate: 0 }}
  transition={{ duration: 1 }}
>
  ここに要素のコンテンツを記述します。
</motion.div>

この例では、xプロパティで要素の水平方向の移動を指定し、rotateプロパティで要素の回転を指定しています。

イベントと連携したアニメーション: Framer Motionでは、イベントと連携させてアニメーションを制御することもできます。以下は、ボタンをクリックした際に要素が拡大するアニメーションの例です。

import { useState } from 'react';
...
const [isExpanded, setIsExpanded] = useState(false);
...
<motion.div
  initial={{ scale: 1 }}
  animate={{ scale: isExpanded ? 2 : 1 }}
  transition={{ duration: 0.5 }}
>
  ここに要素のコンテンツを記述します。
</motion.div>
<button onClick={() => setIsExpanded(!isExpanded)}>ボタン</button>

この例では、scaleプロパティを使用して要素の拡大を制御しています。isExpandedという状態変数を使用し、ボタンのクリックイベントで状態を切り替えています。

以上がFramer Motionを使用したReactアニメーションの基本的な実装方法の例です。さらに詳細な使い方や高度な機能については、公式のドキュメントやチュートリアルを参照してください。