用户界面缓解曲线

由于采用扁平设计，动画的质量是创造伟大的界面更是必不可少的因素。通过动作设计，可以影响产品的整体体验，并从市场上把它分开。动画可以使复杂的相互作用简单，把好设计成令人难忘的用户体验。但是，我们如何创造品质的动画？缓和曲线是许多核心部件，需要一个体面的动画，使得它梦幻般的之一！

问题是，如何理解缓和曲线的工作有可能是个困难。而且人们知道想如何缓和曲线的工作，以及如何设计自己的更好的理解。一个缓和曲线是定义在图上的加速度方式的线。缓和曲线由许多其他的名字，如运动曲线，定时功能，贝塞尔曲线或只是曲线通常所说。一个缓和曲线的不同形状也有像缓解关键字，缓出，或缓解。

如何缓解工作曲线

缓和曲线通过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）; 
}