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