remotion-animation

Remotion 动画

生成定义 Remotion 视频中弹簧行为、插值映射、缓动曲线和时间常量的动画配置文档。此技能仅专注于动画参数，不生成组件代码。

此技能的功能

生成以下动画配置：

1. 弹簧配置 — 弹簧动画的阻尼、刚度和质量参数
2. 插值映射 — 数值转换的输入／输出范围
3. 缓动函数 — 时间函数配置
4. 动画时间 — 错开延迟、持续时间、过渡点
5. 进度计算 — 基于帧的动画进度逻辑

范围界定

包含：

• 弹簧配置参数
• 插值输入／输出范围
• 缓动曲线定义
• 动画时间常量
• 进度计算模式

不包含：

• 组件实现（使用 /remotion-component-gen）
• 场景布局（使用 /remotion-composition）
• 视觉样式（颜色、字体、布局）
• 资源管理（使用 /remotion-asset-coordinator）

输入／输出格式

输入格式：动画需求

接受以自然语言或动作规范描述的动画规格：

自然语言：

Create smooth entrance animations with gentle bounce for logo.
Scale from 0.8 to 1.0 over 30 frames.
Stagger text words with 5 frame delay between each.

动作规范：

## Scene 1 Animation Details

**Logo Entrance:**
- Spring animation: Scale 0.8 → 1.0
- Timing: Frames 0-30
- Config: Smooth with slight bounce (damping: 180)
- Opacity: 0 → 1 (linear)

**Text Stagger:**
- Word-by-word reveal
- Stagger delay: 5 frames
- Individual word animation: 15 frames
- Spring config: Snappy (damping: 20, stiffness: 200)

输出格式：ANIMATION_CONFIG.md

生成包含所有动画参数的配置文档：

# Animation Configuration: ProductDemo

## Status
✅ Animation parameters defined
⏳ Ready for implementation in components

## Spring Configurations

```typescript
export const SPRING_CONFIGS = {
  // Smooth, elegant entrance - minimal bounce
  smooth: {
    damping: 200,
    mass: 1,
    stiffness: 100,
  },

  // Snappy, responsive - quick settle
  snappy: {
    damping: 20,
    stiffness: 200,
    mass: 0.5,
  },

  // Bouncy, playful - noticeable oscillation
  bouncy: {
    damping: 8,
    mass: 1,
    stiffness: 100,
  },

  // Gentle, soft - slow and smooth
  gentle: {
    damping: 30,
    stiffness: 80,
    mass: 1,
  },
} as const;

插值映射

export const INTERPOLATIONS = {
  // Logo scale animation
  logoScale: {
    input: [0, 1],      // Progress from spring (0 to 1)
    output: [0.8, 1],   // Scale value (0.8 to 1.0)
    extrapolate: 'clamp',
  },

  // Text slide-in
  textSlide: {
    input: [0, 1],
    output: [-50, 0],   // Translate X from -50px to 0
    extrapolate: 'clamp',
  },

  // Fade effect
  fade: {
    input: [0, 1],
    output: [0, 1],     // Opacity 0 to 1
    extrapolate: 'clamp',
  },
} as const;

动画时间

export const ANIMATION_TIMING = {
  // Global timing constants
  fps: 30,

  // Stagger animations
  stagger: {
    textWords: 5,         // Frame delay between words
    listItems: 3,         // Frame delay between list items
    cards: 8,             // Frame delay between card reveals
  },

  // Durations
  durations: {
    fadeIn: 15,           // Frames for fade in
    fadeOut: 10,          // Frames for fade out
    hold: 30,             // Frames to hold on screen
    quickTransition: 5,   // Frames for quick change
  },

  // Scene-specific timing
  scene1: {
    logoEnter: { start: 0, end: 30 },
    textReveal: { start: 20, end: 60 },
  },

  scene2: {
    contentFadeIn: { start: 0, end: 20 },
    bulletStagger: { start: 25, delay: 8 },
  },
} as const;

缓动函数

export const EASING = {
  // Standard easing curves
  easeInOut: (t: number) =>
    t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,

  easeOut: (t: number) =>
    t * (2 - t),

  easeIn: (t: number) =>
    t * t,

  // Cubic bezier approximations
  cubicBezier: {
    ease: [0.25, 0.1, 0.25, 1],
    easeIn: [0.42, 0, 1, 1],
    easeOut: [0, 0, 0.58, 1],
    easeInOut: [0.42, 0, 0.58, 1],
  },
} as const;

进度计算模式

// Pattern 1: Simple spring progress
const logoProgress = spring({
  frame,
  fps,
  config: SPRING_CONFIGS.smooth,
});

// Pattern 2: Delayed spring (for stagger)
const itemProgress = spring({
  frame: frame - (index * ANIMATION_TIMING.stagger.textWords),
  fps,
  config: SPRING_CONFIGS.snappy,
});

// Pattern 3: Frame-based linear progress
const linearProgress = interpolate(
  frame,
  [startFrame, endFrame],
  [0, 1],
  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
);

// Pattern 4: Eased progress
const easedProgress = EASING.easeOut(linearProgress);

// Pattern 5: Looping animation
const loopProgress = (frame % loopDuration) / loopDuration;

使用示例

在组件中实现

import { useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';
import { SPRING_CONFIGS, INTERPOLATIONS, ANIMATION_TIMING } from '../constants';

// In component:
const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// Apply spring animation
const logoProgress = spring({
  frame,
  fps,
  config: SPRING_CONFIGS.smooth,
});

// Apply interpolation
const scale = interpolate(
  logoProgress,
  INTERPOLATIONS.logoScale.input,
  INTERPOLATIONS.logoScale.output
);

const opacity = logoProgress; // Direct 0-1 progress

// Use in styles
<div style={{
  transform: `scale(${scale})`,
  opacity,
}} />

后续步骤

1. 集成到合成文件夹中的 constants.ts
2. 在组件实现中使用 /remotion-component-gen
3. 在 Remotion 预览中测试动画效果
4. 如果时间效果不理想，则调整参数
5. 记录最终数值以保持一致

检查清单

• 已定义弹簧配置
• 已指定插值范围
• 已计算时间常量
• 已记录进度模式
• 已集成到组件中（下一步）
• 已在预览中测试（下一步）

## Animation Patterns

### Pattern 1: Entrance Animation

Spring-based entrance with scale and opacity:

```typescript
const entranceProgress = spring({
  frame,
  fps,
  config: { damping: 200 },
});

