上一篇我们说了 Path 的基本操作，这一篇让我们来说一下 Path 的进阶用法——贝塞尔曲线。
那什么是贝塞尔曲线？贝塞尔曲线能在 Android 中实现什么效果？以及如何做到的？这篇文章都会告诉你。
什么是贝塞尔曲线？
贝塞尔曲线是由皮埃尔·贝塞尔发表的，他主要应用于汽车的主体进行设计，后来成为计算机图形学相当重要的参数曲线。
贝塞尔曲线由什么组成的？它通常由数据点和控制点两个部分组成的。那什么是数据点和控制点呢？请看下表：
| 类型 | 作用 |
|---|---|
| 数据点 | 曲线的起点和终点 |
| 控制点 | 控制曲线的弯曲程度 |
这样听起来可能还有点抽象，我们直接上图来看看。
一阶贝塞尔曲线：
一阶贝塞尔曲线其实就是一条直线，没有控制点，只有数据点 P0，P1，如下图：
Android提供方法：lineTo()
二阶贝塞尔曲线：
二阶贝塞尔曲线有一个控制点 P1 和两个数据点 P0，P2。如下图：
Android 提供方法：quadTo()
三阶贝塞尔曲线：
三阶贝塞尔曲线有两个控制点 P1，P2 和两个数据点 P0，P3。如下图：
Android 提供方法：cubicTo()
更高阶的曲线 Android 并没有提供 API ，所以在这只会介绍二阶和三阶曲线，如果对更高阶的曲线有兴趣的话，可以去贝塞尔曲线———维基百科和贝塞尔曲线动态演示这两个网站多了解一下。
贝塞尔曲线是怎么形成的
那么这条曲线究竟是怎么形成的呢？先从二阶曲线分析一下：
二阶贝塞尔曲线形成原理：
1.连接 A，B 形成 AB 线段，连接 B，C 形成 BC 线段。
2.在 AB 线段取一个点 D，BC 线段取一个点 E ，使其满足条件： AD/AB = BE/BC，连接 D，E 形成线段 DE。
3.在 DE 取一个点 F，使其满足条件：AD/AB = BE/BC = DF/DE。
4.而满足这些条件的所有的 F 点所形成的轨迹就是二阶贝塞尔曲线，动态过程如下：
三阶贝塞尔曲线形成原理：
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 = BF/BE = CG/CD = EH/EF = FI/FG。连接 H，I 形成线段 HI。
4.在 HI 线段取一个点 J，使其满足条件： AE/AB = BF/BE = CG/CD = EH/EF = FI/FG = HJ/HI。
5.而满足这些条件的所有的J点所形成的轨迹就是三阶贝塞尔曲线，动态过程如下：
在 Android 中使用贝塞尔曲线
说了这么多原理，是时候要知道要怎么运用贝塞尔曲线了。这里我会用两个例子来说明二阶和三阶贝塞尔曲线的运用：
二阶曲贝塞尔曲线的应用：
方法预览：
public void quadTo (float x1, float y1, float x2, float y2)
有什么用：
画出二阶贝塞尔曲线
怎么用：
因为二阶贝塞尔曲线需要三个点才能确定，所以 quadTo 方法中的四个参数分别是确定第二，第三的点的。第一个点就是 path 上次操作的点。
现在用一个实例来练习下这个方法：
水波纹效果：
效果图：
实现思路：
- 画出至少两段的波纹
- 使用 ValueAnimator 不断获取平移的值 offset
- 利用 offset 不断的改变波纹的位置
现在分步骤来说明：
1. 画出至少两段波纹
我们首先要画出两段波纹。一段波纹就包含两条曲线。每条曲线我们可以使用 quadTo() 方法来画。
为了更容易理解，请看下图：
mWL 是一段波纹的长度，mCenterY 是屏幕高度的一半。
- 画第一段波纹的第一条曲线：
mPath.moveTo(-mWL, mCenterY); //将path操作的起点移动到(-mWL,mCenterY)
mPath.quadTo((-mWL * 3 / 4) , mCenterY + 60, (-mWL / 2), mCenterY); //画出第一段波纹的第一条曲线
- 画出第一段波纹的第二条曲线：
mPath.quadTo((-mWL / 4) , mCenterY - 60, 0, mCenterY); //画出第一段波纹的第二条曲线
- 画出第二段波纹的第一条曲线：
mPath.quadTo((mWL /4) , mCenterY + 60, (mWL / 2), mCenterY); //画出第二段波纹的第一条曲线
- 画出第二段波纹的第二条曲线：
mPath.quadTo((mWL * 3/ 4) , mCenterY - 60, mWL, mCenterY); //画出第二段波纹的第二条曲线
2. 使用 ValueAnimator 不断获取平移的值 offset
那么现在来想一下应该怎么让这几段波纹动起来呢？我们需要一个 offset 的平移值。这个值应该加在每个点的x坐标上，并且 offset 是不断变化的，这样才会形成一个向右平移的效果。那怎么才能获取到这个变化的offset的值呢？答案就是要使用 ValueAnimator 。用法如下：
ValueAnimator animator = ValueAnimator.ofInt(0, mWL); //mWL是一段波纹的长度
animator.setDuration(1000);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
offset = (Integer) animation.getAnimatedValue(); //offset 的值的范围在[0,mWL]之间。
postInvalidate();
}
});
animator.start();
}
这样只要动画开始，offset 就会不断从 0~mWL 变化。
3. 利用offset不断的改变波纹的位置
现在为曲线的所有 X 坐标都加上 offset 值。这样就会产生平移的效果，为了简化代码，这里使用的 for 循环来画曲线。
mPath.moveTo(-mWL + mOffset, mCenterY);
for (int i = 0; i < 2; i++) {
mPath.quadTo((-mWL * 3 / 4) + (i * mWL) + offset, mCenterY + 60, (-mWL / 2) + (i * mWL) + offset, mCenterY);
mPath.quadTo((-mWL / 4) + (i * mWL) + offset, mCenterY - 60, i * mWL + offset, mCenterY);
}
接下来为了适配各种屏幕，需要根据手机的宽度来计算出所需要的波纹的数目：
mWaveCount = (int) Math.round(mScreenWidth / mWL + 1.5); //这样就保证波纹能覆盖整个屏幕
上面的 for 循环也可以改为：
mPath.moveTo(-mWL + mOffset, mCenterY);
for (int i = 0; i < mWaveCount; i++) {
mPath.quadTo((-mWL * 3 / 4) + (i * mWL) + offset, mCenterY + 60, (-mWL / 2) + (i * mWL) + offset, mCenterY);
mPath.quadTo((-mWL / 4) + (i * mWL) + offset, mCenterY - 60, i * mWL + offset, mCenterY);
}
三阶贝塞尔曲线的应用：
弹性的圆：
效果图：
实现思路：
- 用贝塞尔曲线画出正圆
- 通过修改坐标的大小来形成圆收缩的效果
1. 用贝塞尔曲线画出正圆
我们首先要知道怎么使用 cubicTo() 方法来画个半径为 r 的正圆。其实使用 cubicTo() 来画正圆就需要 4 条三阶贝塞尔曲线组合而成。如图所示：
如果要画 P0P3 那道曲线应该怎么画呢？我们就要知道 P0，P1，P2，P3 这四个点的坐标。P0，P3 的坐标我们已经知道了，分别是 (0,-r)，(r,0)。那么 P1 和 P2 的坐标是什么呢？其实这里有个论证的过程，这个过程在这篇文章就有：Approximate a circle with cubic Bézier curves，感兴趣的可以看看。这里只说结果，最后得到一个数，这个数就是 c = 0.551915024494。也就是说 P1，P2 的坐标就是 (cr,-r)，(r,-cr)。其他点的坐标也是用同样的方法得出的，这里就不细说了。
为了更方便管理这几个点，我将这几个点封装分成两个类。分别是 HorizontalLine 和 VerticalLine 。圆的上下两条线属于 HorizontalLine，圆的左右两条线属于 VerticalLine。
以下是这两个类的代码：
private float c = 0.551915024494f;
class HorizontalLine {
public PointF left = new PointF(); //P7 P11
public PointF middle = new PointF(); //P0 P6
public PointF right = new PointF(); //P1 P5
public HorizontalLine(float x,float y) {
left.x = -radius*c;
left.y = y;
middle.x = x;
middle.y = y;
right.x = radius*c;
right.y = y;
}
public void setY(float y) {
left.y = y;
middle.y = y;
right.y = y;
}
}
class VerticalLine {
public PointF top = new PointF(); //P2 P10
public PointF middle = new PointF(); //P3 P9
public PointF bottom = new PointF(); //P4 P8
public VerticalLine(float x,float y) {
top.x = x;
top.y = -radius*c;
middle.x = x;
middle.y = y;
bottom.x = x;
bottom.y = radius*c;
}
public void setX(float x) {
top.x = x;
middle.x = x;
bottom.x = x;
}
}
以下是用cubicTo()方法画圆的代码：
private Paint mPaint;
private Path mPath;
private int mScreenHeight;//屏幕高度
private int mScreenWidth;//屏幕宽度
private float radius = 100;
private void initPaint() {
mPath = new Path();
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.parseColor("#59c3e2"));
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
}
private void initPoint() {
mTopLine = new HorizontalLine(0,-radius);
mBottomLine = new HorizontalLine(0,radius);
mLeftLine = new VerticalLine(-radius,0);
mRightLine = new VerticalLine(radius,0);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPath.reset();
//将画布移动到屏幕正中间
canvas.translate(mScreenWidth / 2, mScreenHeight / 2);
mPath.moveTo(mTopLine.middle.x,mTopLine.middle.y);
mPath.cubicTo(mTopLine.right.x,mTopLine.right.y,mRightLine.top.x,mRightLine.top.y,
mRightLine.middle.x,mRightLine.middle.y);
mPath.cubicTo(mRightLine.bottom.x,mRightLine.bottom.y,mBottomLine.right.x,mBottomLine.right.y,
mBottomLine.middle.x,mBottomLine.middle.y);
mPath.cubicTo(mBottomLine.left.x,mBottomLine.left.y,mLeftLine.bottom.x,mLeftLine.bottom.y,
mLeftLine.middle.x,mLeftLine.middle.y);
mPath.cubicTo(mLeftLine.top.x,mLeftLine.top.y,mTopLine.left.x,mTopLine.left.y,
mTopLine.middle.x,mTopLine.middle.y);
canvas.drawPath(mPath,mPaint);
}
效果如下：
2.通过修改坐标的大小来形成圆收缩的效果
想要达到圆收缩的效果只要增加和减少某些坐标就可以了。比如我要达成如图的这种效果，应该怎么做呢？
只要增加 P2，P3，P4 的横坐标，就可以达到这种效果。
现在试试把圆收缩起来：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPath.reset();
//将画布移动到手机屏幕的正中间
canvas.translate(mScreenWidth / 2, mScreenHeight / 2);
//将右边的线的点的横坐标都增大
mRightLine.setX(radius * 1.5f);
mPath.moveTo(mTopLine.middle.x,mTopLine.middle.y);
mPath.cubicTo(mTopLine.right.x,mTopLine.right.y,mRightLine.top.x,mRightLine.top.y,
mRightLine.middle.x,mRightLine.middle.y);
mPath.cubicTo(mRightLine.bottom.x,mRightLine.bottom.y,mBottomLine.right.x,mBottomLine.right.y,
mBottomLine.middle.x,mBottomLine.middle.y);
mPath.cubicTo(mBottomLine.left.x,mBottomLine.left.y,mLeftLine.bottom.x,mLeftLine.bottom.y,
mLeftLine.middle.x,mLeftLine.middle.y);
mPath.cubicTo(mLeftLine.top.x,mLeftLine.top.y,mTopLine.left.x,mTopLine.left.y,
mTopLine.middle.x,mTopLine.middle.y);
canvas.drawPath(mPath,mPaint);
}
效果如下：
以此类推，如果要达到刚刚那个动图的效果，就要减少上下两条线的点的纵坐标，然后不断平移画布就可以了。具体代码可以下载源码来看。
源码下载：
参考资料：
