墙裂推荐贝塞尔(贝塞尔曲线是什么意思)

相信很多人都知道贝塞尔曲线，尤其是经常使用矢量绘图软件Illustrator。CorelDraw和位图软件Photoshop的同学，应该相当熟悉

 

相信很多人都知道贝塞尔曲线，尤其是经常使用矢量绘图软件Illustrator,CorelDraw和位图软件Photoshop的同学，应该相当熟悉贝塞尔曲线这些软件都提供了绘制贝塞尔曲线的功能贝塞尔曲线不仅在矢量绘图方面有重要应用，而且在web领域也占有一席之地。

根据贝塞尔曲线可以制作出接近真实的物理动画虽然CSS3动画里提供了用来控制动画速度的三阶贝塞尔曲线，canvas里也有生成贝塞尔曲线的方法但是在低版本浏览器中可能不支持，而且他们只能生成三阶贝塞尔曲线，更高阶就不支持了，所以就决定用javascript实现贝塞尔曲线，以便在页面中提升动画效果。

首先要了解下贝塞尔曲线的原理贝塞尔曲线的形状是由起点，终点和控制点决定的当起点和终点位置确定时，调整控制点的位置，可以得到不同形状的贝塞尔曲线由于编辑器不支持输入数学公式，用markdown写的公式，复制过来全乱了，所以整行公式我截图表示，文字里上下标符号就没办法了，凑合看吧。

一阶贝塞尔曲线：一阶只有起点和终点，没有控制点。假设有一条线段，起点为P0，终点为P1，线段上有一点P。点P的运动速度是v,从P0到P1需要的时间为1s。

所以

当任意时间t∈[0,1]时，P的位置为：

将v带入公式，得：

这就是一阶贝塞尔曲线的公式。二阶贝塞尔曲线：下图就是二阶贝塞尔曲线，P1是控制点

假设在P0P1线段上运动的点为PA,在P1P2线段上运动的点为PB。那么由一阶贝塞尔曲线可得出

所以二阶贝塞尔曲线的公式为:

三阶贝塞尔曲线：

同理可得

缓动函数动画中常用的应该是三阶贝塞尔曲线，当然同理，也可推出四阶，五阶和更高阶。四阶贝塞尔曲线：

五阶贝塞尔曲线：

n阶贝塞尔曲线通用公式：t∈[0,1]

本文介绍了下，贝塞尔曲线的原理及推导过程。关于贝塞尔曲线在js中的实现，请看下回。参考文档:贝塞尔曲线公式推导原理--贼疯狂--博客园