[TOC] # 動畫原理 ## 貝塞爾曲線 Bézier curve (貝塞爾曲線) 是應用于二維圖形應用程序的[數學曲線](http://baike.baidu.com/view/627248.htm)。? 曲線定義：起始點、終止點（也稱錨點）、控制點。通過調整控制點，貝塞爾曲線的形狀會發生化。? 1962 年，法國數學家 Pierre Bézier 第一個研究了這種矢量繪制曲線的方法，并給出了詳細的計算公式，因此按照這樣的公式繪制出來的曲線就用他的姓氏來命名，稱為**貝塞爾曲線**。 ## 曲線階 曲線階的意思即曲線階次，每個樣條曲線都有階次，這是一個代表定義曲線的多項式階次的數學概念。階次通常比樣條段中的點數小 1。因此，樣條線的點數不得少于階次。 ## 示例 <iframe class="code-result__iframe" data-trusted="1" style="width:344px;height:370px;border:1px #ccc solid" src="https://zh.js.cx/article/bezier-curve/demo.svg?p=0,0,1,0.5,0,1,0.5,0&amp;animate=1"></iframe> # 總結 貝塞爾曲線由其控制點定義。 貝塞爾曲線的兩種定義方法： 1. 使用數學方程式。 2. 使用繪圖過程：德卡斯特里奧算法 貝塞爾曲線的優點： * 我們可以通過控制點移動來用鼠標繪制平滑線條。 * 復雜的形狀可以由多條貝塞爾曲線組成。 用途： * 在計算機圖形學，建模，矢量圖形編輯器中。字體由貝塞爾曲線描述。 * 在 Web 開發中 — 用于 Canvas 上的圖形和 SVG 格式。順便說一下，上面的 “實時” 示例是用 SVG 編寫的。它們實際上是一個 SVG 文檔，被賦予不同的控制點做參數。你可以在單獨的窗口中打開它并查源碼：[demo.svg](https://zh.javascript.info/article/bezier-curve/demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1)。 * 在 CSS 動畫中描述動畫的路徑和速度。 ``` /** * 三階貝塞爾曲線 * 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; }, ``` # 參考 [貝塞爾曲線 總結](http://www.360doc.com/content/14/0730/15/13193477_398140518.shtml) [https://zh.javascript.info/bezier-curve](https://zh.javascript.info/bezier-curve)