frame-timing

زمان‌بندی فریم‌به‌فریم برای انیمیشن‌های دقیق، اثرگذار و حرفه‌ای

این skill تکنیک‌های کلاسیک Disney مانند on ones، on twos، frame hold، anticipation و smear frame را برای انیمیشن‌های دیجیتال توضیح می‌دهد. با آن می‌توانید ریتم حرکت، مکث‌های مهم و شتاب‌گیری یا کاهش سرعت را در سطح فریم کنترل کنید.

برای ساخت انیمیشن‌های دقیق در Remotion و پروژه‌های ویدیویی فریم‌محور مفید است؛ به‌ویژه زمانی که حرکت بیش از حد نرم، بی‌هدف یا بدون تأکید به نظر می‌رسد. نمونه‌های آماده برای frame hold و stepping نیز روند پیاده‌سازی را سریع‌تر می‌کنند.

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

راهنمای انتخاب بین on ones، on twos و on threes برای حس‌های حرکتی مختلف
الگوی Remotion برای ایجاد frame hold در نقاط کلیدی حرکت
utility برای اجرای انیمیشن به‌صورت فریم‌پله‌ای با stepping قابل تنظیم
نسبت‌های پیشنهادی Disney برای anticipation، action و settle
جدول زمان‌بندی فریم برای حرکت‌هایی مثل پرش، bounce، pop و transition

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

توسعه‌دهندگان Remotion که به کنترل دقیق timeline و فریم‌های انیمیشن نیاز دارند
طراحان موشن و سازندگان ویدیوهای کوتاه که می‌خواهند حرکت‌ها تأکید و ریتم حرفه‌ای‌تری داشته باشند
پروژه‌هایی که در آن مکث، anticipation یا حرکت عمداً تکه‌تکه اهمیت دارد

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

انیمیشن‌های ساده‌ای که فقط به transition یا easing معمولی نیاز دارند
پروژه‌هایی که کنترل فریم‌به‌فریم در آن‌ها ضروری نیست
کاربرانی که به‌دنبال طراحی بصری، مدل‌سازی یا تولید asset هستند

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

Frame-Accurate Disney Timing

Classic Disney timing techniques adapted for digital video production. Frame-by-frame control for maximum impact.

Core Concepts

Ones vs Twos

Traditional animation terminology for drawing frequency:

Term	Meaning	Feel	Use Case
On ones	New drawing every frame	Smooth, fluid	Fast action, important moments
On twos	New drawing every 2 frames	Slightly choppy	Standard animation
On threes	New drawing every 3 frames	Stylized	Slow scenes, limited animation

At 24fps:
- On ones: 24 drawings/second (film)
- On twos: 12 drawings/second (typical animation)
- On threes: 8 drawings/second (budget animation)

At 30fps (Remotion default):
- On ones: 30 drawings/second
- On twos: 15 drawings/second
- On threes: 10 drawings/second

Frame Holds

Pausing motion at key moments for emphasis:

Jump Animation (30fps):

Frame 1-3:   Anticipation (crouch)
Frame 4-5:   Takeoff (fast)
Frame 6-8:   HOLD at apex <-- Emphasis!
Frame 9-10:  Fall (fast)
Frame 11-14: Landing squash + settle

Remotion Implementation

Frame Hold Utility

import { useCurrentFrame, interpolate } from 'remotion';

interface FrameHoldConfig {
  holdFrame: number;
  holdDuration: number;
}

export const useFrameWithHolds = (holds: FrameHoldConfig[]) => {
  const frame = useCurrentFrame();
  let adjustedFrame = frame;
  let totalHoldsPassed = 0;

  for (const hold of holds) {
    if (frame >= hold.holdFrame && frame < hold.holdFrame + hold.holdDuration) {
      return hold.holdFrame - totalHoldsPassed;
    } else if (frame >= hold.holdFrame + hold.holdDuration) {
      totalHoldsPassed += hold.holdDuration;
    }
  }

  return frame - totalHoldsPassed;
};

On Twos Animation

export const useFrameStepping = (
  stepping: 1 | 2 | 3 = 1,
  offset: number = 0
) => {
  const frame = useCurrentFrame();
  return Math.floor((frame + offset) / stepping) * stepping;
};

Disney Anticipation Timing

const DisneyTimingRatios = {
  subtle: { anticipation: 0.15, action: 0.35, settle: 0.50 },
  medium: { anticipation: 0.20, action: 0.35, settle: 0.45 },
  dramatic: { anticipation: 0.30, action: 0.30, settle: 0.40 }
};

Frame Reference Table

Animation	Total Frames (30fps)	Key Holds
Button press	6-9	None
Quick pop	12-15	1-2 at peak
Bounce	20-30	2-3 at apex
Page transition	15-20	None
Celebration	30-45	3-4 at peak
Character jump	25-35	3-4 at apex

Common Timing Mistakes

No holds - Motion feels floaty without key holds
Equal spacing - Real motion accelerates/decelerates
Too smooth - Sometimes choppy (on twos) looks better
Missing anticipation - Actions feel unmotivated
Rushed settle - Need time for secondary motion

Related Skills

motion-principles/ - Disney 12 principles
duration/ - Duration tokens and timing
easing/ - Easing curves for timing
remotion/ - Remotion-specific implementations
motion-blur/ - Blur based on frame timing

See references/ for complete Disney bounce keyframe breakdowns.

دانلود ZIP