const scale = interpolate(entranceProgress, [0, 1], [0.8, 1]);
const opacity = entranceProgress;
const translateY = interpolate(entranceProgress, [0, 1], [20, 0]);

模式 2：错开显示

多个项目延迟后依次播放动画：

const items = ['Item 1', 'Item 2', 'Item 3'];
const STAGGER_DELAY = 5;

items.map((item, index) => {
  const itemProgress = spring({
    frame: frame - (index * STAGGER_DELAY),
    fps,
    config: SPRING_CONFIGS.snappy,
  });

  return (
    <div style={{ opacity: itemProgress }}>
      {item}
    </div>
  );
});

模式 3：状态间过渡

使用帧范围实现平滑过渡：

const transitionProgress = interpolate(
  frame,
  [startFrame, endFrame],
  [0, 1],
  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
);

// State A → State B
const value = interpolate(
  transitionProgress,
  [0, 1],
  [stateAValue, stateBValue]
);

模式 4：循环动画

持续循环播放的动画：

const LOOP_DURATION = 60; // frames
const loopProgress = (frame % LOOP_DURATION) / LOOP_DURATION;

const rotation = loopProgress * 360; // 0 to 360 degrees
const pulse = Math.sin(loopProgress * Math.PI * 2) * 0.1 + 1; // 0.9 to 1.1

模式 5：回弹并稳定

有意产生过冲的弹簧动画：

const overshootProgress = spring({
  frame,
  fps,
  config: {
    damping: 10,    // Low damping = more bounce
    stiffness: 100,
  },
});

const scale = interpolate(overshootProgress, [0, 1], [0, 1.2]); // Overshoots to 1.2

弹簧配置指南

阻尼参数

控制振荡停止的速度：

// High damping (200+) - Smooth, minimal/no bounce
damping: 200  // → Smooth entrance, elegant

// Medium damping (20-80) - Visible bounce, quick settle
damping: 40   // → Snappy, responsive

