概要

Next.jsでのアニメーション実装は、アプリケーションの見栄えを大幅に向上させます。特に、Framer Motionを活用すれば、シンプルかつパフォーマンスに優れたアニメーションを容易に実現できます。本記事では、Framer Motionを使用してページ遷移やコンポーネントのアニメーションを実装する手順とテクニックについて説明します。

Framer Motionの導入

インストール

まず、Framer Motionをインストールします。以下のコマンドでセットアップが完了します。

npm install framer-motion

または、yarnを使用している場合は以下のコマンドでインストールできます。

yarn add framer-motion

基本的な使い方

Framer Motionでは、motionコンポーネントを使用してアニメーションを実装します。例えば、以下のようにmotion.divで要素をラップし、initial、animate、exitプロパティを使って、要素がマウント・アンマウントされる際のアニメーションを設定します。

import { motion } from 'framer-motion';
const MyComponent = () => (
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 0.5 }}
  >
    <p>アニメーション付きの要素</p>
  </motion.div>
);

initialプロパティは初期状態を、animateはアニメーション中の状態を、exitはアンマウント時の状態をそれぞれ定義します。transitionプロパティでアニメーションのスピードやタイミングを制御できます。

ページ遷移アニメーションの実装

AnimatePresenceを使用したページ遷移

AnimatePresenceコンポーネントは、Reactコンポーネントのマウントとアンマウントにアニメーションを適用するために使用します。これにより、ページ遷移時に滑らかなアニメーションを実現できます。 以下は、_app.tsxファイルでAnimatePresenceを使用してページ遷移アニメーションを実装する例です。

import { AnimatePresence } from 'framer-motion';
import { useRouter } from 'next/router';
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
  const router = useRouter();
  return (
    <AnimatePresence exitBeforeEnter>
      <Component key={router.asPath} {...pageProps} />
    </AnimatePresence>
  );
}
export default MyApp;

各ページのアニメーション設定

ページ自体にはmotion.divを適用し、マウント・アンマウント時のアニメーションを設定します。

import { motion } from 'framer-motion';
const Page = () => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    exit={{ opacity: 0, y: -20 }}
    transition={{ duration: 0.5 }}
  >
    <h1>ページタイトル</h1>
    <p>ページ内容</p>
  </motion.div>
);
export default Page;

これにより、ページが遷移する際にふわっとした動きを追加することができます。

その他のアニメーションテクニック

スクロール連動アニメーション

Framer Motionでは、スクロール連動型のアニメーションも簡単に実装できます。これにより、ユーザーのスクロールに合わせて要素がフェードイン・フェードアウトするようなエフェクトを追加できます。

import { motion, useScroll } from 'framer-motion';
const ScrollComponent = () => {
  const { scrollYProgress } = useScroll();
  return (
    <motion.div style={{ scaleX: scrollYProgress }}>
      スクロールに応じて拡大・縮小
    </motion.div>
  );
};

まとめ

Framer Motionは、Next.jsでリッチなアニメーションを簡単に実装できる強力なツールです。ページ遷移や要素のアニメーションを活用することで、アプリケーションのユーザー体験が向上します。初期設定もシンプルで、柔軟にカスタマイズ可能なため、様々なプロジェクトに適応できます。Framer Motionを使って、より魅力的なUIを実現してみてください。