一文解析 Android 贝塞尔曲线

点击上方“程序员大咖”，选择“置顶公众号”

关键时刻，第一时间送达！

新媒体管家

点击上方“程序员大咖”，选择“置顶公众号”

关键时刻，第一时间送达！

相信很多同学都知道“贝塞尔曲线”这个词，我们在很多地方都能经常看到。利用“贝塞尔曲线”可以做出很多好看的UI效果，本篇博客就让我们一起学习“贝塞尔曲线”。

1

贝塞尔曲线的原理

贝塞尔曲线是用一系列点来控制曲线状态的，这些点简单分为两类：

类型作用数据点确定曲线的起始和结束位置控制点确定曲线的弯曲程度

一阶贝塞尔曲线 

一阶曲线是没有控制点的，仅有两个数据点(A 和 B)，最终效果一个线段。 

动态过程可以参照下图(贝塞尔曲线相关的动态演示图片来自维基百科)。 

一阶曲线其实就是lineTo方法。

二阶贝塞尔曲线 

在平面内任选 3 个不共线的点，依次用线段连接。 

在第一条线段上任选一个点 D。计算该点到线段起点的距离 AD，与该线段总长 AB 的比例。 

连接这两点 DE。 

从新的线段 DE 上再次找出相同比例的点 F，使得 DF:DE = AD:AB = BE:BC。

到这里，我们就确定了贝塞尔曲线上的一个点 F。接下来，请稍微回想一下中学所学的极限知识，让选取的点 D 在第一条线段上从起点 A 移动到终点 B，找出所有的贝塞尔曲线上的点 F。所有的点找出来之后，我们也得到了这条贝塞尔曲线。

动态过程如下： 

三阶贝塞尔曲线 

控制点个数为 4 时，就是三阶的曲线 

步骤都是相同的，只不过我们每确定一个贝塞尔曲线上的点，要进行三轮取点操作。如图，AE:AB = BF:BC = CG:CD = EH:EF = FI:FG = HJ:HI，其中点 J 就是最终得到的贝塞尔曲线上的一个点。 

这样我们得到的是一条三次贝塞尔曲线。 

动态图如下: 

三阶曲线对应的方法是cubicTo

要绘制更复杂的曲线，控制点的增加也仅仅是线性的。这一特点使其不光在工业设计领域大展拳脚，就连数学基础不好的人也可以比较容易地掌握，比如大多数平面美术设计师们。

2

学习贝塞尔曲线函数

一阶曲线是一条线段，非常简单，不再进行介绍，都是path的基本用法。

二阶曲线： 

首先，两个数据点是控制贝塞尔曲线开始和结束的位置，而控制点则是控制贝塞尔的弯曲状态 

从上面的动态图可以看出，贝塞尔曲线在动态变化过程中有类似于橡皮筋一样的弹性效果，因此在制作一些弹性效果的时候很常用。

代码如下：

三阶曲线： 

三阶曲线由两个数据点和两个控制点来控制曲线状态。 

三阶曲线相比于二阶曲线可以制作更加复杂的形状，但是对于高阶的曲线，用低阶的曲线组合也可达到相同的效果，就是传说中的降阶。因此我们对贝塞尔曲线的封装方法一般最高只到三阶曲线。

降阶与升阶

类型释义变化降阶在保持曲线形状与方向不变的情况下，减少控制点数量，即降低曲线阶数方法变得简单，数据点变多，控制点可能减少，灵活性变弱升阶在保持曲线形状与方向不变的情况下，增加控制点数量，即升高曲线阶数方法更加复杂，数据点不变，控制点增加，灵活性变强

3

贝塞尔曲线实例

一般使用贝塞尔曲线的情况如下：

至于只需要一个静态的曲线图形的情况，用图片岂不是更好，大量的计算会很不划算。

如果是显示SVG矢量图的话，已经有相关的解析工具了(内部依旧运用的有贝塞尔曲线)，不需要手动计算。

贝塞尔曲线的主要优点是可以实时控制曲线状态，并可以通过改变控制点的状态实时让曲线进行平滑的状态变化。

4

QQ红点的实现效果

qq的红点去除效果，其实就是用了两条贝塞尔曲线。 

基本理论：只要在拖动的时候 去改变辅助点的Y，和固定圆的半径， 就可以出来效果。

创建画笔

绘制动圆和固定圆

获取两个圆之间的距离:

onDraw（）方法绘制圆

处理onTouch（）方法，让红点随手势动起来

修改onDraw（）判断 

isOutToRange和isDisappear分别为true和false的情况

5

漂浮的心

漂浮轨迹就是一条三阶贝塞尔曲线，结合属性动画中的估值器进行设置。 

首先定义一个属性动画的估值器

之后自定义一个view可以生成爱心，添加透明度，缩放等动画和根据贝塞尔曲线改变其位置的属性动画。 

初始化爱心图片和多个插值器等，到时随即选取

入场动画

贝塞尔曲线动画

结合动画添加爱心

6

弹性的圆

还有一个实例，就是特别出名的弹性的圆

将这个圆的动画效果拆解开看的画，可以分为5个状态。 

这里写图片描述

这个动画效果的实现就是不同状态之间的转化加上水平位移的实现。

我们需要先了解一下如何用贝塞尔曲线画一个圆，因为我的做法是通过贝塞尔曲线来实现的。

就是所需要的数值c约等于0.551915024494f，具体可以参考这篇文章，http://spencermortensen.com/articles/bezier-circle/，那么这个c的值的作用，就是把图中的1理解为圆的半径，那么对应的另外个值就应该是半径乘以0.551915024494f。

坐标轴也就是Android中的坐标轴了，如果我们打算用贝塞尔曲线来画这么一个圆的话，我们需要知道这个圆的半径，以及图中的M的值，知道这两个值的话就能够知道图中12个点的坐标，知道坐标就能够用Path的cubicTo方法来使用贝塞尔曲线画出圆了。

这样我们就知道如何使用贝塞尔曲线来绘制一个圆了。也就是状态1和状态5我们都会绘制了，接下来看看状态2如何绘制。 

状态2其实就是把右边的点向右移动点距离 

状态3的实现就是在状态2的基础上修改了个值，一个是M的值加大，让圆看起来跟肥一点，还有就是圈住的那些点向右移动，做到居中。

实现如下：

• 来自：CSDN-伯努力不努力

• http://blog.csdn.net/u012124438/article/details/75949057#t4

• 程序员大咖整理发布，转载请联系作者获得授权

【点击成为安卓大神】