最近做了一個小項目,裏面有一個需求需要添加一個動態進度條,進度條的樣式就類似於水波來回起伏的那種形狀,下面就是最初的展示效果(有一點區別,這裏我加了一個進度自動增加的功能):
下面先說一下這個效果的製作原理
原理介紹
在介紹動態效果之前需要先看一下靜態的:
如果仔細觀察的話,靜態圖效果的呈現在於先後的兩個線條的繪製,產生水波的主要是由於兩線條的左右的水平錯位 以及 設置的透明度不同 所造成的;
想要形成最後的水波盪漾的視覺效果,只需要把數張線條連續走向的靜態圖拼接在一起就能達到
線條中的波浪效果,這裏用到的是 正弦函數
的走向,教程代碼中的兩根線條主要藉助於 y = Asin(wx+l)+k
函數 繪製
y = Asin(wx+l)+k
函數中,各參數的作用如下圖所示
從圖中我們可以瞭解到,兩個線條就能實現交叉起伏的效果,是因爲兩正弦函數中設置的 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()
以上就是本次教程的全部內容,關於文章的源碼的獲取方式,關注公號:Z先生點記,後臺回覆關鍵字:動態進度條 ,即可獲取源碼鏈接
最後,感謝閱讀!