制作快乐、惊喜或愉悦时刻的动画时…

适用于成功确认、成就解锁、奖励、引导庆祝、彩蛋、正向反馈和欢迎动画等需要传递快乐与惊喜的界面动效场景。

适用场景

解决思路

1. 情绪目标：围绕意外愉悦、俏皮动作和超出预期的瞬间设计动画，让动画感觉有生命力、响应迅速且真正有趣。
2. 挤压与伸展：夸大弹性和有弹性的运动；物体在撞击时压缩 30-40%，用于成功状态、奖励和庆祝。
3. 预备动作：在揭示前建立期待；弹出/出现前先轻微回拉 100-150ms，制造令人满足的 payoff。
4. 舞台调度：把焦点引向愉悦瞬间；用清晰视觉层级确保惊喜元素获得全部注意力，庆祝动画期间压暗周围环境。
5. 直进动作（Straight Ahead Action）：为 confetti、particles 和庆祝效果创建自发、有机的运动；使用随机化路径，让效果自然且兴奋。
6. 跟随与重叠动作：让元素过冲并用有弹性的次级运动回稳；hair、ribbons 和装饰元素应在主动作结束后继续移动。
7. 慢入慢出：使用非对称缓动——快速开始、缓慢且满足地落地；`cubic-bezier(0.34, 1.56, 0.64, 1)` 可制造俏皮过冲。
8. 弧线：使用弹跳、弯曲轨迹而非线性路径；庆祝时元素应沿抛物线弧线移动。
9. 次级动作：给主动画添加 sparkles、particles 或 wobbles；例如一个“like” heart 辐射小爱心来放大愉悦。
10. 时间节奏：使用快速、干脆的时长（150-250ms）显得有能量；用快速爆发加微停顿创造节奏；成功动画用 200-400ms。
11. 夸张：把比例和运动夸张到真实之外 20-30%；使用超大弹跳、拉伸笑容和放大反应。
12. 扎实描绘/保持体积：在拉伸运动中保持体积；被挤压的元素应横向扩展以保持质量，读起来更有物理感。
13. 吸引力：使用圆润形状、明亮颜色和平滑曲线；在时间和位置上加入不对称，增加角色感和魅力。
14. Pop-in：时长 200-300ms，easing 用 `ease-out-back`。
15. Bounce：时长 300-500ms，easing 用 `spring(1, 80, 10)`。
16. Confetti：时长 800-1200ms，easing 用 `ease-out`。
17. Celebration：时长 400-600ms，easing 用 `ease-out-elastic`。
18. CSS 缓动变量：`--joy-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);`
19. CSS 缓动变量：`--joy-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);`
20. CSS 缓动变量：`--joy-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);`