Back to Details

orchestrated-sequences

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Orchestrated Sequences

编排式动效序列

Orchestrated sequences coordinate multiple elements across time. Like a conductor directing an orchestra, you control when each element enters, how it moves, and how elements relate.
编排式动效序列用于跨时间协调多个元素。就像指挥家指挥管弦乐队一样，你可以控制每个元素的入场时机、运动方式以及元素间的关联。

Disney Principles for Orchestration

动效编排的迪士尼原则

Ensemble Coordination

多元素协同

Squash & Stretch: Unified style - all elements should share consistent elasticity. Mix bouncy and stiff looks chaotic.
Anticipation: Staggered preparation - lead element anticipates first, others follow in sequence.
Staging: Clear hierarchy - primary action leads, secondary elements support but don't compete.
Straight Ahead/Pose to Pose: Pose to pose mandatory - choreography requires precise timing control.
Follow Through: Cascading settle - elements land in sequence with overlapping follow-through.
Slow In/Slow Out: Shared easing family - use variations of same curve for cohesion.
Arcs: Coordinated paths - elements should move in complementary directions, not randomly.
Secondary Action: Intentional support - every element has a role in the composition.
Timing: The heart of orchestration - stagger delays, duration variations, tempo changes.
Exaggeration: Proportional emphasis - primary elements more exaggerated, supporting less.
Solid Drawing: Consistent dimensional logic - shared perspective, depth, scale relationships.
Appeal: Unified performance - the sequence should feel like one composed moment.
挤压与拉伸（Squash & Stretch）：统一风格——所有元素应保持一致的弹性表现。混合弹跳感与僵硬感会显得混乱。
预备动作（Anticipation）：交错准备——主导元素先做出预备动作，其他元素依次跟进。
舞台呈现（Staging）：清晰层级——主要动作为核心，次要元素起到支撑作用但不抢戏。
关键帧动画（Straight Ahead/Pose to Pose）：关键帧动画为必需项——编排需要精准的时间控制。
跟随动作（Follow Through）：级联收尾——元素依次到位，伴随重叠的跟随动作。
缓入缓出（Slow In/Slow Out）：统一缓动曲线族——使用同一曲线的变体来保持连贯性。
弧线运动（Arcs）：协同运动路径——元素应沿互补方向运动，而非随机移动。
次要动作（Secondary Action）：有目的性的辅助——每个元素在构图中都有其作用。
时间节奏（Timing）：编排的核心——交错延迟、时长变化、节奏调整。
夸张表现（Exaggeration）：成比例的强调——主要元素夸张程度更高，辅助元素次之。
扎实造型（Solid Drawing）：统一的维度逻辑——共享视角、深度与比例关系。
吸引力（Appeal）：统一的整体表现——整个序列应呈现出连贯统一的表演效果。

Timing Strategies

时间节奏策略

css
/* Linear stagger - equal delays */
.item:nth-child(n) {
  transition-delay: calc(var(--index) * 50ms);
}

/* Accelerating stagger - getting faster */
.item:nth-child(1) { transition-delay: 0ms; }
.item:nth-child(2) { transition-delay: 80ms; }
.item:nth-child(3) { transition-delay: 140ms; }
.item:nth-child(4) { transition-delay: 180ms; }

/* Decelerating stagger - slowing down */
.item:nth-child(1) { transition-delay: 0ms; }
.item:nth-child(2) { transition-delay: 40ms; }
.item:nth-child(3) { transition-delay: 100ms; }
.item:nth-child(4) { transition-delay: 180ms; }
css
/* Linear stagger - equal delays */
.item:nth-child(n) {
  transition-delay: calc(var(--index) * 50ms);
}

/* Accelerating stagger - getting faster */
.item:nth-child(1) { transition-delay: 0ms; }
.item:nth-child(2) { transition-delay: 80ms; }
.item:nth-child(3) { transition-delay: 140ms; }
.item:nth-child(4) { transition-delay: 180ms; }

/* Decelerating stagger - slowing down */
.item:nth-child(1) { transition-delay: 0ms; }
.item:nth-child(2) { transition-delay: 40ms; }
.item:nth-child(3) { transition-delay: 100ms; }
.item:nth-child(4) { transition-delay: 180ms; }

Easing Recommendations

缓动曲线推荐

css
/* Cohesive family - same curve, different durations */
.primary { transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.secondary { transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1); }
.tertiary { transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1); }

/* Sequence curve - smooth start, confident end */
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
css
/* Cohesive family - same curve, different durations */
.primary { transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.secondary { transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1); }
.tertiary { transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1); }

/* Sequence curve - smooth start, confident end */
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);

Best Use Cases

最佳适用场景

  • Page load sequences
  • Dashboard reveals
  • Card grid animations
  • Navigation menu opens
  • Feature section reveals
  • Data visualization builds
  • Onboarding step sequences
  • List population animations
  • 页面加载序列
  • 仪表盘展示动效
  • 卡片网格动画
  • 导航菜单展开动效
  • 功能区块展示动效
  • 数据可视化构建动效
  • 引导步骤序列
  • 列表填充动画

Implementation Pattern

实现模式

css
/* Staggered reveal system */
.orchestrated-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 300ms ease-out,
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.orchestrated-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Apply delays via CSS custom properties or nth-child */
.orchestrated-item:nth-child(1) { transition-delay: 0ms; }
.orchestrated-item:nth-child(2) { transition-delay: 75ms; }
.orchestrated-item:nth-child(3) { transition-delay: 150ms; }
.orchestrated-item:nth-child(4) { transition-delay: 225ms; }
javascript
// JS orchestration for complex sequences
const sequence = [
  { el: '.hero', delay: 0, duration: 500 },
  { el: '.title', delay: 100, duration: 400 },
  { el: '.subtitle', delay: 200, duration: 350 },
  { el: '.cta', delay: 350, duration: 400 },
];
css
/* Staggered reveal system */
.orchestrated-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 300ms ease-out,
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.orchestrated-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Apply delays via CSS custom properties or nth-child */
.orchestrated-item:nth-child(1) { transition-delay: 0ms; }
.orchestrated-item:nth-child(2) { transition-delay: 75ms; }
.orchestrated-item:nth-child(3) { transition-delay: 150ms; }
.orchestrated-item:nth-child(4) { transition-delay: 225ms; }
javascript
// JS orchestration for complex sequences
const sequence = [
  { el: '.hero', delay: 0, duration: 500 },
  { el: '.title', delay: 100, duration: 400 },
  { el: '.subtitle', delay: 200, duration: 350 },
  { el: '.cta', delay: 350, duration: 400 },
];

Key Insight

核心要点

Orchestration is composition in time. Just as visual design arranges elements in space, animation orchestration arranges motion in time. The goal is a single, coherent performance, not a collection of individual animations.
动效编排是时间维度上的构图。正如视觉设计在空间中排布元素，动效编排则在时间维度上排布运动。我们的目标是打造一个连贯统一的整体表现，而非一系列独立的动画片段。