framer-motion

اجرای اصول ۱۲گانه انیمیشن دیزنی در React با Framer Motion

این اسکیل به شما کمک می‌کند اصول ۱۲گانه انیمیشن دیزنی را در پروژه‌های React با API اعلانی Framer Motion پیاده‌سازی کنید؛ از squash and stretch و anticipation تا timing، arc و exaggeration.

با استفاده از variants، transition، gestureها، AnimatePresence و layout می‌توانید حرکت‌هایی طبیعی‌تر، خواناتر و حرفه‌ای‌تر برای رابط‌های کاربری و صحنه‌های تعاملی بسازید.

چه چیزی می‌گیرید

• الگوهای آماده برای پیاده‌سازی ۱۲ اصل انیمیشن دیزنی
• نمونه‌کدهای React برای `animate`، `variants` و `transition`
• تنظیم timing، easing، spring و stagger برای حرکت‌های دقیق
• انیمیشن‌های تعاملی با `whileHover` و `whileTap`
• پشتیبانی از exit animation، کنترل برنامه‌ای و تغییرات خودکار layout

برای چه کاری خوب است

• توسعه‌دهندگان React که می‌خواهند رابط‌های کاربری زنده‌تر و حرفه‌ای‌تر بسازند
• طراحان محصول و motion designerهایی که برای prototype یا محصول نهایی به انیمیشن تعاملی نیاز دارند
• پروژه‌هایی که حرکت کاراکتر، کارت، دکمه، لیست یا تغییر وضعیت صفحه دارند

برای چه کاری نیست

• پروژه‌هایی که به رندر ویدیوی نهایی یا تدوین سینمایی با FFmpeg و ابزارهای مشابه نیاز دارند
• محیط‌هایی که React یا JavaScript در آن‌ها قابل استفاده نیست
• انیمیشن‌های بسیار پیچیده سه‌بعدی یا شبیه‌سازی فیزیک که به موتور تخصصی نیاز دارند

دربارهٔ این اسکیل

Framer Motion Animation Principles

Implement all 12 Disney animation principles using Framer Motion's declarative React API.

1. Squash and Stretch

<motion.div
  animate={{ scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] }}
  transition={{ duration: 0.3, times: [0, 0.5, 1] }}
/>

2. Anticipation

<motion.div
  variants={{
    idle: { y: 0, scaleY: 1 },
    anticipate: { y: 10, scaleY: 0.9 },
    jump: { y: -200 }
  }}
  initial="idle"
  animate={["anticipate", "jump"]}
  transition={{ duration: 0.5, times: [0, 0.2, 1] }}
/>

3. Staging

<motion.div animate={{ filter: "blur(3px)", opacity: 0.6 }} /> {/* bg */}
<motion.div animate={{ scale: 1.1, zIndex: 10 }} /> {/* hero */}

4. Straight Ahead / Pose to Pose

<motion.div
  animate={{
    x: [0, 100, 200, 300],
    y: [0, -50, 0, -30]
  }}
  transition={{ duration: 1, ease: "easeInOut" }}
/>

5. Follow Through and Overlapping Action

<motion.div animate={{ x: 200 }} transition={{ duration: 0.5 }}>
  <motion.span
    animate={{ x: 200 }}
    transition={{ duration: 0.5, delay: 0.05 }} // hair
  />
  <motion.span
    animate={{ x: 200 }}
    transition={{ duration: 0.6, delay: 0.1 }} // cape
  />
</motion.div>

6. Slow In and Slow Out

<motion.div
  animate={{ x: 300 }}
  transition={{
    duration: 0.6,
    ease: [0.42, 0, 0.58, 1] // easeInOut cubic-bezier
  }}
/>
// Or use: "easeIn", "easeOut", "easeInOut"

7. Arc

<motion.div
  animate={{
    x: [0, 100, 200],
    y: [0, -100, 0]
  }}
  transition={{ duration: 1, ease: "easeInOut" }}
/>

8. Secondary Action

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  <motion.span
    animate={{ rotate: [0, 10, -10, 0] }}
    transition={{ duration: 0.3 }}
  >
    Icon
  </motion.span>
</motion.button>

9. Timing

const timings = {
  fast: { duration: 0.15 },
  normal: { duration: 0.3 },
  slow: { duration: 0.6 },
  spring: { type: "spring", stiffness: 300, damping: 20 }
};

10. Exaggeration

<motion.div
  animate={{ scale: 1.5, rotate: 720 }}
  transition={{
    type: "spring",
    stiffness: 200,
    damping: 10 // low damping = overshoot
  }}
/>

11. Solid Drawing

<motion.div
  style={{ perspective: 1000 }}
  animate={{ rotateX: 45, rotateY: 30 }}
  transition={{ duration: 0.5 }}
/>

12. Appeal

<motion.div
  whileHover={{
    scale: 1.02,
    boxShadow: "0 20px 40px rgba(0,0,0,0.2)"
  }}
  transition={{ duration: 0.3 }}
/>

Stagger Children

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};

<motion.ul variants={container} initial="hidden" animate="show">
  {items.map(item => <motion.li variants={itemVariant} />)}
</motion.ul>

Key Framer Motion Features

• animate - Target state
• variants - Named animation states
• whileHover / whileTap - Gesture animations
• transition - Timing and easing
• AnimatePresence - Exit animations
• useAnimation - Programmatic control
• layout - Auto-animate layout changes

دانلود ZIP