动效：解释关系与变化

先理解这个概念

有目的的动效可以说明元素从哪里来、状态怎样变化、注意力应该移向哪里。时长与缓动取决于距离、元素大小和任务频率。动效不能成为获取信息的唯一方式，应尊重减少动态效果偏好。

有用的动效解释对象从哪里来、去了哪里或状态怎样变化。过多运动会竞争注意力，延迟任务并可能引起不适。时长与缓动是实现参数，先应明确要表达的关系：展开、替换、移动和进度不能都套同一种弹跳动画。

记住这三个原则

1. 01

   每个动画都能回答“帮助用户理解什么”。

2. 02

   高频操作使用克制的反馈，避免反复等待。

3. 03

   提供 reduced-motion 下的即时或弱化过渡。

实际设计时，分三步做

1. STEP 01

   为每个动效写目的，没有关系或反馈价值的运动先删除。尤其避免给持续阅读的背景加入反复移动。

2. STEP 02

   检查动画是否阻塞输入，快速连续操作是否可中断，是否会因旧动画完成而覆盖新状态。

3. STEP 03

   为减少动态效果偏好提供替代，保留必要状态变化，用直接更新或轻量过渡表达结果。

一个容易理解的例子

让运动服务于因果关系，而不增加操作延迟。

@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; transition: none; }
}

适用边界与取舍

更短并不总是更好，过短可能看不清关系，过长则拖慢操作。应在实际任务中调整，而不是把固定毫秒数当作跨平台标准。