简单了解贝塞尔曲线
Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。
曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。
1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用他的姓氏来命名，称为贝塞尔曲线。
意义
贝塞尔曲线为计算机矢量图形学奠定了基础。
它的主要意义在于无论是直线或曲线都能在数学上予以描述。
原理和简单推导：
抛物线的三切线定理：
设P0、P02、P2是一条抛物线上顺序三个不同的点。过P0和P2点的两切线交于P1点，在P02点的切线交P0P1和P2P1于P01和P11，则如下比例成立：
当P0，P2固定，引入参数t，令上述比值为t:(1-t)，即有：
t从0变到1，第一、二式就分别表示控制二边形的第一、二条边，它们是两条一次Bezier曲线。将一、二式代入第三式得：
当t从0变到1时，它表示了由三顶点P0、P1、P2三点定义的一条二次Bezier曲线。
依次类推，
由四个控制点定义的三次Bezier曲线P03可被定义为分别由(P0,P1,P2)和(P1,P2,P3)确定的两条二次Bezier曲线的线性组合。
即由 (n+1) 个控制点Pi(i=0,1,...,n)定义的n次Bezier曲线P0n可被定义为分别由 前、后n个控制点 定义的 两条(n-1)次 Bezier曲线P0n-1与P1n-1的线性组合：
由此得到Bezier曲线的递推计算公式：
原理和公式理清之后，我们再通过图形变化，继续深入了解下贝塞尔曲线
以下公式中：B(t)为t时间下点的坐标；P0为起点，Pn为终点，Pi为控制点
-
一阶贝塞尔曲线(线段)
由 P0 至 P1 的连续点P01，描述的一条线段：
-
二阶贝塞尔曲线(抛物线)
由 P0 至 P1 的连续点 P01，描述一条线段。
由 P1 至 P2 的连续点 P12，描述一条线段。
由 P01 至 P12 的连续点 B(t)，描述一条二次贝塞尔曲线。
-
三阶贝塞尔曲线：
-
JS计算三阶贝塞尔曲线的点实现
/**
* 三阶贝塞尔曲线
* B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3, t ∈ [0,1]
*
* @param t 曲线长度比例
* @param p0 起始点
* @param p1 控制点1
* @param p2 控制点2
* @param p3 终止点
* @return t对应的点
*/
CalculateBezierPointForCubic : function ( t, p0, p1, p2, p3) {
var point = cc.p( 0, 0 );
var temp = 1 - t;
point.x = p0.x * temp * temp * temp + 3 * p1.x * t * temp * temp + 3 * p2.x * t * t * temp + p3.x * t * t * t;
point.y = p0.y * temp * temp * temp + 3 * p1.y * t * temp * temp + 3 * p2.y * t * t * temp + p3.y * t * t * t;
return point;
}
-
高阶贝塞尔曲线
-
4阶曲线：
4阶.gif -
5阶曲线：
5阶.gif -
应用到前端CSS3的贝塞尔曲线
transition-timing-function 规定过渡效果的时间曲线为贝塞尔曲线
transition: all 2s cubic-bezier( p1x, p1y, p2x, p2y )
项目预览地址：http://jsrun.net/tr3Kp