JS模拟CSS3动画-贝塞尔曲线

一、什么是贝塞尔曲线

1962年，法国工程师皮埃尔·贝塞尔（Pierre Bézier），贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线。如今，贝赛尔曲线是计算机图形学中相当重要的一种曲线，它能过优雅地模拟人手绘画出的线。它通过控制曲线上的点（起始点、终止点以及多个参考点）来创造、编辑图形。其中起重要作用的是位于曲线中央的控制线。这条线是虚拟的，中间与贝塞尔曲线交叉，两端是控制端点。移动两端的端点时贝塞尔曲线改变曲线的曲率（弯曲的程度）；移动中间点（也就是移动虚拟的控制线）时，贝塞尔曲线在起始点和终止点锁定的情况下做均匀移动。

二、贝塞尔曲线的应用

• 贝赛尔曲线广泛应用于绘图软件中，例如Adobe PhotoShop、Adobe Flash。

• Android可以通过自定义的view来实现贝塞尔曲线

• ios则可以使用UIBezierPath类来生成贝塞尔曲线

• 前端，canvas bezierCurveTo，css animation-timing-function: cubic-bezier(x,x,x,x}都有关于贝赛尔曲线的一些应用

三、贝塞尔曲线公式及其分析

一次：

二次：

三次：

n次

但是公式中只是给出了点与点之间的关系，并没有给出y与x坐标的关系，为此我们需要对其进行分解，下面以三次贝塞尔曲线为例子：