1. 项目概述：从“会用”到“懂原理”的跨越

在 CocosCreator 的开发过程中，cc.BezierTo这个动作（Action）几乎是每个开发者都接触过的老朋友。无论是让角色沿着一条优美的曲线跳跃，还是让 UI 元素以灵动的轨迹滑入屏幕，它都是实现平滑、非线性运动的首选。很多教程会告诉你：“用cc.bezierTo，传入几个点，就能画出贝塞尔曲线。” 这没错，但如果你只停留在这个层面，一旦遇到曲线不跟随手柄旋转、运动速度不均匀、或者想实现更复杂的复合曲线时，可能就会束手无策。

今天，我们不满足于“调用 API”，而是要深入cc.BezierTo的源码腹地。我的目的很明确：通过彻底解析其内部实现，让你不仅知道怎么用，更理解它为什么这么工作。当你掌握了从参数解析、插值计算到节点更新的每一个步骤，你就能真正“驯服”这条曲线，应对各种定制化需求，甚至能从中汲取灵感，优化自己的动画系统。这对于希望进阶为高级 Cocos 开发者，或是对游戏动画原理有浓厚兴趣的朋友来说，是一次绝佳的实践。

2. 核心原理：三阶贝塞尔曲线的数学与实现

在拆解源码之前，我们必须先夯实理论基础。cc.BezierTo实现的是三阶贝塞尔曲线。理解这一点是读懂所有代码的前提。

2.1 三阶贝塞尔曲线的定义

一条三阶贝塞尔曲线由四个点定义：一个起点（P0）、两个控制点（P1, P2）和一个终点（P3）。在 CocosCreator 的cc.bezierTo函数中，我们需要传入一个包含这三个点的数组：[p1, p2, p3]。这里容易产生一个误解：为什么只传三个点？因为起点（P0）默认为动作执行时节点的当前位置。这是BezierTo与BezierBy的一个关键区别，后者是基于当前位置的相对位移。

曲线的路径由以下参数方程描述，其中t是范围在 [0, 1] 之间的参数，代表动画完成的进度：

B(t) = (1-t)³ * P0 + 3*(1-t)²*t * P1 + 3*(1-t)*t² * P2 + t³ * P3

这个公式是源码中插值计算的核心。它本质上是一种线性插值的嵌套。你可以这样理解：P0和P1连线上插值得到点A，P1和P2连线上插值得到点B，P2和P3连线上插值得到点C；然后A和B插值得到D，B和C插值得到E；最后，D和E插值得到的点，就是当前t值对应的曲线上的点B(t)。源码中的计算直接使用了上面的多项式形式，因为效率更高。

2.2 源码中的关键数据结构

在cocos2d/core/actions/action-interval.js中找到cc.BezierTo的类定义。其构造函数的核心是保存我们传入的配置点。

