编辑导语：在日常设计事情中，总会碰着动画设计，好比网站上的告白常常用到翻页动画的设计，在设计时会留意到它的速度、举动状态等等；本文关于举动动画的具体表明，还先容了几种差异的动画要领，我们一起来进修一下。

一、举动动画的理论依据

“动画的一切皆在于时间点和空间幅度”——迪士尼动画大家格里穆·乃特维克曾经说过。

现实糊口中的物体不只会当即启动和遏制，并且险些不会以恒定速度移动；当我们打开抽屉时，我们首先快速移动它，并在它出来时放慢速度；在地板上放一些对象，它会先向下加快，然后在撞到地板后反弹返来。

举动动画的理论依据但愿辅佐设计师相识物理举动背后的科学常识。

1. 举动动画

我们先从最简朴的举动动画说起。我们客观物理纪律照旧得从牛顿第二定律说起。

F＝ma，假如各人不大白这个公式，不要紧。

请答允我不那么考究术语的严谨性，通俗点来说，就是举动动画响应变革环境与执动作画的物体自己有关；假如你想表示的物体是一个沉甸甸的，那么他们的起始动画响应/参数的变革会较量慢；反之，物体是轻巧的，那么其起始动画响应/参数的变革会较量快。

从图上可以看到假如是沟通的操纵且移动沟通的间隔，轻巧的所花的时间越短。

2. 阻尼动画

提到阻尼，需要先容三个观念：临界阻尼、过阻尼、欠阻尼。

1）临界阻尼

糊口中一些高等的门或橱柜，他们在开合的进程中为了不造成太大的声响，他们的机器布局阻尼会只管设计靠近临界阻尼；这个进程最容易让人接管，不会感受有外界滋扰；过阻尼和欠阻尼，凡是能让你感受到有一只隐形的手，阻碍或促进举动。

2）过阻尼

从字面上会容易领略，就是阻尼很大，阻碍举动的成长；有些自动门或电梯门在闭合的进程中，在最后段里往往需要更长的时间；别的，影象枕的规复的进程也是过阻尼。

3）欠阻尼

阻尼不足，继而形成了振荡的特征；糊口中的一些弹簧门，在封锁的进程中，会多次摆动，最终趋于闭合。

做一个较量细腻的界面动画时候，假如追求理性一些，可以把动画的成就拆解成三个阶段：启动、运行、收尾；设计师需要花更多的时间去思量启动与收尾进程。

启动阶段：浮现力、质量、情况，可以表示材质的轻盈与厚重。

收尾阶段：浮现质量、速度、情况；阻尼凡是在这个阶段浮现。

举个例子：

请各人存眷启动与收尾阶段。

3. 呼吸动画

对付这个动画，设计师最直观的印象就是闪烁；在实施的进程中，对付闪烁一词会被赋予差异的领略。

设计师眼中的闪烁：“渐显 -> 渐隐 -> 渐显 -> 渐隐”；工程师眼中的闪烁：“显示 -> 埋没 -> 显示 -> 埋没”。

如何把动画做得更细腻，就在于如何将渐显与渐隐的进程如何描写得越发仔细。

对付最早的渐显、渐隐动画，首先想到了三角函数。

仔细调查这个函数，可以发明他的特点是在一个周期里是启动渐增、收尾减缓的进程，适合开拓操作简朴代码实现的动画结果；但，三角函数 *** 的记挂总以为那边照旧不太自然，看起来“呼吸较量急急”。

此刻试试深呼吸，体会一下；你会发此刻我们的在吸气的阶段，很快会就到达肺撑满的状态，然后吐气的阶段可以一连好久。

概略上比例漫衍是这样的：

融合入三角函数，将起始的渐增与收尾的减缓引入，譬喻下面的函数图形：

函数如下：

这个函数的周期为6，峰值呈此刻2。整个变革起始与收尾都是渐变过渡。

k=1/3，t=6, n={1,2,3,…}。

二、举动动画的动画曲线 1. 动画曲线展示

以上的举动形式都可以用动画曲线暗示，easings摆列的动画曲线如下：

他们表述了动画变革的水平与时间的干系，通过公道操作这些动画曲线背后的道理，可以让动画看起来越发真实。

2. 动画曲线数据抽象

我们可以依据举动需求，通过数据定制特按时间的动画曲线。

1）cubic-bezier（必需要领略把握的贝塞尔曲线）

cubic-bezier称为三次贝塞尔曲线，主要是生成速度曲线的函数。

类型：cubic-bezier(<x1>,<y1>,<x2>,<y2>)。

从上图中我们可以看到，cubic-bezier有四个点：

两个默认的，即：P0（0，0），P3（1，1）；两个节制点，即：P1（x1，y1），P2（x2，y2）。

注：X轴的范畴是0~1，超出cubic-bezier将失效，Y轴的取值没有划定，可是也不宜过大。

我们只要调解两个节制点P1和P2的坐标，最后形成的曲线就是动画曲线。

cubic-bezier界面如下，可以在特按时间内的cubic-bezier举动曲线：

2）interpolator

cubic-bezier不能暗示欠阻尼动画与呼吸动画，利用interpolator举办暗示。

欠阻尼动画：

呼吸动画：