优雅的动画，是让人察觉不到动画

有一类动画，你看完之后能准确说出它做了什么效果——弹入、旋转、淡出，然后你觉得"嗯，挺好看的"。

还有一类动画，你事后想描述它，却只能说"感觉很自然"。你不记得它做了什么，只记得整个体验是顺滑的。

我越来越觉得，后者才是动画该努力到达的地方。

动画的目的是引导，不是表演

在界面里，动画存在的理由只有一个：帮助用户理解发生了什么。一个元素出现，用户需要知道它从哪里来；一个操作完成，用户需要确认它发生了。动画是空间和时间之间的桥梁。

一旦动画开始表演自己，它就失败了。

你一定见过那种每个元素都要炫技一下的页面：进来旋转，离开消散，hover 时抖三下。每次交互都在提醒你"看，这里有动画"。用完之后，你记住了动画，没记住内容。

让动画消隐的最有效方式，是给它物理重量。

现实世界里没有什么东西会线性运动。树枝被风吹弯后，回弹时会过一点头；球落到地上，会弹起来然后慢慢静止。这些是人类几十年生活经验积累下来的直觉。当界面里的运动符合这个直觉，大脑就不需要额外处理它——它自然地被接受，然后被遗忘。

这也是为什么弹簧曲线（spring）通常比贝塞尔曲线更自然。贝塞尔曲线是在画一个形状，弹簧曲线在模拟一种物理。

大多数人在设计动画时，把精力放在缓动曲线上，但忘了时长同样关键。

太快：用户来不及建立空间感，操作变成闪烁。太慢：用户开始等待，动画从背景跳到前景，变成障碍物。

一个经验法则：导航级别的过渡（页面切换、大块内容出现）用 300–500ms；交互反馈（按钮、hover）用 150–250ms；微小状态变化（颜色、透明度）用 80–150ms。这些不是硬规则，但违背它们时你会感觉到。

这个博客自己有几处我偏爱的动画：页面载入时那段竖线从上往下生长，最后冒出一个叶芽——它模拟的是植物生长的逻辑，从下往上不对，从上往下才有重力感。夜间模式的萤火虫，每只的运动轨迹、持续时间都不一样，因为自然界没有整齐划一的东西。

这些动画你大概不会专门记住，但如果把它们去掉，你会觉得这个页面少了什么。那就对了。