storyboarding

برای انیمیشن‌های پیچیده، استوری‌بورد و پیش‌نمایش حرکتی دقیق بسازید.

این Skill برای برنامه‌ریزی و مستندسازی انیمیشن‌های UI، موشن‌گرافیک و سکانس‌های ویدیویی استفاده می‌شود. فریم‌های کلیدی، breakdown، anticipation، follow-through، زمان‌بندی، easing و مسیر حرکت را به شکلی منظم تعریف می‌کند.

خروجی آن برای هماهنگی با تیم طراحی و ذی‌نفعان، ساخت style frame، آماده‌سازی Figma یا After Effects و تبدیل ایده به timeline قابل استفاده در Remotion یا GSAP مناسب است.

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

• استوری‌بورد صحنه‌به‌صحنه با فریم‌ها، مدت‌زمان و رویدادهای محرک
• جدول timing breakdown شامل frame، زمان، property، مقدار و توضیحات
• تعریف key momentها از حالت اولیه تا anticipation، overshoot و settle
• مستندات sequence برای اجرای خطی، موازی و staggered
• timeline داده‌محور مناسب برای Remotion، GSAP، Figma یا After Effects

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

• طراحان موشن و UI که پیش از اجرا به طرح حرکتی قابل بازبینی نیاز دارند
• تیم‌های محصولی که باید انیمیشن را با توسعه‌دهندگان و ذی‌نفعان هماهنگ کنند
• پروژه‌های پیچیده‌ای که به timing، easing و مستندات دقیق نیاز دارند
• ساخت style frame و پیش‌نمایش برای انیمیشن‌های تعاملی یا ویدیویی

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

• وقتی فقط به اجرای مستقیم یک انیمیشن ساده و کوتاه نیاز دارید
• تولید نهایی ویدیو یا فایل اجرایی بدون مرحله برنامه‌ریزی
• پروژه‌هایی که هیچ نیازی به مستندسازی یا بازبینی سکانس ندارند

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

Animation Storyboarding

Pre-visualization and documentation for motion design projects.

Storyboard Components

Frame Elements

Timing Annotations

[Frame 1]──(12f)──[Frame 2]──(6f)──[Frame 3]
    │                │                │
    Start         Midpoint           End
    ease-out      linear         ease-in

Storyboard Template

## Scene: [Name]
Duration: [Total frames/seconds]
Context: [What triggers this animation]

### Beat 1: [Name]
- Frame: [#]
- Duration: [X]f / [Y]ms
- Easing: [curve name]
- Description: [What happens]
- Properties: [transform, opacity, etc.]

[Sketch/Wireframe placeholder]

### Beat 2: [Name]
...

Style Frames

Key Moments to Capture

1. Initial State - Before animation begins
2. Anticipation Peak - Maximum wind-up
3. Action Midpoint - 50% through main motion
4. Overshoot - Past final position (if applicable)
5. Settle - Final resting state

Style Frame Specification

{
  "scene": "Modal Open",
  "frame": 3,
  "timestamp": "0.15s",
  "progress": 0.5,
  "properties": {
    "opacity": 0.8,
    "scale": 1.05,
    "y": -8,
    "blur": 2
  },
  "easing": "emphasized-decelerate",
  "notes": "Peak overshoot before settle"
}

Motion Arc Documentation

Arc Diagram

Value
  │
1.0├─────────────────────────────●───────
   │                          ╱
   │                        ╱
   │                     ╱
   │                  ╱
0.5├───────────────●
   │            ╱
   │         ╱
   │      ╱
   │   ╱
0.0├──●────────────────────────────────────
   0%        50%                    100%
                    Time

Easing Visualization

Standard (0.2, 0, 0, 1):
▓▓▓▓░░░░░░░░░░░░░░░░
████▓▓▓▓░░░░░░░░░░░░
██████████▓▓▓▓░░░░░░
████████████████▓▓▓▓
████████████████████

Emphasized-decelerate (entrance):
▓▓▓▓▓▓▓▓░░░░░░░░░░░░
██████████▓▓▓▓░░░░░░
██████████████▓▓░░░░
████████████████▓▓░░
████████████████████

Timing Breakdown

Frame-by-Frame Analysis

Duration Calculator

// Convert seconds to frames
const fps = 60;
const seconds = 0.3;
const frames = Math.round(seconds * fps); // 18 frames

// Convert frames to milliseconds
const frameToMs = (frame, fps = 60) =>
    Math.round((frame / fps) * 1000);

Sequence Notation

Linear Sequence

[A]──(300ms)──[B]──(200ms)──[C]

Parallel Sequence

[A]──(300ms)──[B]
         ├────────[C]  (starts at 150ms)
         └────────[D]  (starts at 200ms)

Staggered Sequence

[A1]──[A2]──[A3]──[A4]──[A5]
  │     │     │     │     │
  0    50ms  100ms 150ms 200ms

Tool Workflows

Figma Storyboard

1. Create frame for each key moment
2. Use auto-layout for consistent sizing
3. Add timing annotations as text
4. Link to prototype for context

After Effects Planning

1. Marker annotations on timeline
2. Shape layer for motion paths
3. Expression links for documentation
4. Render style frame sequence

Code-First (Remotion/GSAP)

// Document as timeline data
const storyboard = [
  {
    id: 'intro',
    start: 0,
    duration: 30, // frames
    elements: ['logo', 'tagline'],
    notes: 'Logo scales in, tagline fades'
  },
  {
    id: 'content',
    start: 30,
    duration: 60,
    elements: ['card1', 'card2', 'card3'],
    notes: 'Cards stagger in from bottom'
  }
];

Review Checklist

Pre-Production Review

• ☐ All key frames documented
• ☐ Timing annotations complete
• ☐ Easing curves specified
• ☐ Reduced motion alternative noted
• ☐ Performance considerations flagged

Stakeholder Presentation

• ☐ Style frames exported as images
• ☐ Timing breakdown table included
• ☐ Interactive prototype linked
• ☐ Technical constraints noted

Related Skills

• Dependencies: easing, duration, sequencing
• See also: motion-specs, orchestrator
• Output formats: Figma, PDF, JSON timeline

دانلود ZIP