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