贝塞尔曲线的由来
- 皮埃尔·贝塞尔1962年在设计汽车外形时发明了贝塞尔曲线,目前被广泛的运用在汽车流线设计和计算机图形领域
- 贝塞尔曲线包括起点,终点和控制点。
一阶贝塞尔曲线
没有控制点,只是简单的经过时间t, 从P0点移动到P1点
公式:
二阶贝塞尔曲线
控制点为P1, 根据两个绿点作出一条线段,然后确定贝塞尔曲线的点。比如t= 0.5时,左边的绿点在P0-P1的中点,右边的绿点在P1-P2的中点,两个绿点连线,再取中点,即黑点,就是此时贝塞尔曲线的点的位置。t= 0.86时,也是同理,绿点的连线取0.86的位置。如下图。黑点的轨迹就是贝塞尔曲线。
公式:
同理,
三阶贝塞尔曲线示例
t = 0.46时,各个点都取所在线段的0.46的位置,最后的点,即黑点的运动轨迹,就是贝塞尔曲线。
公式:
通用公式
从三阶贝塞尔的示例不难得出,黑点的位置是根据蓝点的位置确定的,而蓝点的位置是根据绿点的位置确定的。绿点的运动轨迹是一阶贝塞尔函数,蓝点是二阶贝塞尔函数,黑点是三阶贝塞尔函数。所以要求黑点的位置,需要求上一级的点的位置,依次递归。所以通用的求点的位置的公式如下
公式所表达的就是递归的思路:
在安卓中应用的例子
QQ 消息气泡拖拽
翻书效果
点赞的飘心动画
安卓的贝塞尔曲线API
安卓开发中,二阶和三阶贝塞尔函数就够用了,API 如下
上一组和下组功能是一样的,一般就用上一组的方式来实现。
quadTo示例
代码示例
cubicTo示例
代码示例
可以看出,函数调用比较简单,就是计算点麻烦些,不同的效果需要用不同的控制点。而且,可以看出二阶贝塞尔函数实现的是V型曲线,而三阶贝塞尔函数可以实现V型,S型,绳结型等更不规则的曲线。
再来分析下贝塞尔在安卓中的常见应用场景
加入购物车
可以看出是V型曲线,可以用quadTo实现
QQ 消息气泡拖拽
拉伸后的气泡分析
上图由两个圆,以及两条贝塞尔曲线组成。V型曲线,可以通过quadTo实现。
还是算各个点比较麻烦。。。
加载动画
三个圆的运动轨迹为S型,三阶贝塞尔曲线,可以用cubicTo实现
翻书效果
翻起的书角的两侧分别为V型曲线, 分别用二阶贝塞尔实现即可。
点赞的飘心动画
点赞后,心形图案按照S型曲线上升,可以用三阶贝塞尔实现
总结
贝塞尔曲线就是通过数据点和控制点来实现各种曲线效果
以上是个人学习贝塞尔函数的总结,参考了很多文章,感谢各位作者大大:
在线编辑贝塞尔曲线
Loading Balls
怎么理解贝塞尔曲线?
Android -- 贝塞尔二阶实现饿了么加入购物车效果
Finding a Point on a Bézier Curve: De Casteljau's Algorithm
Path中的贝塞尔曲线
安卓自定义View进阶-Path之贝塞尔曲线
Custom views in android using canvas api
Andorid 翻书效果
android实现QQ未读消息拖拽动态效果