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