最近做了一個(gè)小項(xiàng)目，里面有一個(gè)需求需要添加一個(gè)動(dòng)態(tài)進(jìn)度條，進(jìn)度條的樣式就類似于水波來(lái)回起伏的那種形狀，下面就是最初的展示效果(有一點(diǎn)區(qū)別，這里我加了一個(gè)進(jìn)度自動(dòng)增加的功能)：

下面先說(shuō)一下這個(gè)效果的制作原理

原理介紹

在介紹動(dòng)態(tài)效果之前需要先看一下靜態(tài)的：

如果仔細(xì)觀察的話，靜態(tài)圖效果的呈現(xiàn)在于先后的兩個(gè)線條的繪制，產(chǎn)生水波的主要是由于兩線條的左右的水平錯(cuò)位以及設(shè)置的透明度不同所造成的；

想要形成最后的水波蕩漾的視覺(jué)效果，只需要把數(shù)張線條連續(xù)走向的靜態(tài)圖拼接在一起就能達(dá)到

線條中的波浪效果，這里用到的是正弦函數(shù)的走向，教程代碼中的兩根線條主要借助于

y = Asin(wx+l)+k 函數(shù) 繪制

y = Asin(wx+l)+k 函數(shù)中

各參數(shù)的作用如下圖所示

從圖中我們可以了解到，兩個(gè)線條就能實(shí)現(xiàn)交叉起伏的效果，是因?yàn)閮烧液瘮?shù)中設(shè)置的 l 值不一樣，

基本原理講解完了，下面就是代碼實(shí)現(xiàn)部分，圖像呈現(xiàn)效果是由 Qt中的 QPellete(畫(huà)板) 實(shí)現(xiàn)，圖像中的線條區(qū)域主要用到了 QPainterPath() 函數(shù)，函數(shù)可以借助繪制的線條圍城一個(gè)區(qū)域

動(dòng)態(tài)圖效果的實(shí)現(xiàn)主要是在代碼中加入了一個(gè) startTimer() 函數(shù)，起到計(jì)時(shí)器效果：每隔一定的時(shí)間就會(huì)更新一次界面(所得到的靜態(tài)圖也不一樣，這個(gè)靜態(tài)圖的視覺(jué)差實(shí)現(xiàn)動(dòng)態(tài)效果)；

而圖像中百分比自動(dòng)填充是由于在頁(yè)面更新的時(shí)候，同時(shí)進(jìn)度加一；

代碼實(shí)操

函數(shù)初始化 : 定義背景顏色、進(jìn)度條顏色、進(jìn)度條起始進(jìn)度及頁(yè)面刷新時(shí)間等

        self.resize(200,60)
        self.layout = QGridLayout(self)
        #背景填充灰色
        self.setAutoFillBackground(True)
        p  = QPalette()
        p.setColor(QPalette.Background,Qt.gray)
        self.setPalette(p)
        #設(shè)置進(jìn)度條顏色
        self.bg_color = QColor(255, 0, 0)
        #設(shè)置界面刷新時(shí)間
        self.startTimer(80)
        self.m_waterOffset = 0.05
        self.m_offset = 50
        self.m_borderwidth = 10
        #進(jìn)度條進(jìn)度范圍0-100
        self.per_num = 0

painEvent 函數(shù)主要完成水波效果和進(jìn)度條文本的繪制，也是效果繪制的核心

    def paintEvent(self, event):
        # 鋸齒狀繪畫(huà)板；
        painter = QPainter()
        painter.setRenderHint(QPainter.Antialiasing)
        painter.begin(self)
        #獲取窗口的寬度和高度
        width,height = self.width(),self.height()
        percentage = 1 - self.per_num/100
        # 水波走向：正弦函數(shù) y = A(wx+l) + k
        # w 表示 周期，值越大密度越大
        w = 2 * math.pi / (width)
        # A 表示振幅 ，理解為水波的上下振幅
        A = height * self.m_waterOffset
        # k 表示 y 的偏移量，可理解為進(jìn)度
        k = height *percentage
        water1 = QPainterPath()
        water2 = QPainterPath()
        #起始點(diǎn)
        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)
        #設(shè)置水波的透明度
        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()

實(shí)現(xiàn)進(jìn)度條進(jìn)度自動(dòng)增加功能，同時(shí)界面實(shí)時(shí)更新達(dá)到動(dòng)態(tài)效果

    def timerEvent(self, event):
        self.per_num +=1
        if self.per_num ==101:
            self.per_num = 0
        self.update()

以上就是Python編程使用PyQt5庫(kù)實(shí)現(xiàn)動(dòng)態(tài)水波進(jìn)度條示例的詳細(xì)內(nèi)容，更多關(guān)于Python編程PyQt5庫(kù)實(shí)現(xiàn)動(dòng)態(tài)水波進(jìn)度條的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最后，感謝閱讀！

您可能感興趣的文章: