貝塞爾公式推導與物體跟隨複雜曲線的軌跡運動

在之前的這篇文章中我們提到了對於貝塞爾公式的運用。本次分享一下如何推導貝塞爾公式以及附乙個簡單的��即小球跟隨曲線軌跡運動。

歡迎關注我的部落格，不定期更新中——

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。

那麼二階公式如何從一階過渡過去呢？

來看下面這張圖：

其中pp(t)的經過路徑就是我們所求的二階貝塞爾曲線，那麼其實我們也可以將其從一階進行演變：

我們先將pa、pb兩個點所連線段當做一階曲線，之後再由兩端一階曲線分別表示pa、pb，最後就得到了我們的二階曲線公式。仔細觀察就能發現這和我們最初的完整公式是相同的：

其中n選擇不同數值時就可以得出不同階的曲線公式。同時從上面的推導過程也可以知道，不論是幾階曲線，我們都可以完全由一階來表示，而這個「表示」的過程就是我們在上面看到的形成動畫中那些輔助線。故可以感受下作者自己寫的曲線形成動畫中的效果，每段輔助線均由一階曲線形成：

相關位址

當我們知道曲線的公式有何而來之後，如何讓小球沿著曲線運動就很好理解了。我們生成的每段曲線都是可以用公式表示出來的，也正因如此我們就可以得到每個t值時的曲線座標點。從而知道物體的繪製座標。

//核心邏輯
lineargradient.prototype
.drawball = function() else 
if(ctrldrawindex !== ctrlnodesarr.length) 
}

慣例po作者的部落格，不定時更新中——

有問題歡迎在issues下交流。