ctor (duration, points) { super.ctor(duration); // points 是一个包含三个cc.Vec2对象的数组 this._config = points; this._p0 = new cc.Vec2(); this._p1 = new cc.Vec2(); this._p2 = new cc.Vec2(); this._p3 = new cc.Vec2(); }

这里有几个关键成员：

• _config: 存储用户传入的[p1, p2, p3]。
• _p0, _p1, _p2, _p3: 用于在每帧计算中存储当前曲线的四个定义点。注意，_p0会在动作开始时被赋值为节点的初始位置。

注意：_config存储的是“控制点”，而_p0到_p3是用于实际计算的“曲线定义点”。这个区分很重要，它使得BezierTo可以适应任何起始位置。

3. 生命周期与核心流程拆解

一个动作从创建到执行完毕，会经历几个关键的生命周期方法。cc.BezierTo重写了其中的startWithTarget和update方法。

3.1 初始化：startWithTarget(target)

当动作开始与一个目标节点（如一个Sprite）绑定时，此方法被调用。

startWithTarget (target) { super.startWithTarget(target); // 调用父类方法，设置_target和_elapsed等状态 // 当前节点的位置作为贝塞尔曲线的起点 P0 this._p0.x = target.x; this._p0.y = target.y; // 将用户传入的控制点配置赋值给 P1, P2, P3 const locConfig = this._config; this._p1.x = locConfig[0].x; this._p1.y = locConfig[0].y; this._p2.x = locConfig[1].x; this._p2.y = locConfig[1].y; this._p3.x = locConfig[2].x; this._p3.y = locConfig[2].y; }

这里藏着一个至关重要的细节：_p0是在动作开始时捕获的节点位置。这意味着，如果你在动作执行过程中，通过其他方式（例如另一个动作或直接赋值）改变了节点的位置，BezierTo的轨迹不会随之改变。它仍然会固执地按照最初记录的_p0和预设的_p3来计算路径。这是理解其行为的关键，也解释了为什么有时动画会“飘走”。

3.2 驱动更新：update(time)

这是每一帧都会调用的核心方法。参数time是归一化的时间，范围 [0, 1]，由动作总时长_duration和已过去时间_elapsed计算得出（time = _elapsed / _duration）。

update (time) { if (this.target) { const t = time; // 此时的 t 就是贝塞尔曲线公式中的参数 const x = this._formula(t, this._p0.x, this._p1.x, this._p2.x, this._p3.x); const y = this._formula(t, this._p0.y, this._p1.y, this._p2.y, this._p3.y); // 将计算出的坐标直接赋值给目标节点 this.target.x = x; this.target.y = y; } }

_formula是一个私有方法，就是前面提到的三阶贝塞尔公式的具体实现：

_formula (t, a, b, c, d) { // (1-t)³ * a + 3*(1-t)²*t * b + 3*(1-t)*t² * c + t³ * d return (Math.pow(1 - t, 3) * a + 3 * Math.pow(1 - t, 2) * t * b + 3 * (1 - t) * Math.pow(t, 2) * c + Math.pow(t, 3) * d); }

核心逻辑清晰明了：根据当前动画进度t，分别计算出曲线对应的 X 坐标和 Y 坐标，然后直接设置节点的位置。这就是BezierTo全部的运动学秘密。

4. 高级特性与性能优化剖析

看懂了基本流程，我们再来深入两个高级话题：reverse方法和性能考量。

4.1 逆向动作：reverse()的实现

cc.BezierTo继承自cc.ActionInterval，后者要求可逆向的动作实现reverse方法。BezierTo的逆向逻辑很有意思：

reverse () { const locConfig = this._config; // 创建一个新的 BezierTo 动作 const newPoints = [ cc.v2(this._p2.x, this._p2.y), // 原P2变为新P1 cc.v2(this._p1.x, this._p1.y), // 原P1变为新P2 cc.v2(this._p0.x, this._p0.y) // 原P0（起点）变为新终点 ]; // 注意：这里创建的是 BezierTo，终点是原起点。 // 但新动作执行时，它的 _p0 会是执行瞬间节点的位置，而非原_p3。 return new cc.BezierTo(this._duration, newPoints); }

这里有一个巨大的“坑”：reverse()返回的新动作，其路径并非原路径的简单倒放。它创建了一条新的贝塞尔曲线，其控制点顺序颠倒（P1和P2交换），且终点设置为原曲线的起点（_p0）。但是，当这个新动作执行时，它的startWithTarget会以当时节点的位置作为新曲线的起点。如果原动作执行完后节点正好停在_p3，那么逆向动作看起来就是原路返回。但如果节点位置被干扰了，逆向路径就会错乱。

实操心得：不要指望bezierTo.reverse()总能实现完美的原路返回动画。对于需要精确往返的路径，更好的做法是分别定义两条曲线动作，并用sequence连接。

4.2 性能与精度考量

1. 计算开销：每帧需要执行两次_formula计算（分别对x和y），其中包含多次Math.pow调用。在移动端或对象数量极大时，这可能成为性能瓶颈。一个常见的优化是使用查表法（LUT, Look-Up Table）：预先计算一个包含101个点（t从0到1，步长0.01）的坐标数组，更新时根据time索引取近似值。牺牲一点点精度，换取大量计算。

2. 匀速运动问题：贝塞尔曲线的参数t并不代表移动距离的均匀增长，而是时间的均匀增长。这意味着节点在曲线上移动的瞬时速度是不均匀的。在控制点距离很远、曲线弯曲度大的部分，视觉上会感觉移动先慢后快再慢。如果你需要匀速（恒速）运动，需要对t进行重映射，即根据弧长来参数化曲线，这需要更复杂的积分计算。CocosCreator 自带的BezierTo没有做这个处理。

3. 与物理引擎的协作：如果你希望带物理刚体的节点沿贝塞尔曲线运动，直接使用cc.BezierTo修改x, y属性是错误的。这会与物理引擎的位置计算冲突，导致抖动或穿透。正确做法是：在update中根据曲线计算目标位置，然后使用物理引擎提供的applyForce或设置linearVelocity来让物理系统驱动节点向该位置移动。

5. 实战应用与常见问题排查

理解了源码，我们就能更自信地运用它，并快速定位问题。

5.1 精准控制曲线形态

通过调整控制点，你可以创造出各种曲线：

• 对称曲线：让 P1 和 P2 关于 P0-P3 线段的中垂线对称。
• S型曲线：P1 和 P2 分别位于起点和终点的两侧。
• 循环与尖点：通过将控制点设置在某些特殊位置，理论上可以产生过回环或尖点，但这在 UI 动画中较少使用。

一个实用的调试技巧是：在update方法中，将计算出的中间点(x, y)用cc.graphics实时画出来，你就能在编辑器里清晰地看到节点的运动轨迹，方便调整控制点。

5.2 常见问题速查与解决方案

5.3 自定义扩展：实现跟随旋转的贝塞尔动作

基于源码，我们可以轻松扩展一个BezierToWithRotation。核心是在update中增加旋转计算。

// 伪代码示例 update (time) { super.update(time); // 或者复制父类的坐标更新逻辑 if (this.target) { // 计算当前t时刻的位置（复用_formula） const x = this._formula(t, this._p0.x, this._p1.x, this._p2.x, this._p3.x); const y = this._formula(t, this._p0.y, this._p1.y, this._p2.y, this._p3.y); // 计算当前t时刻的速度/切线方向（对公式求导） // B'(t) = -3(1-t)²P0 + 3(1-t)(1-3t)P1 + 3t(2-3t)P2 + 3t²P3 const dx = this._formulaDerivative(t, this._p0.x, this._p1.x, this._p2.x, this._p3.x); const dy = this._formulaDerivative(t, this._p0.y, this._p1.y, this._p2.y, this._p3.y); // 通过反正切计算角度，并转换为度数 const rotation = Math.atan2(dy, dx) * 180 / Math.PI; this.target.rotation = rotation; this.target.x = x; this.target.y = y; } } _formulaDerivative (t, a, b, c, d) { const mt = 1 - t; return (-3 * mt * mt * a) + (3 * mt * (1 - 3*t) * b) + (3 * t * (2 - 3*t) * c) + (3 * t * t * d); }

通过这样的源码级剖析，cc.BezierTo从一个黑盒工具，变成了你手中可以随意拆卸、改装和理解的精密部件。下次当你需要一条流畅的曲线动画时，你脑子里浮现的将不仅是几个API参数，而是那条由数学公式驱动、在update中一帧帧绘制出的优美轨迹。这种从“知其然”到“知其所以然”的掌控感，正是深入阅读引擎源码带来的最大回报。