---

資料援引

B站視頻：wow，神奇的貝塞爾曲線！

博客：貝塞爾曲線簡單介紹

知乎：曲線篇: 貝塞爾曲線

---

貝塞爾曲線的用途

• 基于對汽車的的車身結構進行流體化設計而誕生
• 處理視頻狀態點之間的圖像變化
• 隨心所欲繪制曲線，比如：

---

一階貝塞爾（bezier）曲線

如上，$P_0$、$P_1$ 兩點構成了一條線段，而我們可以通過一個函數——線性插值（lerp），來根據一個 $t$ 值（$t\in [0,1]$） 得到線段上一點 $P$（圖中一直在滑動的點）。而 $P$ 的運動軌跡（紅線），便是一階貝塞爾線段（曲線）。線性插值的數學形式（一階貝塞爾曲線公式）為：

$$P=lerp(P_0，P_1，t)=(1?t)P_0+t{P}_1$$

一階貝塞爾曲線有兩個端點（$P_0$、$P_1$ ），0個控制點。

---

二階貝塞爾（bezier）曲線

如上，假設現在有點 $P_2$ ，它與 $P_1$ 構成了新的線段，我們得到兩個 一階插值點（$Q_1$、$Q_2$），它們構成了綠色線段，值得注意的是，兩個插值點具有相同的 $t$ 值。

而此時我們在綠色線段上生成一個 二階插值點（$P$），并讓它具有 與兩個一階插值點相同的$t$ 值。 那么該點的運動軌跡就是 二階貝塞爾曲線。其公式推導為：

• 綠色線段左端點的運動軌跡：

$$Q_1=(1?t)P_0+t{P}_1$$

• 綠色線段右端點的運動軌跡：

$$Q_2=(1?t)P_1+t{P}_2$$

• 二階貝塞爾曲線公式：

$$P=(1?t)Q_1+t{Q}_2$$
$$=(1?t)((1?t)P_0+t{P}_1)+t((1?t)P_1+t{P}_2)$$
$$=(1?t{)}^2{P}_0+2t(t?1)P_1+t^2{P}_2$$

二階貝塞爾曲線有兩個端點（$P_0$、$P_2$），一個控制點（$P_1$）。

---

三階貝塞爾（bezier）曲線

經過對一階、二階貝塞爾曲線的研究學習，我們能知道貝塞爾曲線通過在兩點之間再采點的方式實現降階，每一次選點都是一次的降階。

• $P_0$、$P_1$、$P_2$、$P_3$ 通過生成插值點 $Q_1$、$Q_2$、$Q_3$ 來構成二階貝塞爾（綠色線段）
• 在此基礎上生成插值點 $O_1$、$O_2$ 來構成一階貝塞爾（藍色線段）
• 之后以 $O_1$、$O_2$ 上的插值點 $P$ 的運動軌跡來生成三階貝塞爾曲線。

公式推導過程同二階貝塞爾曲線，因此不做贅述，直接貼出公式：

$$P=(1?t{)}^3{P}_0+3t(1?t{)}^2{P}_1+3t^2(1?t)P_2+t^3{P}_3$$

三階貝塞爾曲線有兩個端點（$P_0$、$P_3$），兩個控制點（$P_1$、$P_2$）。

---

高階貝塞爾（bezier）曲線

• 四階貝塞爾曲線示意圖：

• 五階貝塞爾曲線示意圖：

• 高階貝塞爾曲線公式：

$$P(t)=\sum _{i=0}^n{P}_i{B}_{i,n}(t)，t\in [0,1]$$

$$B_{i,n}(t)=C_n^i{t}^i(1?t{)}^{n?i}=\frac{n!}{i!(n?i)!}{t}^i(1?t{)}^{n?i}，【i=0,1,...,n】$$

---

三階貝塞爾曲線求插值（Slerp）

在熟悉了貝塞爾曲線的相關概念之后，我們來了解一下它的具體應用。通常它的應用場景是：

已知兩個端點和兩個控制點的情況下，根據 動畫進度向量 $P_x$ 求 $t$，再由 $t$ 確認的曲線求 $P_y$。

回顧一下三階貝塞爾曲線公式：
$$P=(1?t{)}^3{P}_0+3t(1?t{)}^2{P}_1+3t^2(1?t)P_2+t^3{P}_3$$

公式中的 $P_0$、$P_1$ 等都是二維向量，由兩個一維向量 $P_x$ 和 $P_y$ 構成。而我們根據 $t$ 求 $P$，本質上是根據 $t$ 來求一個坐標 $(x,y)$。因此，可將公式拆解在兩個一維向量上：
$$y=(1?t{)}^3{P}_{y0}+3t(1?t{)}^2{P}_{y1}+3t^2(1?t)P_{y2}+t^3{P}_{y3}$$

$$x=(1?t{)}^3{P}_{x0}+3t(1?t{)}^2{P}_{x1}+3t^2(1?t)P_{x2}+t^3{P}_{x3}$$

而由于我們在處理動畫時通常起點 $P_0$ 和終點 $P_3$ 都是可以確定的【$P_0(0,0)、P_3(1,1)$】，因此上述公式可以化簡為（以 $x$ 舉例，$y$ 同理）：

$$x=3t(1?t{)}^2{P}_{y1}+3t^2(1?t)P_{y2}+t^3$$

完全展開：
$$=3P_{y1}t?6P_{y1}{t}^2+3P_{y1}{t}^3+3P_{y2}{t}^2?3P_{y2}{t}^3+t^3$$

提取三次方系數 $a$：
$$a=3P_{y1}?3P_{y2}+1$$

