はじめに
先日、React の勉強会で、Framer Motion によるアニメーション実装について取り上げました 🫐
ユーザーの操作や画面の切り替え時に、適切なアニメーションを活用することで、
ユーザー体験を向上させることができます！
今回は、Motion（旧 Framer Motion）について調査したので、基礎的な内容をまとめました！
時間の節約になれば、嬉しいです 🙌
Framer Motion とは？
Framer Motion は、React アプリケーションに洗練されたアニメーションを、簡単に実装できるライブラリです！
特徴は、：
- 宣言的な API: JSX 内で直感的にアニメーションを定義できます
- 再利用可能なアニメーション: トランジションやジェスチャーを簡単に再利用できます
- アクセシビリティ: アクセシビリティを考慮したアニメーションが実装可能
- パフォーマンス最適化: Motion 側で提供されたプロパティを使うことで、スムーズなアニメーションを実現します
RSC にも対応しています 👍
Motion？ Framer Motion、、？
Framer Motion は、
元々 React 向けのアニメーションライブラリとして公開されました！
しかし、上記のブログの通りですが、
2024 年 11 月に、Motion One（バニラ JavaScript 向けライブラリ）を統合し、「Motion」という名前で独立したプロジェクトとして生まれ変わりました！
なので、新しい書き方では、
インポート方法が import { motion } from "motion/react" に変更されています！
Motion の基本的な使い方
Motion の中心となるのは <motion /> コンポーネントです。
これは通常の HTML/SVG 要素にアニメーション機能を追加したものです。
例えば、通常の <div> の代わりに <motion.div> を使うことで、その要素にアニメーション機能を追加できます！
基本的なアニメーション
Motion では、animate プロパティを使って要素のアニメーションを定義します：
<motion.div animate={{ scale: 2 }} />
上記のコードでは、要素が 2 倍のサイズにアニメーションします。
簡単ですね 😎
アニメーションの設定
transition プロパティを使ってアニメーションの動きをカスタマイズできます：
<motion.div
animate={{ scale: 2 }}
transition={{ duration: 2, ease: "easeOut" }}
/>
ジェスチャー認識
上記のProps一覧で確認できる通り、
Motion は、ホバー、タップ、フォーカス、ドラッグなどのジェスチャーを簡単に実装できます：
<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} />
基本的な使い方のまとめ
基本的な使い方は、以下のとおりです！
- 通常の HTML 要素を
motion.接頭辞付きのコンポーネントに書き換える -
animate: アニメーション先の状態- CSS プロパティを指定
-
transition: アニメーションの挙動- 持続時間、イージングなど
- ジェスチャーハンドラー
-
whileHover: ホバー時 -
whileTap: タップ/クリック時 -
whileDrag: ドラッグ中
-
宣言的に、簡単にアニメーションを付与できるのが、Motion の魅力ですね 😉
React への Motion の導入手順
さて、基本的な使い方を理解したところで、
React への導入を確認してみましょう！
1. インストール
npm または yarn を使ってインストールします：
# npm
npm install motion
# yarn
yarn add motion
Framer Motion から、Motion へ変更されたので、
インストール方法が変わっていることに、注意してください！
以前は、：
# 以前のインストール方法
npm install framer-motion
2. モーションコンポーネントのインポート
// React用
import { motion } from "motion/react";
// React Server Components用
import * as motion from "motion/react-client";
3. 基本的な実装例
以下は、クリックでアニメーションするボタンの例です：
import React, { useState } from "react";
import { motion } from "motion/react";
function AnimatedButton() {
const [isOpen, setIsOpen] = useState(false);
return (
<motion.button
onClick={() => setIsOpen(!isOpen)}
animate={{ rotate: isOpen ? 180 : 0 }}
transition={{ duration: 0.5 }}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
Click me
</motion.button>
);
}
export default AnimatedButton;
4. レイアウトアニメーションの例
レイアウト変更をスムーズにアニメーションさせる例：
import React, { useState } from "react";
import { motion } from "motion/react";
function ExpandingCard() {
const [isExpanded, setIsExpanded] = useState(false);
return (
<motion.div
layout
onClick={() => setIsExpanded(!isExpanded)}
style={{
backgroundColor: "lightblue",
borderRadius: 8,
padding: 20,
width: isExpanded ? 300 : 100,
cursor: "pointer",
}}
transition={{ duration: 0.5 }}
>
<motion.h2 layout>
{isExpanded ? "クリックして閉じる" : "もっと見る"}
</motion.h2>
{isExpanded && (
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.3 }}
>
展開されたコンテンツがここに表示されます。
</motion.p>
)}
</motion.div>
);
}
export default ExpandingCard;
アニメーションさせたい HTML 要素に対し、motion.を追加すれば、
あとは、アニメーションを記述できるようになります！！
なぜ Motion（旧 Framer Motion）なのか？
個人的には、Motion（旧 Framer Motion）の魅力は、
シンプルさにあると考えています！
ここまでで紹介したとおり、：
- 基本的に
motion.を付与するだけで、簡単にアニメーションを記述できる - クライアントサイド/サーバーサイド両方に対応している
- 宣言的な React の作法とも相性が良い
基本を押さえてしまえば、意外と簡単にリッチなアニメーションを実装できるので、便利ですね！
もちろん、アニメーションの詳細に関しては、
生成 AI を利用することもできます！
おわりに
最後まで読んでいただき、ありがとうございます 🥳
下記の、React ハンズオン勉強会での、振り返りのような記事ですが、
少しでも参考になれば、嬉しいです！
そして、もし、間違いや補足情報などがありましたら、
ぜひコメントを追加してください！
Happy Hacking :)
参考
Discussion