贝赛尔曲线实现css3动画效果

一、什么叫做贝赛尔曲线

贝塞尔曲线(Bézier curve)，又叫作贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线，该曲线分为一次/二次/三次/多次贝塞尔曲线。

一次贝塞尔曲线，就是一条连接两点的直线段；

二次贝塞尔曲线，就是两点间的一条抛物线，利用一个控制点来控制抛物线的形状；

三次贝塞尔曲线，则需要四个点，一个起点，一个终点，两个控制点来控制曲线的形状，使用在css3中cubic-bezier就是三次贝赛尔曲线。

如下图，P0,P1,P2,P3四个控制点来控制曲线的形状

1-1

二、贝赛尔曲线在css3动画中的应用

因为浏览器兼容问题，cubic-bezier在PC端用的比较少，一般应用于移动端。cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。w3c文档中表述是所有值需在[0, 1]区域内，否则无效。但是在一些浏览器（Chrome，Firefox，Opera，IE11 预览版）下对P1(x1, y1)和P2(x2, y2)的坐标中的y1和y2并没有这个限制，曲线可以是负值，也可以取大于1的值。如果x1和x2是负数，或者大于1的值那么直接应用最终样式没有过渡效果。而一些老版本的浏览器曲线值仍需在[0, 1]区域内，否则直接应用最终样式。

2-1

具体用法为：

2-2

其中cubic-bezier中两个点参数代表的运动速度可以参考http://cubic-bezier.com，可以根据dom元素运动效果来调整。下面介绍CSS3中常见的几种运动轨迹是怎么用贝塞尔曲线实现的：

2-3

可以看到我们常见的几种运动方式其实都是简化的贝塞尔曲线，以下两行代码起到的效果是一样的。

transition: 2s all cubic-bezier(0.25,0.1,0.25,1.0);

transition: 2s all ease;

具体可以参考链接：https://www.w3.org/TR/css3-transitions/#transition-timing-function_tag，以上这些都是控制dom元素做规则运动时的速度，具体实现代码如下：

2-4

通过改变目标元素定位的left值来实现元素左右运动的效果。同理，我们也可以改变目标元素的其他属性来达到想要的效果。

三、如何运用贝塞尔曲线实现曲线运动

通过上面的例子，我们知道可以通过CSS3的transition属性来控制元素的动画效果。如果我们要控制一个元素做规则的圆周运动该怎么实现呢？看下面的demo：

3-1

可以很清楚的看到，我们是通过animation来实现动画效果，但是animation无法单独担当起实现动画的效果，需要用到承载动画的另一个属性——@keyframes，这个属性是有兼容性的问题的，使用时需要加上对应的前缀来解决兼容性问题。我们使用@keyframe定义了两个动画animX和animY，利用animation属性来同时改变元素的left值和top值，来达到圆周运动的效果，具体的cubix-bezier参数设定需要参考http://cubic-bezier.com。这里面animX有一个delay设置为-2s，是让目标元素提前到达动画开始的原点，元素的left、top值的变化速度是受贝塞尔曲线cubic-bezier(0.36,0,0.64,1)来控制的。通过同时改变left、top值来达到圆周运动的效果。

有兴趣的，可以参考贝塞尔曲线的参数设定来实现不一样的运动效果。