写在最前
在之前的这篇文章中我们提到了对于贝塞尔公式的运用。本次分享一下如何推导贝塞尔公式以及附一个简单的🌰即小球跟随曲线轨迹运动。
效果预览
demo地址
对于如何绘制连续的贝塞尔曲线可以参照这篇文章：基于canvas使用贝塞尔曲线平滑拟合折线段
在本例中生成的曲线由以上文章中的源码提供。
贝塞尔曲线公式推导
上面这张图是贝塞尔曲线的完整公式，看起来一脸懵逼=。=，因为这是N阶的推导公式，本次我们以一二阶贝塞尔公式的推导来理解一下这个推导公式的由来。先来看下网上流传已久的几张贝塞尔动图：
在这三张图中最重要的部分是我们需要理解变量t。t的取值范围是0-1。从上面的gif中也可以看出来似乎曲线的绘制过程就是t从0到1的过程。嗯其实就是这样的。t的真实含义是什么呢？
在p0p1、p1p2、p2p3等等的起点到控制点再到终点的连线中，每段连线都被分割成了两部分（仔细看动图中的黑色、绿色、蓝色圆点），各段连线中两部分的比值都是相同的，比值范围是0到1，而这个比值就是t
来看下面的一阶贝塞尔曲线示意图：
pt是p0p1上的任意一点，p0pt / ptp1 = t。从而我们可以引出下面的推导
此时t为时间，v为速度。我们可以看做从p0到p1的距离等于固定速度乘以固定时间
故到p上某一点的时间为固定的速度乘以某个时间值。同时固定的速度已经已经可以表示为上面的推导公式。此时等式右边就形成了t(0,1) / t；即相当于某个时间值 / 固定时间值，即产生了我们一开始所强调的变量t，其取值范围为[0,1]。从而下面的等式也就比较好理解了。
至此一阶贝塞尔曲线我们已经推到了出来，其中变量为起点、终点与比值t。
