用 Pyqt5 制作一个动态水波进度条

简介: 最近做了一个小项目,里面有一个需求需要添加一个动态进度条,进度条的样式就类似于水波来回起伏的那种形状,下面就是最初的展示效果(有一点区别,这里我加了一个进度自动增加的功能):

最近做了一个小项目,里面有一个需求需要添加一个动态进度条,进度条的样式就类似于水波来回起伏的那种形状,下面就是最初的展示效果(有一点区别,这里我加了一个进度自动增加的功能):


end_imag11252323.gif

下面先说一下这个效果的制作原理

原理介绍

在介绍动态效果之前需要先看一下静态的:


如果仔细观察的话,静态图效果的呈现在于先后的两个线条的绘制,产生水波的主要是由于两线条的左右的水平错位 以及 设置的透明度不同 所造成的;


想要形成最后的水波荡漾的视觉效果,只需要把数张线条连续走向的静态图拼接在一起就能达到


线条中的波浪效果,这里用到的是 正弦函数的走向,教程代码中的两根线条主要借助于 y = Asin(wx+l)+k 函数 绘制y = Asin(wx+l)+k 函数中,各参数的作用如下图所示


Snipaste_2020-03-31_00-18-05.jpg

从图中我们可以了解到,两个线条就能实现交叉起伏的效果,是因为两正弦函数中设置的 l 值不一样

基本原理讲解完了,下面就是代码实现部分,图像呈现效果是由 Qt中的 QPellete(画板) 实现,图像中的线条区域主要用到了 QPainterPath() 函数,函数可以借助绘制的线条围城一个区域


动态图效果的实现主要是在代码中加入了一个 startTimer() 函数,起到计时器效果:每隔一定的时间就会更新一次界面(所得到的静态图也不一样,这个静态图的视觉差实现动态效果);


而图像中百分比自动填充是由于在页面更新的时候,同时进度加一;


代码实操

函数初始化 : 定义背景颜色、进度条颜色、进度条起始进度及页面刷新时间等

        self.resize(200,60)
        self.layout = QGridLayout(self)
        #背景填充灰色
        self.setAutoFillBackground(True)
        p  = QPalette()
        p.setColor(QPalette.Background,Qt.gray)
        self.setPalette(p)
        #设置进度条颜色
        self.bg_color = QColor(255, 0, 0)
        #设置界面刷新时间
        self.startTimer(80)
        self.m_waterOffset = 0.05
        self.m_offset = 50
        self.m_borderwidth = 10
        #进度条进度范围0-100
        self.per_num = 0

painEvent 函数主要完成水波效果和进度条文本的绘制,也是效果绘制的核心

    def paintEvent(self, event):
        # 锯齿状绘画板;
        painter = QPainter()
        painter.setRenderHint(QPainter.Antialiasing)
        painter.begin(self)
        #获取窗口的宽度和高度
        width,height = self.width(),self.height()
        percentage = 1 - self.per_num/100
        # 水波走向:正弦函数 y = A(wx+l) + k
        # w 表示 周期,值越大密度越大
        w = 2 * math.pi / (width)
        # A 表示振幅 ,理解为水波的上下振幅
        A = height * self.m_waterOffset
        # k 表示 y 的偏移量,可理解为进度
        k = height *percentage
        water1 = QPainterPath()
        water2 = QPainterPath()
        #起始点
        water1.moveTo(5,height)
        water2.moveTo(5,height)
        self.m_offset += 0.6
        if(self.m_offset >(width/2)):
            self.m_offset = 0
        i = 5
        while(i < width-5):
            waterY1 = A*math.sin(w*i +self.m_offset ) + k
            waterY2 = A*math.sin(w*i + self.m_offset + width/2*w) + k
            water1.lineTo(i, waterY1)
            water2.lineTo(i, waterY2)
            i += 1
        water1.lineTo(width-5,height)
        water2.lineTo(width-5,height)
        totalpath = QPainterPath()
        totalpath.addRect(QRectF(5, 5, self.width() - 10, self.height() - 10))
        painter.setBrush(Qt.gray)
        painter.drawRect(self.rect())
        painter.save()
        painter.setPen(Qt.NoPen)
        #设置水波的透明度
        watercolor1 =QColor(self.bg_color)
        watercolor1.setAlpha(100)
        watercolor2 = QColor(self.bg_color)
        watercolor2.setAlpha(150)
        path = totalpath.intersected(water1)
        painter.setBrush(watercolor1)
        painter.drawPath(path)
        path = totalpath.intersected(water2)
        painter.setBrush(watercolor2)
        painter.drawPath(path)
        painter.restore()
        '''绘制字体'''
        m_font = QFont()
        m_font.setFamily('Microsoft YaHei')
        m_font.setPixelSize(int(self.width()/10))
        painter.setPen(Qt.white)
        painter.setFont(m_font)
        painter.drawText(self.rect(),Qt.AlignCenter,"{}%".format(self.per_num))
        painter.end()