// Low damping (8-15) - Strong bounce, playful
damping: 10   // → Bouncy, fun

// Very low damping (2-5) - Extreme bounce
damping: 5    // → Jello-like

刚度参数

控制动画速度：

// High stiffness (200+) - Fast animation
stiffness: 300  // → Quick, snappy

// Medium stiffness (80-150) - Standard speed
stiffness: 100  // → Balanced

// Low stiffness (30-60) - Slow animation
stiffness: 50   // → Gentle, relaxed

质量参数

控制惯性和重量：

// Light mass (0.5) - Responsive, quick
mass: 0.5  // → Featherlight

// Standard mass (1) - Balanced
mass: 1    // → Normal weight

// Heavy mass (2+) - Sluggish, weighty
mass: 2    // → Heavy, substantial

缓动函数参考

标准缓动曲线：

// Linear - Constant speed
easeLinear: (t) => t

// Ease Out - Fast start, slow end (most common)
easeOut: (t) => t * (2 - t)

// Ease In - Slow start, fast end
easeIn: (t) => t * t

// Ease In-Out - Slow start and end, fast middle
easeInOut: (t) => t < 0.5 ? 2*t*t : -1+(4-2*t)*t

// Ease Out Cubic - Smooth deceleration
easeOutCubic: (t) => (--t)*t*t + 1

// Ease In Cubic - Smooth acceleration
easeInCubic: (t) => t*t*t

帧计算辅助项

常见帧计算：

// Convert seconds to frames
const secondsToFrames = (seconds: number, fps: number) => seconds * fps;

// Calculate stagger frame offset
const staggerFrame = (index: number, delay: number, startFrame: number = 0) =>
  startFrame + (index * delay);

// Calculate animation end frame
const endFrame = (startFrame: number, durationFrames: number) =>
  startFrame + durationFrames;

// Check if animation is active
const isActive = (frame: number, start: number, end: number) =>
  frame >= start && frame <= end;

// Get progress within range
const rangeProgress = (frame: number, start: number, end: number) =>
  Math.max(0, Math.min(1, (frame - start) / (end - start)));

集成工作流

1. 使用此技能生成动画配置 → ANIMATION_CONFIG.md
2. 添加到合成文件夹中的 constants.ts
3. 在实现组件时引用
4. 在预览中测试并调整参数
5. 将任何变更记录回配置文档

常见动画组合

Logo 入场（平滑 + 缩放 + 淡入）

config: { damping: 200 }
scale: [0.8, 1]
opacity: [0, 1]
translateY: [20, 0]

文字显示（错开 + 滑动 + 淡入）

config: { damping: 20, stiffness: 200 }
staggerDelay: 5 frames
translateX: [-30, 0]
opacity: [0, 1]

按钮脉冲（循环 + 缩放）

loopDuration: 60 frames
scale: [1, 1.05, 1]
easing: easeInOut

页面过渡（淡入 + 滑动）

duration: 15 frames
opacity: [1, 0] (out), [0, 1] (in)
translateX: [0, -100] (out), [100, 0] (in)

时间设置最佳实践

不同动画类型的建议时间范围：

// Micro-interactions
button hover: 5-10 frames
tooltip appear: 8-12 frames

// Standard animations
fade in/out: 10-20 frames
slide in/out: 15-25 frames
scale entrance: 20-30 frames

// Stagger delays
individual items: 3-8 frames
word-by-word: 4-6 frames
large groups: 2-4 frames

// Hold durations
text on screen: 60-120 frames (2-4 seconds)
quick message: 30-60 frames (1-2 seconds)

与其他技能的集成

此技能可用于：

remotion-animation (this skill)
    ↓ outputs: ANIMATION_CONFIG.md
remotion-component-gen
    ↓ applies animation configs in components
remotion-composition
    ↓ coordinates timing across scenes

配合使用：

• /motion-designer — 从设计文档生成动画规范
• /remotion-scaffold — 配置写入 constants.ts
• /remotion-component-gen — 组件应用这些配置
• /remotion-composition — 时间安排与 Sequence 布局协调
• /remotion-spec-translator — 翻译规范时调用此技能

---

此技能提供精确的动画参数定义，确保 Remotion 视频项目中的动态效果一致且达到生产级质量。