Cocos creator3.8 2D贝塞尔曲线移动控件
简介
- Creator 版本：3.8.6
- Cocos store链接： 控件链接
- 演示视频： bilibili链接
- 教学视频：
- 在线体验Demo:
这次给大家带来的是 2D贝塞尔曲线移动控件，先展示效果 （也可以点击上面
demo链接自己试试）
以及我结合了贝塞尔曲线控件+残影控件的效果展示
Gif还是有些卡，也可以来这里看视频效果
背景
在制作游戏时，经常需要移动动画元素，直接移动过去是最简单的办法，但是比较呆板，效果不佳。看到很多成熟的游戏中，元素按照贝塞尔曲线移动会带来灵动而高级感。比如这个
于是便想做一个好用的控件，方便按照贝塞尔曲线移动元素。其实我的诉求非常简单，只需要
- 使用方便。只需指定终点，控件就可以按照起点和终点计算出一条二阶曲线（二阶已经足够了），并使绑定的元素node按照计算出的轨迹运动。
- 控件支持各种调参，可以通过调整控制点的一些属性，实现自定义曲线，并带有一定的随机性。
基于此两点目的，我开始了控件制作。
实现原理
说到二阶贝塞尔曲线，基本梦回高中了，上网又温习了一下贝塞尔曲线的特性。
对于二阶贝塞尔曲线，最重要的就是控制点。如图，
P0，P2分别是起点和终点，P1作为控制点。Q0为 P0 到 P1 上的动点，Q1 是 P1 到 P2 上的动点。它们在 P0P1 和 P1P2 上是按比例移动的，当 Q0 移动到 P0P1 的中点时，Q1 也恰好移动到 P1P2 的中点， Q0 移动到 P1 时，Q1 也恰好移动到 P2 。而 B(t) 是 Q0 到 Q1 的动点。B(t) 的轨迹，就是以 P0 为起始点，以 P2 为终止点。（其实参考一下公式就好，太多相关资料了，我也是参考的）
于是，主体思路即是
- 当拿到目标坐标后，先按照控制点参数，计算出这次贝塞尔曲线的控制点
- 由于有了起点P0，控制点P1，终点P2，就可以算出P0P1+P1P2，粗略认为是总路程（其实肯定逼这个值小），通过路程/速度，就可以算轨迹运动时间了。 （速度也是控件的参数之一）
- 然后呢，在update的循环中，不断按照计算贝塞尔曲线当时点的位置（当然，还需要考虑旋转，这里需要计算切线，来调整角度；里面还要考虑角度是否平滑过渡等）
使用方法
虽然实现起来比较复杂，但最终使用起来却异常的简单。
二部极简操作
- 一拖： 将BezierMove组件拖入目标节点
- 二设： 调用BezierMove.moveTo方法，传入终点坐标即可
- 同时可以设置其他参数，来实现自定义与随机性配置，例如：
- 控制点偏移率
- 控制点随机系数
- 控制点方向
- 缓动函数
- 运动速度
- 角度平滑系数
- 同时可以设置其他参数，来实现自定义与随机性配置，例如：
可以调整的参数也可详见
控件优势
-
智能路径生成引擎
自动构建二阶贝塞尔曲线 实时动态锚点修正 支持2D节点运动 完美适配Spine/DragonBone动画 只需设定终点坐标，自动生成符合物理直觉的优雅曲线 -
参数级操控系统
- 40+预设缓动函数（弹性/回弹/脉冲等）
- 智能速率适配（FixSpeed模式）
- 轨迹曲线高度可控可随机（控制点偏移率，随机系数，方向）
- 可视化曲线路径
-
即插即用架构
组件化设计 3.8全版本兼容 源码级控制 -
包含了对应Demo以及源码效果，还有详细的视频教学，方便使用者快速上手
写在最后
希望这个控件能够帮助到有需要的朋友。