comfort-safety

舒适与安全动画

创建能让用户安心、提供保护感和安全感的动画。

情感目标

舒适感源于可预测、轻柔且不会让人受惊的动效。安全感意味着动画能传达保护、稳定和用户掌控感。

舒适感设计的迪士尼原则

挤压与拉伸

幅度极小且柔和（5-10%）。轻微形变，不失稳定。就像靠垫一样——吸收冲击，同时保持形状。

预备动作

清晰、令人安心的准备动作（150-200ms）。用户始终知道接下来会发生什么。没有意外，也没有隐藏操作。

演出布局

营造封闭、受保护的构图。边界清晰，空间安全。通过视觉层级引导用户，不造成信息过载。

连续动作法

避免使用。安全感需要可预测性。每个动作都应受到控制且符合预期。

跟随与重叠动作

轻柔、舒缓地归位。平稳落下。元素缓缓进入位置，就像被轻轻掖好。

缓入与缓出

全程使用平滑、柔和的曲线。没有突变。使用 ease-in-out，让动效可预测、令人舒适。

弧形运动

采用柔和、自然的曲线。以环抱、呵护的轨迹运动。动效应环绕而过，而不是穿行其中。

次要动作

只使用令人安心的提示，如勾号、盾牌、锁。提供安全与完成状态的视觉确认。

时间控制

节奏适中、不慌不忙（300-450ms）。留出处理信息和建立安全感的时间。切勿匆忙或突兀。

夸张

不夸张或仅略微夸张。动作应真实、自然。舒适感需要可信度。

扎实绘图

形态稳定、平衡，重心较低。造型应给人踏实、安全的感觉。

吸引力

采用温暖、柔和的颜色和圆润的边缘。风格应熟悉、舒适，避免有攻击性或尖锐的元素。

时间建议

元素	持续时间	缓动
过渡	300-400ms	ease-in-out
反馈	200-250ms	ease-out
确认	350-450ms	ease-out
展示保护状态	400-500ms	ease-in-out

CSS 缓动

--comfort-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--comfort-gentle: cubic-bezier(0.45, 0, 0.55, 1);
--comfort-settle: cubic-bezier(0.25, 0.1, 0.25, 1);

令人安心的模式

@keyframes comfort-embrace {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes comfort-check {
  0% {
    stroke-dashoffset: 24;
    opacity: 0;
  }
  50% { opacity: 1; }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.safe-element {
  animation: comfort-embrace 400ms ease-in-out forwards;
}

安全信号

• 为所有操作提供清晰、可见的反馈
• 使用撤销动画展示操作可逆
• 进度不会意外倒退
• 过渡过程中保持方向感
• 使用一致的模式，让用户可以信赖

适用场景

• 银行与金融
• 医疗保健应用
• 密码与安全流程
• 数据隐私控制
• 保险平台
• 备份与恢复
• 家长控制
• 敏感数据处理