Cocos - 贝塞尔曲线 Bezier

本文介绍了贝塞尔曲线的基本原理,包括二阶和三阶贝塞尔曲线的构造方法,并详细讲解了Cocos2d-x中如何使用贝塞尔曲线进行动画效果,包括CCBezierTo和CCBezierBy的用法以及源码解析,同时提供了一个抛物线运动的应用示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、序言

本篇只讲述贝塞尔曲线数学公式的运用原理,不进行公式的背景介绍和推导内容,如需请移步贝塞尔曲线公式推导原理。

在现实中,我们也只需要掌握其大致原理和开发中实际应用即可。

二、贝塞尔曲线原理

原文链接:https://www.jianshu.com/p/6075f9782743

A. 二阶贝塞尔曲线

要素:1 个起点,1 个终点,1 个控制点

知识点

三阶的话就是 2 个控制点,四阶的话就是 3 个,以此类推,N 阶的话就是 N - 1 个控制点。而起点和终点始终只有一个。

步骤如下:

1.绘制 1 个起点,1 个终点和 1 个控制点,分别为 S 、E、C。然后将 SC、CE 分别连线。如下图所示。

2.从点 S 向 C 出发找到一个 D 点,从 C 向 E 出发找到一个 F 点,使得SD / SC = CF / CE。然后连接 DF。如下图所示。

3.在 DF 之间找到点 M,使得SD / SC = CF / CE = DM / DF

总结下:

(1) 二阶贝塞尔中,起初是 3 个点,然后我们再找 2 个点,然后再找 1 个点。这个点就是我们要找到的点。
(2) 我们需要由 S 向 C 出发,由 C 向 E 出现,找到所有的 D 和 F,再找到所有的 M。
(3) 将所有的 M 连接起来就构造出了最后的所需要的贝塞尔曲线了。
借用一个图,来详细观察一下其构造的过程。

B. 三阶贝塞尔曲线

三阶和二阶是类似的:
1.连接 A,B 形成 AB 线段,连接 B,C 形成 BC 线段,连接 C,D 形成 CD 线段。

2.在AB线段取一个点 E,BC 线段取一个点 F,CD 线段取一个点 G,使其满足条件: AE/AB = BF/BE = CG/CD。连接 E,F 形成线段 EF,连接 F,G 形成线段 FG。

3.在EF线段取一个点 H,FG 线段取一个点 I,使其满足条件: AE/AB =

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值