[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)