贝塞尔曲线动作小工具

开始之前给看下效果：

---

在使用Cocos Creator做曲线动作时，总是有些刻意逃避使用cc.bezierTo（贝塞尔曲线），而是简单使用cc.moveTo、cc.JumpTo来模拟，后来更偷懒直接使用Creator的动画编辑器来生成，如图所示：

虽然上面的方法也能解决一些问题，但总是舍近求远，为什么有简单的方法不用，原因是cc.bezierTo的控制参数自己也没搞明白。

为了能将cc.bezierTo真正利用起来，我结合cc.Graphics组件制作了一个简易的贝塞尔曲线编辑工具，看下图：

图中是两条曲线，在编辑器中直接改变起点、终点、控制点1、控制点2的位置，即可实时显示出曲线路径。

左则DrawBezier组件面板中有一个Params的文本属性，就是cc.bezierTo可使用到的参数，结构如下：

1. [

2. [ //曲线一

3. {"x":-123,"y":214}, //起点

4. {"x":-418,"y":214}, //控制点1

5. {"x":-418,"y":42}, //控制点2

6. {"x":-92,"y":42} //终点

7. ],

8. [ //曲线二

9. {"x":-92,"y":42},

10. {"x":-26,"y":235},

11. {"x":90,"y":266},

12. {"x":228,"y":134}

13. ]

14. ]

将这个场景运行起来也可以修改编辑曲线，使用上面生成的参数可以预览到cc.bezierTo动作的效果：

下面简单介绍一下相关组件属性，先看一下图中的两个红色起点上的组件：

1. 不论是起点、终点、控制点，都有一个Dragable组件，负责实现节点的拖动

2. 图中的两个红色节为起点，上面挂了一个BezierAction组件，Target属性它的是终点节点，Ctrl1、Ctrl2分别是它的控制点。

再看一下DrawBezier绘图组件属性：

1. 在场景中添加一个节点，挂载一个cc.Graphics

2. 挂载DrawBezier组件，BezierActions是一个BezierAction组件的数组，将上图中的两个红色节点拖动到此处即可

3. ActionNode是用于执行cc.bezierTo的节点，前面图中的金币

4. Duration是每条曲线的持续时间，（目前来看该属性放在BezierAction组件上更好）

目前这个贝塞尔曲线编辑工具还比较简陋，还有不少需要改进的地方，如果你对此感兴趣可以在公众号中回复 “bezier”或 “贝塞尔”可以获取该源码，感谢您的关注。

---

活动来啦！！！

Shawn手中有6张《樊登读书》听书卡，分别是3张91天，3张31天，转发「奎特尔星球」任意一篇有感觉的文章到朋友圈，并附上一句正面简短的话语，截图到公众号即可领取，先到先得哦！

---

感谢关注「奎特尔星球」公众号，愿我们不断成长！

「奎特尔星球」微信公众号

「奎特尔星球」博客网站，建设中...