## 自然的动作

标准的动画时间曲线是好用的，但还可以更好，而且它们不足以让你的用户觉得对你的界面感到惊奇和愉悦，因为它们仍然是机器人的感觉，而不是如人类或受外力驱动的物体般完全流动性和自然。如果我们想要让动画变得真正的自然，我们就需要去观察自然世界以及真实的物体的行为，这样我们就可以模仿其动作。这就是软件中迷人、自然的动画的秘密本质：让你的物体动作符合物理法则，这样你界面中的元素就仿佛有了质量和动量，就如在屏幕上滑动或就在你的用户手指下方一般。

所以自然的动作时怎样的呢？符合物理法则的移动例子是什么？好吧，就如下面这个一般。

---

image

弹簧的阻尼

---

一个挂着方块的弹簧。它就如你所期望弹簧上的方块一样移动，因为你之前已经看过或体验过类似的弹簧运动很多次了。它的运动和之前说的简单动画时间曲线有很大的不同。让我们看一下弹簧上物体的动画曲线。

---

image

阻尼的震荡运动

---

这个曲线表示了挂在弹簧上的物体的运动，有很多的属性（例如拉力、摩擦力和阻力）都影响了其动作。如果你观察上图中的深蓝色曲线，它表示欠阻尼的系统，意味着物体在到达最终稳定位置前会来回震荡（反弹）。这就是让动画如上面的例子一般感觉像弹簧上挂着的方块一样需要的动画曲线类型。这种欠阻尼的弹簧动作可以让动画变得有弹性，很多app都在界面动画中采用了这种类型的动作。比如说，Facebook Paper几乎对所有界面动作使用了这种弹簧动作。

上图中中间的蓝色曲线也显示了一个欠阻尼的系统（在稳定前反弹过最终点），但它是一个反弹较少的更加平滑的动作类型。这会导致一个更精细的感觉，而过度反弹的动画会让你的界面变得太丰富或热情。

红色曲线描述了一个很少反弹而且只在到达最终位置前越过一点点的动作。如果物体一点都不震荡和反弹，只是缓慢地到达最终位置，这种弹簧就叫欠阻尼。

查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS

---

查看作者首页