目录(注:特别感谢原作者:来自简书的fuck两点水)
![](https://i-blog.csdnimg.cn/blog_migrate/d8d482aa43745083ecc8440efb20ff12.webp?x-image-process=image/format,png)
一、贝塞尔曲线
1、贝塞尔曲线简介
来看看官方对神奇的赛贝尔曲线的介绍:贝塞尔曲线于 1962,由法国工程师皮埃尔·贝塞尔所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由 Paul de Casteljau 于 1959 年运用 de Casteljau 演算法开发,以稳定数值的方法求出贝兹曲线。贝塞尔曲线主要用于二维图形应用程序中的数学曲线,曲线由起始点,终止点(也称锚点)和控制点组成,通过调整控制点,贝塞尔曲线的形状会发生变化。
看完后是不是一脸蒙蔽,一句话理解贝塞尔曲线就是:将任意一条曲线转化为精确的数学公式。
2、赛贝尔曲线公式
竟然说了是将曲线转化为精确的数学公式,那么我们来看下具体的数学公式( 注:以下公式中,B(t) 为 t 时间下点的坐标; P0 为起点,Pn 为终点,Pi 为控制点 ):
(1) 一阶贝塞尔曲线(线段)
由 P0 至 P1 的连续点, 描述的一条线段
![](https://i-blog.csdnimg.cn/blog_migrate/e1fdcf346ad08c8094ef874eaab7ba58.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/cac19ef91a1d0a74576d89f30d5d169d.webp?x-image-process=image/format,png)
(2) 二阶贝塞尔曲线(抛物线):
由 P0 至 P1 的连续点 Q0,描述一条线段。
由 P1 至 P2 的连续点 Q1,描述一条线段。
由 Q0 至 Q1 的连续点 B(t),描述一条二次贝塞尔曲线。
![](https://i-blog.csdnimg.cn/blog_migrate/5c3d25f70e80f53084c6cb67cee11629.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/0bece0be46bebeba0c54b967052223df.webp?x-image-process=image/format,png)
(3) 三阶贝塞尔曲线:
![](https://i-blog.csdnimg.cn/blog_migrate/f7f03b665abad976a7b0c4a7052d3b66.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/8bd4832de787b655f5948401557613da.webp?x-image-process=image/format,png)
3、贝塞尔曲线在 Android 中的应用
其实贝塞尔曲线在 Android 自定义 View 中运用还是挺多的,比如
- Android 5.0 后下拉刷新的阴影曲线
- QQ 消息提醒的小红点
- 用于左右滑动时显示个数的点的移动动画
- 水流波动效果
- 一个弹性效果的抽屉菜单
4、Android Path 类中提供贝塞尔曲线的操作方法
在 Android 开发中,要实现贝塞尔曲线其实还是很简单的,因为 Android 已经给我们提供了相关接口,此接口方法在 Path 类中,而关于 Path 类的讲解,前面一篇博客就介绍过了。而且通过 Android 的 API 可以知道,贝塞尔曲线从 API1 就开始支持了。下面就是赛贝尔曲线对应的 API 方法了。
贝塞尔曲线 | 对应的方法 | 演示动画 |
---|---|---|
一阶曲线 <br/> (线性曲线) | lineTo |
![]()
一阶贝塞尔曲线动图.gif
|
二阶曲线 | quadTo |
![]()
二阶贝塞尔曲线(抛物线)动图.gif
|
三阶曲线 | cubicTo |
![]()
三阶贝塞尔曲线动图.gif
|
四阶曲线 | 无 |
![]()
四阶贝塞尔曲线动图.gif
|
5、通过 de Casteljau 算法绘制贝塞尔曲线
上面提过,Path 类中提供了画一到三阶的贝塞尔曲线的方法,如果我们需要绘制更高阶的贝塞尔曲线呢?我们可以采用德卡斯特里奥算法(De Casteljau’s Algorithm)来实现贝塞尔曲线。
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/db7e43c65a4b50b5734601f6c8f69899.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/0cde4fb16301b14221280f579342889c.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/60556b3bbf858c894d5bd8761170cf5f.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/6a7db3ddc3871d6bbb5ee1edb04e08c7.webp?x-image-process=image/format,png)
Github 上的代码:beziercurve
里面主要就一个类,beziercurve ,这是个自定义 View ,BezierCurve 里面主要提供了以下的方法:
Methods:
method 方法 | description 描述 |
---|---|
void start() | 开始贝塞尔曲线(required) |
void stop() | 停止贝塞尔曲线(optional) |
boolean addPoint() | 增加控制点(optional) |
boolean delPoint() | 删除控制点(optional) |
int getOrder() | 获取贝塞尔曲线阶数(optional) |
void setRate(int rate) | 设置移动速率(optional) |
void setTangent(boolean tangent) | 设置是否显示切线(optional) |
void setLoop(boolean loop) | 设置是否循环(optional) |
void setOrder(int order) | 设置贝塞尔曲线阶数(optional) |
最后通过 BezierCurveActivity 来展示。
二、贝塞尔曲线的应用
1.QQ 消息提醒可拖拽红点
Github 上的项目地址:qqmsgnotify
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/7a182c2dcab1d64add1a0d50bef4a82d.webp?x-image-process=image/format,png)
主要是在绘制红点的时候运用了贝塞尔曲线,在固定的位置中,拖拽的时候,有一种粘性的效果,就是这里运用了贝塞尔曲线。
![](https://i-blog.csdnimg.cn/blog_migrate/8f7bf67aaf84e2ebbc0de54f58b141fb.webp?x-image-process=image/format,png)
运用:
(1) 在对应的位置创建一个 TextView
(2) 设置 GooViewListener 监听事件就可以了
mTvPoint = (TextView) findViewById(R.id.point_conversation);
mTvPoint.setText("10");
mTvPoint.setTag(10);
GooViewListener listener = new GooViewListener(this, mTvPoint) {
@Override
public void onDisappear(PointF mDragCenter) {
super.onDisappear(mDragCenter);
Toast.makeText(QQMsgNotifyActivity.this, "消失了", Toast.LENGTH_SHORT).show();
}
@Override
public void onReset(boolean isOutOfRange) {
super.onReset(isOutOfRange);
Toast.makeText(QQMsgNotifyActivity.this, "重置了", Toast.LENGTH_SHORT).show();
}
};
mTvPoint.setOnTouchListener(listener);
2.Viewpage页面引导切换动画
Github 上的项目地址:guideview
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/5c82987a692b3d06122ee47baf34f8b6.webp?x-image-process=image/format,png)
其实这个例子也是,运用贝塞尔曲线也就是在绘制那个圆形的地方而已,其他地方基本不怎么使用贝塞尔曲线。