实现进度条进度自动增加功能,同时界面实时更新达到动态效果

    def timerEvent(self, event):
        self.per_num +=1
        if self.per_num ==101:
            self.per_num = 0
        self.update()
相关文章
|
8月前
|
前端开发 JavaScript 开发者
【QML进阶 进度条设计】打造动态弧形进度条特效
【QML进阶 进度条设计】打造动态弧形进度条特效
432 2
|
2月前
|
Python
pyqt6 制作一个颜色调节器 01
本文介绍了一个使用 PyQt 制作的颜色调节器,通过滑动滚动条或旋钮来调整 RGB 三色,实现颜色的微调。具体步骤包括:1. 设计 UI 页面;2. 分析颜色调整逻辑;3. 将数据反馈到 UI 页面。最终实现了颜色随滑块变化而实时更新的效果。
65 1
|
2月前
pyqt6 制作一个颜色调节器 02
本文介绍了如何使用PyQt6实现一个颜色调节器。首先创建了一个显示RGB颜色值变化的标签,然后通过三个旋钮(QDial)分别控制红、绿、蓝三种颜色的值,并在旋钮下方显示当前值。通过嵌套布局实现了旋钮和标签的排列,最终实现了颜色值的变化和显示。完整代码也一并提供。
57 0
|
4月前
|
数据可视化 数据挖掘 Python
让数据动起来:一文学会Plotly动画制作
让数据动起来:一文学会Plotly动画制作
113 0
|
8月前
|
移动开发 JavaScript 小程序
uView LineProgress 线形进度条
uView LineProgress 线形进度条
154 0
Vs+Qt 界面添加背景图的两种方式(非常实用)
Vs+Qt 界面添加背景图的两种方式(非常实用)
从零开始学Pyqt5之【控件介绍】(13):QFontDialog字体选择对话框控件
从零开始学Pyqt5之【控件介绍】(13):QFontDialog字体选择对话框控件
从零开始学Pyqt5之【控件介绍】(13):QFontDialog字体选择对话框控件
|
Windows
Qt+ECharts开发笔记(二):Qt窗口动态调整大小,使ECharts跟随Qt窗口大小变换而变换大小
上一篇将ECharts嵌入Qt中,在开始ECharts使用之前,还有一个很重要的功能,就是在窗口变换大小的时候,ECharts的图表尺寸也要跟随Qt窗口变换大小而变换大小。
Qt 使用一张图片实现转圈的动画效果
这个是显示的效果,以前用的时候就是网上照一张Gif动画,完了加载进去。我们可以在Qt中使用Movie来操纵Gif动画。 这个试下方式就是通过painter绘制一个图片,通过按照一定的规律旋转图片实现的。
857 0
Qt 使用一张图片实现转圈的动画效果
|
人工智能 搜索推荐 C#
Photoshop和WPF双剑配合,打造炫酷个性的进度条控件
结合Photoshop和WPF,共同创建一个矢量的个性化进度条。
563 0
Photoshop和WPF双剑配合,打造炫酷个性的进度条控件