由于采用扁平设计，动画的质量是创造伟大的界面更是必不可少的因素。通过动作设计，可以影响产品的整体体验，并从市场上把它分开。动画可以使复杂的相互作用简单，把好设计成令人难忘的用户体验。但是，我们如何创造品质的动画？缓和曲线是许多核心部件，需要一个体面的动画，使得它梦幻般的之一！
问题是，如何理解缓和曲线的工作有可能是个困难。而且人们知道想如何缓和曲线的工作，以及如何设计自己的更好的理解。一个缓和曲线是定义在图上的加速度方式的线。缓和曲线由许多其他的名字，如运动曲线，定时功能，贝塞尔曲线或只是曲线通常所说。一个缓和曲线的不同形状也有像缓解关键字，缓出，或缓解。
如何缓解工作曲线
缓和曲线通过X，Y轴创建。的X和Y的含义可以变化从应用到应用。在发展中，X和Y状态的含义保持相当一致。其被定义为动画（Y）的百分比随时间的变化（Ⅹ）。
这缓和曲线时的样子付诸实践？这就是时间和间隔的概念开始发挥作用。
时间和间隔
时间是持续时间为一个动画来完成。间距是每个“帧”之间的空间，但在我们的情况下，它是动画的各个百分比之间的空间。下面，我已经展示了如何间距涉及缓动曲线。想想垂直=快速和水平=缓慢。
设计一个缓动曲线
设计一个缓动曲线人们总是问我，“我什么时候用缓动曲线？”我的回答-这真的取决于具体的方案。没有一个对绝对的工作缓动曲线。起草这些曲线设计是运动的重要组成部分。缓和曲线出现在现实世界中的物理范围内后，通常设计的，但并不总是遵循这些规则。现实世界是一个伟大的地方对于获得灵感动画。例如，在现实世界中没有对象开始在全速度并立即停止-就像一个线性缓和曲线一样。对象总是有某种加速或减速。这只是众多迪士尼概念在概述了1 动画的12条原则，这在很大程度上是基于物理学和物理学的夸张。
当起草一封缓动曲线记住，纵是快速和水平是缓慢的。您创建的曲线应该是取决于你的交互设计。您可以创建许多不同类型的（X，Y）网格内的曲线。
宽松的发展曲线之内
在宽松的发展曲线被称为“定时功能”，这是创建一个定义在图形加速模式的贝塞尔曲线的数学方程。这通常在开发中使用的函数是立方贝塞尔。
在大多数编程语言，有喜欢易用性的，容易出一些预定义宽松的曲线，并易于在出。一定要检查的文件，看看哪些曲线是预定义的。下面我列出了在被预先定义的CSS的缓和曲线。
- 易用性在=立方贝塞尔（0.42，0，1，1）
- 缓解-OUT =立方贝塞尔（0，0，0.58，1）
- 缓解-IN-OUT =立方贝塞尔（0.42，0，0.58，1）
在CSS中有可以在对象类中定义的“全球”放心，这也适用同样的易用性，以每一个关键帧。例如，如果你有一个反弹，动画将反弹在每个关键帧。
您可以通过关键帧中定义他们获得更精确与例。重要的是要记住，缓和曲线的百分比值定义是很重要的，你想轻松自如地发生。
@keyframes动画名称{
0％{
动画定时功能：立方贝塞尔（1，0.01，0.91，0.46）;
}
25％{
动画定时功能：线性;
}
50％{
动画定时-功能：立方贝塞尔（0，.02,0,1.01）;
}
75％{
动画定时功能：线性;
}
100％{
动画定时功能：线性;
}
}
缓和曲线的概念并不仅仅适用于一个单一的动画，但可以适用于延迟！它可以使当屏幕有动画时的许多元素很有趣。这里是一个正弦波延迟的一个例子。我通过创建萨斯循环使用指南针数学佣工来计算正弦创造了这个。
@for $ I从1到7 {
＆：第n个孩子（＃{$ I}）{
动画延迟：（＃{罪（0.4）*（$ I）} S）;
}
原创文章，作者：Smiler李想，如若转载，请注明出处：https://www.iamue.com/5774/
