[译]《Motion Design for iOS》（十一）

现在来添加第三个球的动画。这第三个球，会在开始的时候动作的很快，然后归于正常，不断变慢最终停止在最终值。这是一个淡出动作的例子。

下面是淡出动作的时间曲线。

---

image

---

一个视觉化这种曲线的方式是想象餐厅里的服务员给你拿来了你的食物。他们不会快速地突然将盘子放在你的面前，他们会慢慢地最终把盘子停放在桌子上。

最后一种更加常见的时间曲线是淡入动作，这意味着非常缓慢地开始动画，然后快速地结束。

下面大致就是这种动画曲线的样子。

---

image

---

观察淡入动画曲线，你可以看到在0.5秒的时候（动画时间的一半）比例值仅仅才到最终值的1/4。这创建了一种动画开始得非常缓慢迟钝，然后在最后的时间里迅速地跑到最终值的感觉。

线性，淡入淡出，淡出，淡入动画曲线是四种大部分界面系统默认提供的内置的时间选项，比如说，在CSS3动画中就默认提供这些时间曲线。在iOS的动画框架——Core Animation中也是默认提供的。

类似Core Animation和CSS3中提供的缓慢曲线在数学上由Bezier曲线定义，就如你在Sketch、Illustrator或者其他矢量绘图工具中绘制的一样。要定义在缓慢动画中使用的Bezier曲线类型，你需要选择曲线端点的位置。Core Animation和CSS3执行缓慢动画使用的特定曲线类型是一种三维的Bezier曲线，意味着有四个控制点来定义。

---

image

移动控制点是如何影响曲线形状的。

---

下一节我们会开始学习漂亮动画背后的真实魔法，它创建了自然感觉的动作。

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

---

查看作者首页