lottie-bodymovin

اصول ۱۲گانه انیمیشن دیزنی را با Lottie و Bodymovin در پروژه‌های وب پیاده کنید.

این مهارت به شما کمک می‌کند اصولی مثل Squash and Stretch، Anticipation، Staging، Follow Through، Slow In و Slow Out را در انیمیشن‌های برداری Lottie طراحی و اجرا کنید. ساختاردهی کامپوزیشن در After Effects، تنظیم keyframeها و کنترل حرکت با Bodymovin را پوشش می‌دهد.

همچنین نمونه‌های آماده برای استفاده از lottie-react و APIهایی مانند playSegments، setSpeed، setDirection، goToAndStop و event listenerها ارائه می‌کند تا انیمیشن‌ها را در React تعاملی و قابل‌کنترل بسازید.

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

  • راهنمای پیاده‌سازی هر ۱۲ اصل انیمیشن دیزنی در After Effects و Lottie
  • الگوهای کدنویسی برای کنترل زمان‌بندی، سرعت، جهت و بازه‌های پخش
  • نمونه استفاده از `lottie-react` برای نمایش انیمیشن در React
  • روش هماهنگ‌سازی انیمیشن اصلی و secondary action با eventها
  • نکات طراحی motion path، Easy Ease، overshoot و composition staging

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

  • توسعه‌دهندگان React که به micro-interaction و انیمیشن‌های برداری سبک نیاز دارند
  • طراحان motion و انیماتورهایی که خروجی After Effects را به Lottie تبدیل می‌کنند
  • تیم‌هایی که می‌خواهند اصول کلاسیک انیمیشن را در رابط کاربری، onboarding یا محتوای تعاملی به‌کار ببرند

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

  • پروژه‌هایی که به انیمیشن‌های raster، تدوین ویدیویی یا جلوه‌های سینمایی پیچیده نیاز دارند
  • زمانی که فایل Lottie آماده است و به طراحی حرکت یا کنترل runtime آن نیازی ندارید
  • موقعیت‌هایی که وابستگی به After Effects و خروجی Bodymovin قابل‌قبول نیست

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

Lottie Animation Principles

Implement all 12 Disney animation principles using Lottie (Bodymovin) for vector animations.

1. Squash and Stretch

In After Effects before export:

  • Animate Scale X and Y inversely
  • Use expression: s = transform.scale[1]; [100 + (100-s), s]
// Control at runtime
lottie.setSpeed(1.5); // affect squash timing

2. Anticipation

Structure your AE composition:

  1. Frames 0-10: Wind-up pose
  2. Frames 10-40: Main action
  3. Frames 40-50: Settle
// Play anticipation segment
anim.playSegments([0, 10], true);
setTimeout(() => anim.playSegments([10, 50], true), 200);

3. Staging

// Layer multiple Lotties
<div className="scene">
  <Lottie animationData={background} style={{ opacity: 0.6 }} />
  <Lottie animationData={hero} style={{ zIndex: 10 }} />
</div>

4. Straight Ahead / Pose to Pose

Pose to pose in AE:

  • Set keyframes at key poses
  • Let AE interpolate between
  • Use Easy Ease for smoothing
// Jump to specific poses
anim.goToAndStop(25, true); // frame 25

5. Follow Through and Overlapping Action

In After Effects:

  • Offset child layer keyframes by 2-4 frames
  • Use parenting with delayed expressions
  • thisComp.layer("Parent").transform.position.valueAtTime(time - 0.05)

6. Slow In and Slow Out

AE Keyframe settings:

  • Select keyframes > Easy Ease (F9)
  • Use Graph Editor to adjust curves
  • Bezier handles control acceleration
// Adjust playback speed dynamically
anim.setSpeed(0.5); // slower
anim.setSpeed(2); // faster

7. Arc

In After Effects:

  • Use motion paths (position property)
  • Convert keyframes to Bezier
  • Pull handles to create arcs
  • Or use "Auto-Orient to Path"

8. Secondary Action

// Trigger secondary animation
mainAnim.addEventListener('complete', () => {
  secondaryAnim.play();
});

// Or sync with frame
mainAnim.addEventListener('enterFrame', (e) => {
  if (e.currentTime > 15) particleAnim.play();
});

9. Timing

anim.setSpeed(0.5);  // half speed - dramatic
anim.setSpeed(1);    // normal
anim.setSpeed(2);    // double speed - snappy

// Or control frame rate in AE export
// 24fps = cinematic, 30fps = smooth, 60fps = fluid

10. Exaggeration

In After Effects:

  • Push scale beyond 100% (120-150%)
  • Overshoot rotation
  • Use Overshoot expression
  • amp = 15; freq = 3; decay = 5; n = 0; time_start = key(1).time; if (time > time_start) { n = (time - time_start) / thisComp.frameDuration; amp * Math.sin(freq*n) / Math.exp(decay*n/100); } else { 0; }

11. Solid Drawing

In After Effects:

  • Use 3D layers
  • Apply perspective camera
  • Animate Z position and rotation
  • Use depth of field

12. Appeal

Design principles in AE:

  • Smooth curves over sharp angles
  • Consistent timing patterns
  • Pleasing color palette
  • Clean vector shapes
// React Lottie with hover
<Lottie
  animationData={data}
  onMouseEnter={() => anim.setDirection(1)}
  onMouseLeave={() => anim.setDirection(-1)}
/>

Lottie Implementation

import Lottie from 'lottie-react';
import animationData from './animation.json';

<Lottie
  animationData={animationData}
  loop={true}
  autoplay={true}
  style={{ width: 200, height: 200 }}
/>

Key Lottie Features

  • playSegments([start, end]) - Play frame range
  • setSpeed(n) - Control timing
  • setDirection(1/-1) - Forward/reverse
  • goToAndStop(frame) - Pose control
  • addEventListener - Frame events
  • Interactivity via lottie-interactivity

دانلود ZIP