AAUI
✦ مستندات رسمی AAUI

آموزش کاملFramer Motion

Framer Motion یکی از محبوب‌ترین کتابخانه‌های انیمیشن برای React است که به شما اجازه می‌دهد به‌سادگی انیمیشن‌های نرم، حرفه‌ای و مدرن بسازید. این کتابخانه به‌شدت در پروژه‌های React و Next.js استفاده می‌شود و تقریباً در اکثر رابط‌های کاربری مدرن حضور دارد.

شروع آموزشمشاهده مثال‌ها

Framer Motion چیست؟

Framer Motion یک کتابخانه قدرتمند برای ساخت انیمیشن در React است. این کتابخانه توسط تیم Framer ساخته شده و هدف آن ساده‌کردن ساخت انیمیشن‌های پیچیده در رابط کاربری است.

⚡

بسیار ساده

تنها با چند prop ساده می‌توانید انیمیشن‌های حرفه‌ای ایجاد کنید بدون اینکه وارد پیچیدگی‌های CSS animation شوید.

🎨

مناسب UI مدرن

تقریباً تمامی رابط‌های کاربری مدرن از micro interaction ها، hover animation ها و transition های نرم استفاده می‌کنند.

🧩

هماهنگ با React

کاملاً بر پایه React طراحی شده و به‌خوبی با state ها، conditional rendering و component ها کار می‌کند.

🚀

مناسب Next.js

یکی از رایج‌ترین انتخاب‌ها برای پروژه‌های Next.js و App Router است.

نصب Framer Motion

برای نصب کافی است یکی از دستورات زیر را داخل ترمینال پروژه اجرا کنید.

npm
npm install framer-motion
yarn
yarn add framer-motion
pnpm
pnpm add framer-motion

اولین انیمیشن

برای استفاده از Framer Motion ابتدا باید motion را import کنید. سپس می‌توانید هر element معمولی را به motion component تبدیل کنید.

Example.jsx
"use client";

import { motion } from "framer-motion";

export default function Example() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4 }}
    >
      Hello World
    </motion.div>
  );
}

توضیح props ها

• initial → وضعیت اولیه قبل از شروع انیمیشن

• animate → وضعیت نهایی انیمیشن

• transition → کنترل سرعت، delay و نوع حرکت

Hover Animation

یکی از رایج‌ترین استفاده‌های Framer Motion ساخت hover animation ها برای دکمه‌ها و کارت‌ها است.

Hover Button
<motion.button
  whileHover={{
    scale: 1.05,
  }}
  whileTap={{
    scale: 0.95,
  }}
>
  Button
</motion.button>

whileHover

زمانی اجرا می‌شود که کاربر روی element hover کند.

whileTap

زمانی اجرا می‌شود که کاربر روی element کلیک یا tap کند.

انیمیشن هنگام اسکرول

یکی از محبوب‌ترین قابلیت‌های Framer Motion انیمیشن هنگام ورود component به viewport است.

Scroll Animation
<motion.div
  initial={{
    opacity: 0,
    y: 30,
  }}
  whileInView={{
    opacity: 1,
    y: 0,
  }}
  viewport={{
    once: true,
  }}
>
  Content
</motion.div>

Transition ها

Transition مشخص می‌کند انیمیشن چگونه حرکت کند.

Transition Example
transition={{
  duration: 0.5,
  delay: 0.2,
  ease: "easeOut",
}}

• duration → مدت زمان انیمیشن

• delay → تاخیر قبل از شروع

• ease → نوع حرکت انیمیشن

نکته مهم در Next.js

Framer Motion فقط در Client Component ها کار می‌کند. بنابراین در فایل‌هایی که از motion استفاده می‌کنند باید در ابتدای فایل از "use client" استفاده کنید.

"use client";

import { motion } from "framer-motion";
♡

شروع به ساخت انیمیشن کنید

حالا که با مفاهیم پایه Framer Motion آشنا شدید می‌توانید از آن برای ساخت رابط‌های کاربری مدرن، انیمیشن‌های نرم و تجربه کاربری حرفه‌ای استفاده کنید.

مشاهده کامپوننت‌ها