当界面需要安抚用户、传达安全与可控感时…

适用于银行与金融、医疗、密码与安全流程、数据隐私控制、保险平台、备份与恢复、家长控制、敏感数据处理等需要让用户感到安心、受保护且可预期的界面动画。

适用场景

解决思路

1. 以可预测、轻柔、不会惊吓用户的运动为情绪目标；用动画传达保护、稳定和用户可控感。
2. 挤压与拉伸：只做最小、柔和的挤压拉伸（5-10%）；像坐垫一样吸收冲击，同时保持结构稳定。
3. 预备动作：使用清晰、安抚性的预备动作（150-200ms）；让用户始终知道接下来会发生什么，不制造意外或隐藏操作。
4. 舞台调度：使用封闭、受保护的构图；建立清晰边界和安全空间；用视觉层级引导用户但不过度压迫。
5. 逐帧直接动作：避免使用；安全感动画需要可预测性，每个动作都应是受控且符合预期的。
6. 跟随与重叠动作：做柔和、有缓冲的收尾；让元素像被轻轻安顿好一样缓慢落位。
7. 慢入慢出：全程使用平滑、柔和的曲线，不要突然变化；用 `ease-in-out` 实现可预测、舒适的动态。
8. 弧线：使用柔和、自然的曲线；让运动路径像环抱、托住一样绕行，而不是生硬穿过。
9. 次要动作：只加入安抚性提示；如对勾、盾牌、锁；用视觉确认安全与完成。
10. 时间节奏：使用中等、不慌不忙的时长（300-450ms）；给用户时间处理信息并感到安全，绝不急促或突兀。
11. 夸张：不用或极少使用；保持真实、落地的动作，舒适感需要可信度。
12. 扎实的绘画：使用稳定、平衡的形体；降低重心；让形状显得扎实、安全。
13. 吸引力：使用温暖、低饱和的颜色；柔和的边缘；熟悉、舒适的美学；避免攻击性或尖锐感。
14. Transitions：时长 300-400ms，使用 `ease-in-out`。
15. Feedback：时长 200-250ms，使用 `ease-out`。
16. Confirmation：时长 350-450ms，使用 `ease-out`。
17. Protection reveal：时长 400-500ms，使用 `ease-in-out`。
18. 使用 CSS 缓动变量：`--comfort-smooth: cubic-bezier(0.4, 0, 0.2, 1);`。
19. 使用 CSS 缓动变量：`--comfort-gentle: cubic-bezier(0.45, 0, 0.55, 1);`。
20. 使用 CSS 缓动变量：`--comfort-settle: cubic-bezier(0.25, 0.1, 0.25, 1);`。
21. 定义安抚性入场动画：`@keyframes comfort-embrace`，从 `opacity: 0; transform: scale(0.98);` 到 `opacity: 1; transform: scale(1);`。
22. 定义安全确认动画：`@keyframes comfort-check`：`0% { stroke-dashoffset: 24; opacity: 0; }`，`50% { opacity: 1; }`，`100% { stroke-dashoffset: 0; opacity: 1; }`。
23. 将安全元素应用入场动画：`.safe-element { animation: comfort-embrace 400ms ease-in-out forwards; }`。
24. 为所有操作提供清晰、可见的反馈。
25. 用撤销动画显示操作可逆。
26. 进度条绝不意外倒退。
27. 转场保持方向感，不要让人迷失方位。
28. 使用一致、可依赖的模式。

适用边界 · 注意事项

• 需要制造紧急感、强警报或高风险实时操作争分夺秒的场景。
• 需要夸张、刺激、高能娱乐或强烈品牌表达的动画场景。
• 会因过于温和而延误关键安全警示传达的场景。