制作 1200–2000ms…

当需要 1200–2000ms 的慢速、有意为之、具故事性和情感共鸣的动画（如 App 启动、品牌时刻、教程叙事、成就庆祝等）时使用。

适用场景

解决思路

1. 将动画时长控制在 1200–2000ms；在 60fps 下对应 72–120 帧，按动画级帧数来设计。
2. Squash & Stretch：用 30–40% 的变形塑造角色个性，让物体变成角色。
3. Anticipation：做完整戏剧性预备，用 300–400ms 蓄力制造张力和期待。
4. Staging：像电影摄影一样做场面调度，先建立镜头，再展示细节，保持清晰叙事流。
5. Straight Ahead/Pose to Pose：必须用 pose to pose，定义 6–10 个关键姿态来刻画叙事弧。
6. Follow Through：延长 settle，主运动完成后再保留 300–500ms 次级运动。
7. Slow In/Slow Out：用缓动曲线讲故事；尖锐开始表达紧迫，柔和结束表达解决。
8. Arcs：设计运动路径而非使用默认路径，让每个元素的轨迹参与整体构图。
9. Secondary Action：建立完整动作生态，让 primary、secondary、tertiary、ambient 动作协同工作。
10. Timing：使用 60fps 下 72–120 帧的动画质量帧数。
11. Exaggeration：为情绪放大而夸张，不只是推动位移。
12. Solid Drawing：通过 parallax、depth、perspective shifts 创造空间和维度叙事。
13. Appeal：追求深度情绪参与，让用户在这些动画中有所感受。
14. Narrative arc 缓动：animation-timing-function: cubic-bezier(0.34, 0, 0.14, 1);
15. Graceful/considered motion 缓动：transition: all 1500ms cubic-bezier(0.16, 1, 0.3, 1);
16. Building momentum 缓动：transition: all 1800ms cubic-bezier(0.65, 0, 0.35, 1);
17. Elastic storytelling 缓动：transition: transform 1600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
18. 实现模式：@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; }
19. 必须让用户能 skip/dismiss 动画。
20. 绝不阻塞关键路径。
21. 检测回访用户，避免在重复访问时播放。
22. 确保动画提供真实价值，而不是装饰。
23. 测试 motion sensitivity，优先支持 prefers-reduced-motion。
24. 把 deliberate animation 当作品牌投资：不只是展示发生了什么，而是让用户产生感受；为设计、迭代和测试预留预算，这些时刻定义感知质量。

适用边界 · 注意事项

• 重复访问用户、关键路径/会阻塞操作的流程、无法跳过或关闭的动画，不要使用。
• 纯装饰、无真实价值，或未测试/处理 motion sensitivity（如 prefers-reduced-motion）时，不要使用。
• 普通即时反馈、高频交互或需要快速响应的界面不要使用；1200–2000ms 会拖慢操作。