【包教包会】3分钟学会贝塞尔曲线(支持原生)

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


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

增加点的数量,移动点的位置,就可以扩展成N阶贝塞尔曲线

总结:
将lerp方法等价变换成:
function lerp(P1,P2,t){
return (1 - t) * P1 + t * P2;
}
一阶贝塞尔曲线
image
A和B lerp出一个AB,其中A占股1-t,B占股t
二阶贝塞尔曲线
image
三阶贝塞尔曲线
image
无论有几个锚点,经过一代又一代的lerp,直到剩1个点为止
最后这个点的坐标连线,就是N阶贝塞尔曲线的轨迹
zf
演示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、【包教包会】130行代码实现多语言,i18n扔了扔了

2、【包教包会】CocosCreator Assembler经典案例第一期——2D实现3D透视翻转(附Demo源码)

3、【包教包会】对CocosCreator富文本RichText进行全面优化

5、权重随机算法,解决游戏中一切可控随机(刷怪、掉宝、转盘、抽卡等等)

mi

15赞

言简意赅、浅显易懂,大佬666

感谢,收获到情绪价值创作更有动力 :smirk_cat:

image 高产高产!

生产队的驴都没你…… :nerd_face:

2赞

我也需要鼓励鼓励:pleading_face:

哈哈这图我弄小点整个表情包

🫡,刚满血复活

你的代码写的很好,不过下一秒就是我的了。

你的代码写的很好,不过下一秒就是我的了。

拿去拿去 :grinning:

这下看懂了

比代数形式容易理解,原来就是嵌套线性插值 :+1:

研究出这个的人确实牛,这么简单的规则,就可以迭代出任何曲线

牛bbbbbbbbbb

大佬膜拜了

1赞

牛的,大佬:call_me_hand:

大佬收小弟不,自带学费的那种 :heart_eyes:

10月31日更新:
锚点坐标从Vec2改成Vec3
这样既可以填写自定义锚点,又可以直接填节点position
至于修改后是否支持3D贝塞尔,需要做3D的兄弟测一下

感谢提供思路 今天 搞了一个火箭打 目标的DEMO 实现了该效果