第22页
所以硬核运营在制作动态时，会模拟出动画的物理特征：一个小球从水面下方加速向上浮动，随后越出水面一部分，再在水面随机沉浮，最终归于平静。这种动态源自浮力定律。
虽然我们无法命令计算机在新媒体动态内容设计时学习某种物理定律，但我们可以化繁为简，思考动态在本质上仅有两个关联参数：位移与时间。
只要知晓任何时刻物体所处的位置与时间，我们就可以模拟动态的完整过程。两者之间的图像关系数学表达式，被称为缓动函数（Easing）。
这种函数的曲线图像被称为贝塞尔曲线（Bézier curve）。它是电脑图形学中相当重要的参数曲线，你在知名矢量制图软件Corel Draw就见过它的大名，*Adobe *Illustrator中的钢笔工具也正是它。
当它用于描述“位移—时间”关系时，它就成了缓动函数中可能要应用的线性贝塞尔曲线、二次方贝塞尔曲线、三次方贝塞尔曲线、四次方贝塞尔曲线、五次方贝塞尔曲线……三次方及三次方以下贝塞尔曲线通常可以由我们完全自定义，高次贝塞尔曲线则一般可以由软件实现。
在各种开发环境中，有以下常见缓动函数类型支持调用（如图3-1所示）。
图3-1 缓动函数类型
在新媒体运营的前端，缓动函数在CSS、SCSS、Java Script中都可以出现。
CSS
CSS属性transition和animation允许指定缓动函数，但它并不支持所有的缓动函数，所以你必须指定贝塞尔曲线实现缓动函数。选取缓动函数以显示贝塞尔曲线。
div {
-webkit-transition: all 600ms缓动函数的贝塞尔曲线;
transition: all 600ms缓动函数的贝塞尔曲线;}
SCSS
Sass/SCSS帮助你描述动画。Compass除去了CSS属性transition和animation的前缀，还有Compass Ceaser插件允许你直接指定缓动函数名称实现缓动函数。
div {
@include transition(all 600ms ceaser($缓动函数名称));}
Java Script
使用jQuery加上jQuery Easing插件是实现缓动函数最简单的方法。你只需要指定缓动函数名称给 .animate函数当作第三个参数或缓动函数的键值。
div.animate({ top:‚-=100px‘}, 600, ‚缓动函数名称‘, function () {…})
但是很多时候，硬核运营会进行曲线自定义：
· 用于缓动函数曲线设计；
· 用于曲线图像设计。
那么当我们面对曲线cubic-bezier(0.47, 0, 0.745, 0.715)时，这个数组到底是什么含义？只有搞明白贝塞尔曲线的定义，我们才能在自定义二次方或三次方贝塞尔曲线时得心应手。
贝塞尔曲线的公式与定义
虽然在后文，我们可以用便捷的方式快速获取贝塞尔曲线表达式，但是如果不理解它的公式和定义，那么就很难在冗长的代码中识别它。所以这里，笔者对其公式进行说明。
基本公式
线性贝塞尔曲线
B(t )=P0 +(P1 -P0 )t =(1-t )P0 +t P1 , t ∈[0, 1]
给定点P0 、P1 ，线性贝塞尔曲线只是一条两点之间的直线。这条线由下式给出，且其等同于线性插值。
二次方贝塞尔曲线
B(t )=(1-t )2 P0 +2t (1-t )P1 +t 2 P2 , t ∈[0, 1]
二次方贝塞尔曲线的路径由给定点P0 、P1 、P2 的函数B（t）追踪。TrueType字型就运用了以贝塞尔样条组成的二次贝塞尔曲线。
三次方贝塞尔曲线
P0 、P1 、P2 、P3 四个点在平面或在三维空间中定义了三次方贝塞尔曲线。曲线起始于P0 走向P1 ，并从P2 的方向来到P3 ，一般不会经过P1 或P2 ，这两个点仅提供方向参照。P0 和P1 之间的间距，决定了曲线在转而趋进P2 之前，走向P1 方向的“长度有多长”。
曲线的参数形式为：
B(t )=P0 (1-t )3 +3P1 t (1-t )2 +3P2 t 2 (1-t )+P3 t 3 , t ∈[0, 1]
很多新媒体终端展示的成像系统中，如PostScript、Asymptote和Metafont，运用了以贝塞尔样条组成的三次方贝塞尔曲线描绘曲线轮廓。
指令字符
表3-1 指令字符表
曲线图像
运营者在开发、设计动态时，计算机会帮助我们实现曲线的运算，所以绘制当一个标准且完整的贝塞尔曲线时，我们只需要定义出发点和到达点以及两点之间的路径规则，表3-1中C、S、Q、T是我们需要重点掌握的对象。
下面来看路径规则的书写方式。比如二次方贝塞尔曲线，我们已经知道了其路径由给定点P0 、P1 、P2 的函数B（t ）追踪（如图3-2所示）。
图3-2 二次方贝塞尔曲线的路径
B(t )=(1-t )2 P0 +2t (1-t )P1 +t 2 P2 , t ∈[0, 1]
首先探讨Q参数（quadratic Bézier curveto，二次方贝塞尔曲线到），给定点P0 、P1 、P2 后，我们假设P1 的坐标是(x1 ,y1 )，P2 的坐标是(x,y)，则曲线部分书写规则就是Q x1 y1 x y（如图3-2所示）。那它完整的曲线图像书写规则就是(M mx my Qx1 y1 x y)。通过图3-2我们也能准确地理解二次方贝塞尔曲线仅需要一个控制点和两个锚点就能够实现曲线绘制。
又比如光滑二次方贝塞尔曲线，我们已经知道了其路径由给定点P0 、P1 、P2 、P3 的函数B（t ）追踪。因此，T参数下的二次方贝塞尔曲线的表达式就是(M mx my Qx1 y1 x y T x3 y3 )（如图3-3所示）。二次方贝塞尔曲线一般只会在路径形态的描绘中使用到，缓动函数的“位移—时间”往往使用的是三次方贝塞尔曲线。
图3-3 光滑二次方贝塞尔曲线的路径
三次方贝塞尔曲线是新媒体运营中最常用的曲线，因为正如它的概念“曲线起始于P0 走向P1 ，并从P2 的方向来到P3 ，一般不会经过P1 或P2 ，这两个点仅提供方向参照”。P0 和P1 之间的间距，决定了曲线在转而趋进P2 之前，走向P1 方向的“长度有多长”。可见它能够最大程度上自定义曲线的造型。在动态设计中，对于路径形态的描绘通常使用C参数（curveto，三次方贝塞尔曲线到）。
同样我们假设P1 、P2 、P3 坐标分别为(x1 ,y1 )、(x2 ,y2 )、(x,y)，那么它的曲线部分表达式显然应该是(C x1 y1 x2 y2 x y)，即控制点在前，终止点在后（如图3-4所示）。由于基于三次方贝塞尔曲线，一些最常见的既对in做ease也对out做ease的缓动函数得以实现。
图3-4 三次方贝塞尔曲线路径
缓动函数中的贝塞尔曲线
在缓动函数的图像表达式“位移—时间”中，很多新媒体终端会通过调整X轴“时间”和Y轴“位移”的单位长度，将easing终止点的横、纵坐标均设置到1。这样在视觉上缓动函数的贝塞尔曲线图像所占的图表空间必然是一个正方形。这一方面可以省略原点坐标和终点坐标，另一方面开发人员观察曲线时也更方便。