从零开始实现一个基于贝塞尔曲线的进度条动画

开发环境

Android Studio 3.6.3

前言

在APP开发的时候，UI的效果图里提供了一个比较炫酷的进度条效果，琢磨着找了几篇资料实现了。

效果预览

先来看下Demo的效果，实际效果会比这更好看

开始

下面开始一步一步实现这个效果，要想实现这个效果分为两步：

实现左侧波浪形的进度
实现从右侧跑向左侧的气泡

实现从右侧跑向左侧气泡

现在将会用到二阶贝塞尔曲线，先来了解一下二阶贝塞尔曲线

参考这个链接：https://www.jianshu.com/p/03fdcfd3ae9c

这里有两个知识点：

如何用Canvas绘制出一条二阶贝塞尔曲线，Canvas没有直接的接口来绘制二阶贝塞尔曲线，需要通过Canves.drawPath()方法来绘制二阶贝塞尔曲线

/**
* Draw the specified path using the specified paint. The path will be filled or framed based on
* the Style in the paint.
*
* @param path The path to be drawn
* @param paint The paint used to draw the path
*/
public void drawPath(@NonNull Path path, @NonNull Paint paint)

Path里通过cubicTo添加二阶贝塞尔曲线，二阶贝塞尔曲线需要四个点，但是cubicTo方法只需要传入三个点，因为默认起点为(0,0)

/**
* Add a cubic bezier from the last point, approaching control points
* (x1,y1) and (x2,y2), and ending at (x3,y3). If no moveTo() call has been
* made for this contour, the first point is automatically set to (0,0).
*
* @param x1 The x-coordinate of the 1st control point on a cubic curve
* @param y1 The y-coordinate of the 1st control point on a cubic curve
* @param x2 The x-coordinate of the 2nd control point on a cubic curve
* @param y2 The y-coordinate of the 2nd control point on a cubic curve
* @param x3 The x-coordinate of the end point on a cubic curve
* @param y3 The y-coordinate of the end point on a cubic curve
*/
public void cubicTo(float x1, float y1, float x2, float y2, float x3, float y3);

绘制一条完整的贝塞尔曲线代码如下

path.reset();
path.moveTo(start.x * width, start.y * height);
path.cubicTo(control1.x * width, control1.y * height, control2.x * width, control2.y * height, end.x * width, end.y * height);
canvas.drawPath(path, linePaint);

还有一个给你一个进度，如何在这条二阶贝塞尔曲线上找到一个对应的点

这里我引用https://www.jianshu.com/p/03fdcfd3ae9c里面的一段文字

简单来说,就是给定几个点,计算出一个曲线.(其实复杂得我看不懂)

简单了解贝塞尔曲线后,发现**三次方贝塞尔曲线
** 符合我们的要求
公式:

拿到了公式,先不要着急,我们先思考一下,明确一下它的参数是干什么的:
公式中需要四个P,P0,是我们的起点,P3是终点,P1,P2是途径的两个点
而t则是我们的一个因子,取值范围是0-1,熟悉动画的同学应该就明白,0-1,对动画的作用有多么重大!!!所以看到这个,真是笑了~~

上面介绍的是三阶贝塞尔曲线的公式，二阶贝塞尔曲线的公式也是一样的，然后根据这个可以写出二阶贝塞尔曲线的动画点的计算公式，然后通过Canvas.drawCircle()方法来绘制指定点

final float p_1_t = 1 - t;
final float p_1_t_2 = (float) Math.pow(p_1_t, 2);
final float p_1_t_3 = (float) Math.pow(p_1_t, 3);
final float t = this.t;
final float t_2 = (float) Math.pow(t, 2);
final float t_3 = (float) Math.pow(t, 3);
final float t_p_1_t_2 = t * p_1_t_2;
final float t_2_p_1_t = t_2 * p_1_t;final float x = start.x * p_1_t_3 + 3 * control1.x * t_p_1_t_2 + 3 * control2.x * t_2_p_1_t + end.x * t_3;
final float y = start.y * p_1_t_3 + 3 * control1.y * t_p_1_t_2 + 3 * control2.y * t_2_p_1_t + end.y * t_3;
canvas.drawCircle(x * width, y * height, radiusRatio * height, circlePaint);

来看看效果

可以看到现在气泡会沿着二阶贝塞尔曲线的路径运动，二阶贝塞尔曲线是随机生成的，所以气泡会随机的从右边飘向左边。

波浪效果

要绘制一个波浪效果，原理还是很简单，就是通过绘制一个固定的波浪，然后通过Canvas.translate()的偏移来实现波浪的运动效果

参考这篇文章https://www.jianshu.com/p/34bbcd80dc7a

Canvas没有直接绘制曲线的方法，我们可以通过Canvas.drawPath()来绘制正弦曲线，通过Path.rQuadTo()方法来添加一条曲线，这里要使用Path.rQuadTo()而不是Path.quadTo()方法，Path.rQuadTo()绘制的时候使用的是相对坐标，Path.quadTo()绘制的时候使用的绝对坐标

/**
* Same as quadTo, but the coordinates are considered relative to the last
* point on this contour. If there is no previous point, then a moveTo(0,0)
* is inserted automatically.
*
* @param dx1 The amount to add to the x-coordinate of the last point on
*            this contour, for the control point of a quadratic curve
* @param dy1 The amount to add to the y-coordinate of the last point on
*            this contour, for the control point of a quadratic curve
* @param dx2 The amount to add to the x-coordinate of the last point on
*            this contour, for the end point of a quadratic curve
* @param dy2 The amount to add to the y-coordinate of the last point on
*            this contour, for the end point of a quadratic curve
*/
public void rQuadTo(float dx1, float dy1, float dx2, float dy2);

绘制一个波浪的代码如下

@UiThread
public void onDraw(Canvas canvas) {canvas.translate(0, -waveOffsetRatio * height);// 波长final float waveLength = height / WAVE_COUNT;// 振幅final float waveAmplitude = WAVE_AMPLITUDE_RATIO * waveLength;final float progressWidth = waveAmplitude + progress * width;path.reset();path.moveTo(0, 0);path.rLineTo(progressWidth, 0);final int realWaveCount = (int) Math.ceil(WAVE_COUNT + 1f);for (int i = 0; i < realWaveCount; i++) {path.rLineTo(0, 0);path.rQuadTo(waveAmplitude, waveLength / 4, 0, waveLength / 2);path.rLineTo(0, 0);path.rQuadTo(-waveAmplitude, waveLength / 4, 0, waveLength / 2);}path.rLineTo(-progressWidth, 0);path.close();canvas.drawPath(path, paint);waveOffsetRatio += MIN_WAVE_OFFSET_RATIO;if (waveOffsetRatio > 1) {waveOffsetRatio = 0;}
}

来看下效果

然后组合下就看到文章开始的效果了。

源码参考

https://github.com/bajingxiaozi/ProgressDemo

参考资料

https://blog.csdn.net/oushangfeng123/article/details/50545453

https://blog.csdn.net/qq_31715429/article/details/54386934

https://www.jianshu.com/p/03fdcfd3ae9c

https://www.jianshu.com/p/34bbcd80dc7a

完