dramatic-2000ms-plus

戏剧性动画（2000ms 以上）

超过 2000ms 后，动画就变成了电影。这些不是 UI 过渡，而是嵌入产品中的短片。仅用于定义品牌的重要时刻。

戏剧化呈现中的迪士尼原则

全方位电影化处理

挤压与拉伸：角色完全动画化，通过 40% 以上的形变呈现有机、鲜活的动作。必要时可以突破物理规律。

预备动作：营造戏剧张力——用 400-600ms 铺垫。让观众满怀期待地等待。

构图：电影摄影手法——建立镜头、特写、揭示。用场景而非状态来思考。

连续动作/姿势到姿势：混合方法——以姿势到姿势的结构为基础，再通过连续动作进行细节处理。

跟随动作：延伸的生态系统——主要动作结束后，一切仍在继续运动。让世界充满生气。

慢入/慢出：情感化的节奏——曲线与叙事节拍相呼应。适时停顿以突出重点。

弧线运动：精心编排的路径——有意设计每个元素的运动轨迹。

次要动作：全面编排——不同层级、不同速度的动作交织进行。

时间控制：在 60fps 下播放 120 帧以上。达到完整动画制作水准。

夸张：艺术自由——为了情感真实，可以打破物理规律。

扎实的绘制：3D 环境——视差、景深、镜头运动。

吸引力：打造令人难忘的体验——让用户愿意向他人讲述这些时刻。

缓动建议

/* 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 */

最佳使用场景

• 产品发布亮相
• 品牌主视觉时刻
• 高级引导流程（每位用户仅一次）
• 成就/里程碑庆祝
• 类游戏交互
• 数据故事可视化
• 年度报告动画
• 营销微型网站

实现模式

@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;
}

要求

• 可跳过：始终允许跳过（轻触/点击/按键）
• 每位用户仅一次：保存偏好设置，不要重复播放
• 减少动态效果：提供即时替代方案
• 加载策略：预加载或渐进增强
• 性能预算：安排专门的优化环节
• 声音设计：考虑加入音频（并提供静音选项）

制作注意事项

• 构建前先制作分镜
• 就时长取得相关方认同
• 在低端设备上测试
• 对于复杂序列，考虑使用视频作为备用方案
• 预留正常开发时间的 3-5 倍

核心见解

戏剧性动画是迷你制作项目。它们需要分镜、迭代和润色。其回报是品牌差异化和令人难忘的体验。应相应投入。