QT 带有动画的 圆形进度条 水波进度条

我们在使用其他软件的时候，经常能看到各种绚丽的进度条，其中带有水波波纹的进度条就是其中一个。对于PC端软件开发使用的QT，只是提供了process bar，样式十分单一。 所以这次我们就使用QT的paint 以及定时器来实现类似的水波进度条。
先看一下最终效果图:

第二步，是需要绘制水波，这也是至关重要的一步。我们使用设定的颜色使用QPainterPath来设定，其中最重要的有两个，第一个就是QPainterPath 的一个intersected（求相交、挖除）功能。

QPainterPath QPainterPath::intersected(const QPainterPath &p) const

这个功能是返回两个路径相交（重合）的部分。我们来分析一下为什么使用这个求相交的功能。
因为我们要实现水波，所以我们需要使用我们以前学过的正弦sin 或者余弦cos 函数，进行模拟水波。

正弦曲线公式 y = A * qSin(ωx + φ) + k

• A : 表示振幅， 我们可以用作水波的高度。
• w ： 表示周期，可以理解为水波密度，W越大，表示水波越密集。
• k : 标识Y轴偏移量，可以理解为进度，取值是进度百分比

我们可以设置两个透明度不同、起始位置有偏差的两条正弦曲线相互交错，形成波浪的起伏，更具有真实性。
我们的大路径 totalPainterPath，是整个圆形。上面用到的正弦公式模拟的水波。我们就要使用到了上面提到的intersected相交函数，来去除额外不需要显示的部分。

这个时候我们看一下效果图：

第三步就是 完成文字百分比的显示了，我们使用drawText函数进行函数绘制。

void QPainter::drawText(const QPointF &position, const QString &text)

这个就比较简单了，只需要算出来百分比就可以了，其实上一步我们已经完成了对百分比的算法了

到这里我们就完成了所有动作的绘制，只需要在paintEvent函数里进行调用了

在初始化的时候启动定时器就好了！

写在最后，例子已经上传到csdn了，没有积分的小伙伴，评论留下你的邮箱，看到后会立刻发出。

demo下载地址

没有积分支持的小伙伴，也可以访问、下载git代码，欢迎加星，会持续更新：https://github.com/xiezhongyuan/waterProcess