Back to Details

dramatic-2000ms-plus

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Dramatic Animations (2000ms+)

戏剧性动画（2000ms+）

Beyond 2000ms, animation becomes cinema. These aren't UI transitions - they're short films embedded in your product. Reserve for moments that define your brand.
当动效时长超过2000ms时，动画就成了电影级内容。它们不再是简单的UI过渡——而是嵌入产品中的短片。这类动效应用于能定义品牌的关键场景。

Disney Principles at Dramatic Scale

迪士尼动画原则的规模化应用

Full Cinematic Treatment

完整电影级制作手法

Squash & Stretch: Fully animated character - 40%+ deformation for organic, living motion. Physics-defying when needed.
Anticipation: Dramatic tension - 400-600ms build-up. The audience waits with expectation.
Staging: Cinematography - establishing shots, close-ups, reveals. Think in scenes, not states.
Straight Ahead/Pose to Pose: Hybrid approach - pose-to-pose structure with straight-ahead detail passes.
Follow Through: Extended ecosystem - everything continues moving after primary action. World feels alive.
Slow In/Slow Out: Emotional timing - curves match narrative beats. Pause for emphasis.
Arcs: Choreographed paths - every element's path is intentionally designed.
Secondary Action: Full orchestration - layers of motion at different scales and speeds.
Timing: 120+ frames at 60fps. Full animation production values.
Exaggeration: Artistic license - break physics for emotional truth.
Solid Drawing: 3D environments - parallax, depth of field, camera movement.
Appeal: Memorable experiences - users tell others about these moments.
Squash & Stretch（挤压与拉伸）：完全动画化的角色——变形幅度达40%以上，呈现有机、鲜活的运动效果，必要时可突破物理规律。
Anticipation（预备动作）：制造戏剧性张力——400-600ms的铺垫时长，让用户满怀期待。
Staging（舞台布局）：电影镜头语言——建立全景镜头、特写镜头、镜头揭示等，以场景而非状态为设计单位。
Straight Ahead/Pose to Pose（逐帧动画与关键帧动画）：混合式制作——以关键帧搭建结构，再通过逐帧动画补充细节。
Follow Through（跟随动作）：扩展生态联动——主动作结束后，所有关联元素仍持续运动，让整个世界显得鲜活。
Slow In/Slow Out（渐入渐出）：情感化时序——动画曲线匹配叙事节奏，在关键节点停顿以强化重点。
Arcs（弧线运动）：编排式路径——每个元素的运动路径都经过精心设计。
Secondary Action（次要动作）：全方位协同——不同尺度、速度的多层运动同步配合。
Timing（时序控制）：60fps下不少于120帧，达到专业动画制作水准。
Exaggeration（夸张表现）：艺术化处理——为传递情感真实感，可突破物理规律。
Solid Drawing（扎实构图）：3D环境营造——视差、景深、镜头移动效果。
Appeal（吸引力）：难忘体验——这类场景会让用户主动分享给他人。

Easing Recommendations

缓动函数推荐

css
/* Multi-phase narrative */
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);

/* Building drama */
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);

/* Resolution/satisfaction */
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);

/* Complex sequences - use multiple keyframes with varying easings */
css
/* Multi-phase narrative */
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);

/* Building drama */
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);

/* Resolution/satisfaction */
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);

/* Complex sequences - use multiple keyframes with varying easings */

Best Use Cases

最佳适用场景

  • Product launch reveals
  • Brand hero moments
  • Premium onboarding (once per user)
  • Achievement/milestone celebrations
  • Game-like interactions
  • Data story visualizations
  • Annual report animations
  • Marketing microsites
  • 产品发布揭晓场景
  • 品牌核心展示时刻
  • 高端用户引导（每位用户仅展示一次）
  • 成就/里程碑庆祝
  • 类游戏交互
  • 数据故事可视化
  • 年度报告动画
  • 营销微型站点

Implementation Pattern

实现模式

css
@keyframes epicReveal {
  0% {
    opacity: 0;
    transform: perspective(1000px) rotateX(30deg) translateY(100px) scale(0.7);
    filter: blur(20px);
  }
  25% {
    opacity: 0.8;
    filter: blur(10px);
  }
  50% {
    transform: perspective(1000px) rotateX(-5deg) translateY(-20px) scale(1.05);
    filter: blur(0);
  }
  75% {
    transform: perspective(1000px) rotateX(2deg) translateY(10px) scale(0.98);
  }
  90% {
    transform: perspective(1000px) rotateX(-1deg) translateY(-5px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: perspective(1000px) rotateX(0) translateY(0) scale(1);
  }
}

.epic-reveal {
  animation: epicReveal 3000ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
css
@keyframes epicReveal {
  0% {
    opacity: 0;
    transform: perspective(1000px) rotateX(30deg) translateY(100px) scale(0.7);
    filter: blur(20px);
  }
  25% {
    opacity: 0.8;
    filter: blur(10px);
  }
  50% {
    transform: perspective(1000px) rotateX(-5deg) translateY(-20px) scale(1.05);
    filter: blur(0);
  }
  75% {
    transform: perspective(1000px) rotateX(2deg) translateY(10px) scale(0.98);
  }
  90% {
    transform: perspective(1000px) rotateX(-1deg) translateY(-5px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: perspective(1000px) rotateX(0) translateY(0) scale(1);
  }
}

.epic-reveal {
  animation: epicReveal 3000ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

Requirements

要求

  • Skippable: Always allow skip (tap/click/keypress)
  • Once per user: Store preference, don't repeat
  • Reduced motion: Provide instant alternative
  • Loading strategy: Preload or progressive enhancement
  • Performance budget: Dedicated optimization pass
  • Sound design: Consider audio (with mute option)
  • 可跳过：始终提供跳过选项（点击/按键操作）
  • 仅展示一次：存储用户偏好，避免重复展示
  • 简化动效选项：提供即时替代方案
  • 加载策略：预加载或渐进式增强
  • 性能预算：预留专门的优化环节
  • 音效设计：可搭配音频（需提供静音选项）

Production Considerations

制作注意事项

  • Storyboard before building
  • Get stakeholder buy-in on duration
  • Test on low-end devices
  • Consider video fallback for complex sequences
  • Budget 3-5x normal development time
  • 开发前先制作分镜脚本
  • 与利益相关方确认动效时长
  • 在低端设备上进行测试
  • 复杂序列可考虑视频 fallback 方案
  • 开发时长预算为常规动效的3-5倍

Key Insight

核心要点

Dramatic animations are mini-productions. They require storyboarding, iteration, and polish. The payoff is brand differentiation and memorable experiences. Invest accordingly.
戏剧性动画是微型制作项目。它们需要分镜设计、反复迭代和精细打磨。回报则是品牌差异化和难忘的用户体验，值得投入相应资源。