提取二次方系數 $b$：
$$b=3P_{y2}?6P_{y1}$$

提取一次方系數 $c$：
$$c=3P_{y1}$$

將公式簡化為：
$$x=a{t}^3+b{t}^2+ct$$

移動 $x$，將公式變為一元三次方程：
$$a{t}^3+b{t}^2+ct?x=0$$

此時，就可以通過卡爾丹公式根據 $x$ 求出來 $t$。之后根據 $t$ 可以求得 $y$：
$$y=(1?t{)}^3{P}_{y0}+3t(1?t{)}^2{P}_{y1}+3t^2(1?t)P_{y2}+t^3{P}_{y3}$$

代碼實現：

double SlerpWithCubicBazier(double pX1, double pY1, double pX2, double pY2, double x) {// x為動畫進度，并不是t，t只是一個參數，先根據x求t，再由t確認的曲線上求y// 參考 https://github.com/gre/bezier-easing/blob/master/src/index.jsdouble t = 0.0;if (x <= 0.0) {t = 0.0;}else if (x >= 1.0) {t = 1.0;}else {// x = (1-t)^3*P0x + 3*(1-t)^2*t*P1x + 3*(1-t)*t^2*P2x + t^3*P3x// 提取系數：double a = 0.0 + 3 * pX1 - 3 * pX2 + 1.0;double b = 3 * 0.0 - 6 * pX1 + 3 * pX2;double c = 0.0 + 3 * pX1;// 公式可化簡為： x = at^3 + bt^2 + ct// 轉換為基于 t 的一元三次方程：at^3 + bt^2 + ct - x = 0double d = 0 - x;// 那么就可以通過 SolveCubic 函數根據a、b、c、d四個系數來求解一元三次方程的一個實根// 可能該一元三次方程的根不止一個，但不重要，即使有多個根我們也只需要其中之一，且要求這個根是在 0～1 之間的，符合 t 的取值范圍要求，如果沒有根/沒有符合要求的根我們會返回 -1double tTemp = SolveCubic(a, b, c, d);if (tTemp == -1) {return -1;}t = tTemp;}// Gy(t) = P0*(1-t)^3 + 3*P1*t*(1-t)^2 + 3*P2*t^2*(1-t) + P3*t^3  t[0,1]// PY0=0.0 PY3=1.0double coef1 = 0.0 * (1.0 - t) * (1.0 - t) * (1.0 - t);double coef2 = pY1 * 3 * t * (1.0 - t) * (1.0 - t);double coef3 = pY2 * 3 * t * t *  (1.0 - t);double coef4 = 1.0 * t * t * t;double gt = coef1 + coef2 + coef3 + coef4;return gt;
}

SolveCubic 函數的具體實現如下，值得注意的是，并不能簡單的將此函數的作用等同于求解一元三次方程，本函數的本質作用是貝塞爾曲線中根據 x 求出 t，這兩者有什么區別呢？舉個具體的例子，下面的代碼第 5 行有這樣的語句：

if (d == 0) return 0;

• 在 d=0 的情況下，普通一元三次方程是可以繼續求解的；
• 但是在 SlerpWithCubicBazier 調用 SolveCubic 時，是以 $d=0?x$ 的形式傳值的，$d=0$ 代表 $x=0$，此時曲線位于起點，t 的值可以確定，無需通過解方程獲得，即 $t=0$。

double FCPSolveCubic(double a, double b, double c, double d) {/* a=0 視為一元二次方程式 */if (a == 0) return FCPSolveQuadratic(b, c, d);/* d=0表明x=0，則t=0*/if (d == 0) return 0;/* 將三次方的系數變為1，方便后續判別式中的計算，即不用考慮 a^2 這一項了 */b /= a;c /= a;d /= a;/* q和r對應求根公式中的p和q，dis即是求根公式的判別式 △ */double q = (3.0 * c - FCPSquared(b)) / 9.0;double r = (-27.0 * d + b * (9.0 * c - 2.0 * FCPSquared(b))) / 54.0;double disc = FCPCubed(q) + FCPSquared(r);double term1 = b / 3.0;if (disc > 0) {/* 運用卡爾丹公式求得一個實根 */double s = r + sqrtf(disc);s = (s < 0) ? - FCPCubicRoot(-s) : FCPCubicRoot(s);double t = r - sqrtf(disc);t = (t < 0) ? - FCPCubicRoot(-t) : FCPCubicRoot(t);double result = -term1 + s + t;if (result >= 0 && result <= 1) return result;} else if (disc == 0) {double r13 = (r < 0) ? - FCPCubicRoot(-r) : FCPCubicRoot(r);double result = -term1 + 2.0 * r13;if (result >= 0 && result <= 1) return result;result = -(r13 + term1);if (result >= 0 && result <= 1) return result;} else {q = -q;double dum1 = q * q * q;dum1 = acosf(r / sqrtf(dum1));double r13 = 2.0 * sqrtf(q);double result = -term1 + r13 * cos(dum1 / 3.0);if (result >= 0 && result <= 1) return result;result = -term1 + r13 * cos((dum1 + 2.0 * M_PI) / 3.0);if (result >= 0 && result <= 1) return result;result = -term1 + r13 * cos((dum1 + 4.0 * M_PI) / 3.0);if (result >= 0 && result <= 1) return result;}return -1;
}

上面代碼中用到的知識：

• 一元三次方程判別式：

$$△=\frac{q^2}{4}+\frac{p^2}{27}$$

• 標準型方程中卡爾丹公式的一個實根：