动画UI 元素运动规律的描述
原则上，标准的 UI 动画时长是在大约 200ms 到 500ms 之间。小于 100ms 的动画是瞬时的，不会被用户注意到，但是如果大于 1000ms（1s），则会让人感觉迟钝，给人一种拖泥带水的感觉。
03
属性和值
属性是对 UI 元素运动规律的描述。为了使两个关键帧之间能够产生重庆动画制作，我们必须为它们设置不同的值。
在上面的例子中，我设置的动画属性是元素所在位置的 X 坐标，关键帧 1 的值是 0，关键帧 2 的值是 500 。如果两个关键帧的值完全相同，是不可能生成动画的。
我在下面列出了一些可以设置动画的常见属性。
当然，在现代的 UI 设计软件里，你可以修改任何可编辑的属性，使元素动起来。
颜色、透明度
尺寸
X 坐标、Y 坐标
旋转角度
宽度、高度
现在我们知道了什么是关键帧、属性以及什么是值，那么就可以来定义插值了。
插值是指两个关键帧之间，某一属性值的动态变化。
这么说有些拗口，让我们用例子来分解它。要使蓝色正方形从左向右移动，我们需要在 100ms 的时间内，重庆动画公司将正方形的 X 坐标属性值从 0（关键帧1，0ms）增加到 500（关键帧2，100ms）。
当定义两个关键帧之间的动画时，我们只需指定要更改的属性值。
在这个例子中，由于位置属性的 X 坐标值是唯一改变的值，因此不需要为正方形的其他属性指定值，因为这两个关键帧的其它属性是相同的。
04缓动
当元素动起来之后，你会发现它看起来很死板，并不生动。这是因为我们没有加入缓动函数。缓动函数可以为关键帧之间变化的属性值设置加速度或减速度。
Source
换句话说，它允许我们在动画的持续时间内改变元素的运动速度。注意，你可以为关键帧之间的每一种属性变化赋予不同的缓动函数。
如果没有缓动函数，动画就会匀速（加速度为 0）运动，这不符合现实生活中的物体运动规律。
现实中的物体往往会受到重力、惯性和阻力的影响。为了使动画更加真实，我们需要模拟出这些因素是如何影响缓动函数的。
缓动函数可以表示为 “三次贝塞尔函数”，它使用两组坐标来表示初始和结束状态，即（x1、y1、x2、y2）。三次贝塞尔曲线的默认线性运动函数是（0.0，0.0，1.0，1.0）。
幸运的是，我们不需要从头开始创建这些缓动函数，因为如今所有的重庆3D动画公司的软件都包含以下缓动函数预设。
1. 线性匀速
不受物理力（重量、惯性和阻力）影响的对象可以设置没有加速度的线性动画。
匀速曲线使用较少，但在更改对象状态（如颜色、透明度）时非常有效，因为这些属性的变化不需要改变对象的位置或比例。
2. 淡入或加速曲线
淡入函数会从初始关键帧开始影响属性值。当物体全速出现时可以使用该函数，例如 toast 提示。想象一辆汽车驶出时，它的速度从 0 开始逐渐增加，然后在驶出帧达到峰值。
加速曲线 图片来自Taras
3. 淡出或减速曲线
淡出函数会在到达结束关键帧时影响属性值。当物体全速进入时，应使用该函数。例如，单击汉堡包导航图标并使菜单进入帧时。想象一个雪橇从山顶滑到山底，它的起始速度为峰值，并在进入帧时减到零。
减速曲线 图片来自Taras
4. 淡入淡出或标准曲线
淡入淡出函数会在初始关键帧到结束关键帧之间影响属性值。当对象从帧的一个部分移动到另一个部分，但在整个过程中始终保持在帧中时，重庆影视制作公司应使用此功能，例如，点击卡片后扩展填充整个屏幕。想象一个钟摆，它的速度从峰值开始，缓慢减速到 0 ，然后再次加速。
当你拿捏不准的时候，大可以放心使用这个函数，这就是为什么它会被称为标准曲线。
也有更复杂的缓动函数，像是 “渐隐为黑色、弹性、反弹” 等，这些用的都比较少。你可以在 easings.net 上找到一些其他常用的函数。那么更复杂的动效是什么样子的呢？不同于在两个关键帧之间设置单个特性的动效，你也可以使用跨多个关键帧的不同的缓动曲线来设置具有多个特性的动效 。
Uplabs 上使用了我们刚才所学的函数原则的复杂动效示例
需要强调的是，每个插值都可以在动效过程中的不同点开始和结束 。举个例子，如果你需要为你的 UI 元素的 X 坐标设置超过 800ms 的插值，同时还要为它的尺寸设置插值，那么起始点和结束点可以设置在这 800ms 期间的任意位置。
这意味着两个关键帧之间动画的持续时间由元素属性的最长插值决定 。因此，如果要为多个属性设置动效，则可以在动效期间的任何点开始和结束该属性，重庆动画公司以创建各种效果，例如交错。这就是所谓的编排（choreography），是一个有点高级的主题，我们继续说。
不过，我建议初学者尽量保持简单。你往往很少需要为关键帧之间的每个属性都设置动画。当你对所有东西进行插值时，用户的眼睛也会被动效搞得晕头转向。
上一篇：在短时间内制作「流畅感」动画