
线段P1P2上有个滑点Q,t是滑动比例,取值范围[0, 1]
Q = P1 + 线段P1P2 * t
写成方法:
function lerp(P1, P2, t){
return P1 + ( P2 - P1 ) * t;
}
这就是1阶贝塞尔曲线

增加一个点P2
分别用t算出P0P1、P1P2的滑点
再将这2个滑点连起来(图中红色线段)
红色线段的滑点轨迹,就是2阶贝塞尔曲线

增加点的数量,移动点的位置,就可以扩展成N阶贝塞尔曲线
总结:
将lerp方法等价变换成:
function lerp(P1,P2,t){
return (1 - t) * P1 + t * P2;
}
一阶贝塞尔曲线

A和B lerp出一个AB,其中A占股1-t,B占股t
二阶贝塞尔曲线

三阶贝塞尔曲线

无论有几个锚点,经过一代又一代的lerp,直到剩1个点为止
最后这个点的坐标连线,就是N阶贝塞尔曲线的轨迹

演示Demo:https://gitee.com/szrpf/BezierDemo
Q :如何在自己项目中使用贝塞尔曲线
A :
step 1:将演示Demo中的Bezier.ts复制到自己项目的assets目录下,具体层级不限
step 2:通过tween就可以使用
填几个Vec2就添加几个锚点,从初始位置开始,移动到最后一个锚点结束,例如:
Gitee地址:https://gitee.com/szrpf
EMail地址:27185709@qq.com
推荐链接:
1、【包教包会】CocosCreator3.x全局单例最优解
2、【包教包会】CocosCreator Assembler经典案例第一期——2D实现3D透视翻转(附Demo源码)
3、【包教包会】对CocosCreator富文本RichText进行全面优化
5、权重随机算法,解决游戏中一切可控随机(刷怪、掉宝、转盘、抽卡等等)





高产高产!




