🌊
Reactで動きを出そう！Framer Motion入門(1)
Reactで動きを出そう！Framer Motion入門(1)
はじめに
この記事では、Reactのアプリケーションにアニメーションを加える方法として、Framer Motionというライブラリの基本的な使用方法について解説します。Framer Motionは、直感的で簡単に扱えることが特徴です。
Framer Motionの特徴
Framer Motionは、React専用に作られたアニメーションライブラリです。宣言的な記法でアニメーションを設定できるため、Reactのコンポーネント指向と非常に相性が良いです。
基本的な使い方
ステップ1: インストール
Framer Motionを利用するにはまず、npmを通じてインストールします。
npm install framer-motion
ステップ2: コンポーネントの作成
Framer Motionを使うには、motionをインポートし、HTMLタグの代わりにmotionプレフィックスを使用します。
import { motion } from 'framer-motion';
function MyComponent() {
return <motion.div animate={{ x: 100 }} />
}
この例では、divが100ピクセル右に動きます。
簡単なアニメーション例
フェードイン
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
/>
このコードは、透明度を0から1に変化させることでフェードインを実現します。
まとめ
Framer Motionは、Reactでアニメーションを加える際の強力なツールです。本記事では、基本的な使い方と簡単なアニメーション例を紹介しました。このライブラリを使って、アプリケーションに動きを加えてみましょう
参考
Discussion