Back to Details

deliberate-1200-2000ms

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Deliberate Animations (1200-2000ms)

刻意性动画（1200-2000ms）

At 1200-2000ms, you're creating experiences, not interfaces. This duration is for moments of genuine storytelling where animation itself is the content.
在1200-2000ms这个时长区间内，你打造的是体验，而非单纯的界面。这个时长适用于真正以叙事为核心的场景，此时动画本身就是内容的一部分。

Disney Principles at Deliberate Speed

刻意性速度下的Disney动画原则

Full Narrative Expression

完整叙事表达

Squash & Stretch: Character-defining - 30-40% deformation creates personality. Objects become characters.
Anticipation: Full dramatic preparation - 300-400ms wind-up creates tension and expectation.
Staging: Scene direction - think cinematography. Establish shot, then detail. Clear narrative flow.
Straight Ahead/Pose to Pose: Pose to pose mandatory - 6-10 key poses define the narrative arc.
Follow Through: Extended settling - 300-500ms of secondary motion after primary completes.
Slow In/Slow Out: Narrative pacing - ease curves tell emotional stories. Sharp starts mean urgency, soft ends mean resolution.
Arcs: Orchestrated paths - motion paths are designed, not default. Each element's trajectory contributes to composition.
Secondary Action: Full ecosystem - primary, secondary, tertiary, ambient all working together.
Timing: 72-120 frames at 60fps. Animation-quality frame counts.
Exaggeration: Emotional amplification - push for feeling, not just movement.
Solid Drawing: Dimensional storytelling - parallax, depth, perspective shifts create space.
Appeal: Deep emotional engagement - users feel something during these animations.
挤压与拉伸（Squash & Stretch）：塑造角色特质——30-40%的形变能赋予物体个性，让物件拥有“角色感”。
预备动作（Anticipation）：完整的戏剧化铺垫——300-400ms的“蓄力”过程能营造紧张感与期待感。
舞台呈现（Staging）：场景引导——参考电影摄影手法。先建立整体镜头，再展现细节，确保叙事流程清晰。
逐帧绘制/关键帧绘制（Straight Ahead/Pose to Pose）：必须采用关键帧绘制——6-10个关键姿势定义叙事弧光。
跟随动作（Follow Through）：延长的收尾阶段——主动作完成后，保留300-500ms的次级运动。
缓入缓出（Slow In/Slow Out）：叙事节奏——缓动曲线传递情感故事。急促的开头意味着紧迫感，柔和的结尾代表尘埃落定。
运动弧线（Arcs）：精心设计的路径——运动路径需量身打造，而非使用默认设置。每个元素的轨迹都要为整体构图服务。
次级动作（Secondary Action）：完整的生态系统——主动作、次级动作、三级动作、环境动效协同运作。
时间控制（Timing）：60fps下72-120帧。达到动画级别的帧数量。
夸张手法（Exaggeration）：情感放大——重点传递情绪，而非仅仅展示动作。
扎实造型（Solid Drawing）：维度化叙事——视差、景深、视角变化构建空间感。
吸引力（Appeal）：深度情感共鸣——用户在观看这些动画时能产生情绪波动。

Easing Recommendations

缓动函数推荐

css
/* Narrative arc - beginning, middle, end */
animation-timing-function: cubic-bezier(0.34, 0, 0.14, 1);

/* Graceful, considered motion */
transition: all 1500ms cubic-bezier(0.16, 1, 0.3, 1);

/* Building momentum */
transition: all 1800ms cubic-bezier(0.65, 0, 0.35, 1);

/* Elastic storytelling */
transition: transform 1600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
css
/* Narrative arc - beginning, middle, end */
animation-timing-function: cubic-bezier(0.34, 0, 0.14, 1);

/* Graceful, considered motion */
transition: all 1500ms cubic-bezier(0.16, 1, 0.3, 1);

/* Building momentum */
transition: all 1800ms cubic-bezier(0.65, 0, 0.35, 1);

/* Elastic storytelling */
transition: transform 1600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);

Best Use Cases

最佳适用场景

  • App splash/launch sequences
  • Brand moments
  • Tutorial narratives
  • Achievement celebrations
  • Milestone animations
  • Emotional state changes (error to success)
  • Story-driven onboarding
  • Feature announcements
  • 应用启动/闪屏序列
  • 品牌展示时刻
  • 教程叙事场景
  • 成就庆祝动画
  • 里程碑纪念动画
  • 情感状态切换（如从错误到成功）
  • 叙事式引导页
  • 新功能发布展示

Implementation Pattern

实现示例

css
@keyframes appLaunch {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(50px);
    filter: blur(10px);
  }
  30% {
    opacity: 1;
    filter: blur(5px);
  }
  60% {
    transform: scale(1.02) translateY(-10px);
    filter: blur(0);
  }
  80% {
    transform: scale(0.99) translateY(5px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.app-launch {
  animation: appLaunch 1800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
css
@keyframes appLaunch {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(50px);
    filter: blur(10px);
  }
  30% {
    opacity: 1;
    filter: blur(5px);
  }
  60% {
    transform: scale(1.02) translateY(-10px);
    filter: blur(0);
  }
  80% {
    transform: scale(0.99) translateY(5px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.app-launch {
  animation: appLaunch 1800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

Critical Considerations

关键注意事项

  • Users MUST be able to skip/dismiss
  • Never block critical paths
  • Avoid on repeat visits (detect returning users)
  • Must add genuine value, not decoration
  • Test for motion sensitivity (prefer reduced motion)
  • 必须允许用户跳过/关闭动画
  • 绝不能阻塞关键操作路径
  • 重复访问时避免展示（需识别回头用户）
  • 必须带来真实价值，而非单纯装饰
  • 针对运动敏感度进行测试（优先支持“减少动效”设置）

Key Insight

核心洞察

Deliberate animations are brand investments. They don't just show what's happening - they make users feel something. Budget for design, iteration, and testing. These moments define perceived quality.
刻意性动画是品牌投资。它们不仅展示正在发生的事情，更能让用户产生情绪共鸣。要为设计、迭代和测试预留预算。这些时刻将定义用户对产品品质的感知。