見出し画像
Photo by pansansui

【React × Framer Motion】たった数行でアプリが劇的に美しくなる！初心者でもできる「心地よいアニメーション」実装術

関野泰宏


66日目は「無限スクロール」で、大量のデータをシームレスに見せる高度なUXを学びました。

本日67日目は、アプリ全体の印象を「カクカクしたシステム」から「心地よいプロダクト」へと昇華させる「Framer Motionを使ったアニメーション」 を学習します。Reactと非常に相性が良く、直感的に動きをつけられる魔法のライブラリに触れてみましょう。


はじめに：アニメーションは「飾り」ではない

アニメーションの本当の目的は、画面の切り替わりや要素の変化に「意味」を持たせ、ユーザーの視線をスムーズに誘導することにあります。

  • 何かが消えたとき：どこへ行ったのか？

  • 新しいリストが出たとき：どこから来たのか？

これを視覚的に伝えることで、ユーザーはストレスなくアプリを操作できるようになります。今日は、Reactで最も人気の高いアニメーションライブラリ Framer Motion を紹介します。

💡 1. Framer Motion の基本：motion コンポーネント

通常の div や button の代わりに motion.div を使うだけで、驚くほど簡単にアニメーションを設定できます。

💻 実装例：ふわっと現れるカード

import { motion } from 'framer-motion';

export const FadeInCard = ({ children }) => (
  <motion.div
    initial={{ opacity: 0, y: 20 }} // 💡 アニメーション開始時
    animate={{ opacity: 1, y: 0 }}   // 💡 アニメーション終了時
    transition={{ duration: 0.5 }}  // 💡 かける時間
    className="p-4 bg-white shadow rounded"
  >
    {children}
  </motion.div>
);

💡 2. 要素が消える時を制御する：AnimatePresence

Reactで最も難しい「コンポーネントがDOMから消える瞬間のアニメーション」も、AnimatePresence を使えば一瞬で解決します。

import { motion, AnimatePresence } from 'framer-motion';

export const List = ({ items }) => (
  <ul>
    <AnimatePresence>
      {items.map((item) => (
        <motion.li
          key={item.id}
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: 20 }} // 💡 削除される時の動き
          layout // 💡 他の要素が詰まる動きも自動でアニメーション化！
        >
          {item.text}
        </motion.li>
      ))}
    </AnimatePresence>
  </ul>
);

💡 3. 実装のコツ：やりすぎないこと

アニメーションは隠し味と同じです。

  1. 速度: 0.2秒〜0.5秒程度に収める。長すぎると「遅いアプリ」に感じられます。

  2. 物理法則: spring（バネ）のような動きを使うと、より人間味のある自然な動きになります。

📝 67日目のまとめと課題

✅ 本日の習得ポイント

  • motionコンポーネント: initial（初期）、animate（実行）を指定するだけで動く。

  • AnimatePresence: 要素が「消える」ときの貴重な演出タイミングを逃さない。

  • layoutプロップ: リストの並べ替えなどを自動で滑らかにする魔法の属性。

📝 67日目の課題

  1. 自分のアプリの「トースト通知」や「モーダル窓」に、ふわっと浮き上がるようなアニメーションを追加してみましょう。

  2. Framer Motionの Examples を見て、「これいいな！」と思う動きを一つ探してみてください。


もっとReactを学びたい人はここから！


#エンジニアと繋がりたい #プログラミング学習 #React #100DaysOfCode #今日の積み上げ #FramerMotion #Webデザイン

いいなと思ったら応援しよう！