QPushButton进度动画
This commit is contained in:
parent
53962a9d1e
commit
6136fef9f3
9 changed files with 223 additions and 1 deletions
|
@ -18,6 +18,7 @@ encoding//\u56FE\u7247\u52A0\u8F7D/LoadImage.py=utf-8
|
|||
encoding//\u56FE\u7247\u52A0\u8F7D/res_rc.py=utf-8
|
||||
encoding//\u56FE\u7247\u52A0\u8F7D/xpmres.py=utf-8
|
||||
encoding//\u5B57\u4F53\u6D4B\u8BD5/FontAwesome.py=utf-8
|
||||
encoding//\u5B57\u4F53\u6D4B\u8BD5/TestFontAwesome.py=utf-8
|
||||
encoding//\u5B57\u4F53\u6D4B\u8BD5/TestFontRoboto.py=utf-8
|
||||
encoding//\u68A6\u5E7B\u6811/DreamTree.py=utf-8
|
||||
encoding//\u6C14\u6CE1\u63D0\u793A/BubbleTips.py=utf-8
|
||||
|
@ -33,6 +34,8 @@ encoding//\u754C\u9762\u7F8E\u5316/QMessageBox\u6837\u5F0F/\u65B9\u6848\u4E8C/cr
|
|||
encoding//\u754C\u9762\u7F8E\u5316/QMessageBox\u6837\u5F0F/\u65B9\u6848\u4E8C/information.py=utf-8
|
||||
encoding//\u754C\u9762\u7F8E\u5316/QMessageBox\u6837\u5F0F/\u65B9\u6848\u4E8C/question.py=utf-8
|
||||
encoding//\u754C\u9762\u7F8E\u5316/QMessageBox\u6837\u5F0F/\u65B9\u6848\u4E8C/warning.py=utf-8
|
||||
encoding//\u754C\u9762\u7F8E\u5316/QPushButton\u8FDB\u5EA6\u52A8\u753B/PushButtonFont.py=utf-8
|
||||
encoding//\u754C\u9762\u7F8E\u5316/QPushButton\u8FDB\u5EA6\u52A8\u753B/PushButtonLine.py=utf-8
|
||||
encoding//\u754C\u9762\u7F8E\u5316/QSS\u7F8E\u5316\u4F8B\u5B50/QProgressBar\u8FDB\u5EA6\u6761\u6837\u5F0F/ProgressBar.py=utf-8
|
||||
encoding//\u754C\u9762\u7F8E\u5316/QSS\u7F8E\u5316\u4F8B\u5B50/QPushButton\u6309\u94AE/ButtonHover.py=utf-8
|
||||
encoding//\u754C\u9762\u7F8E\u5316/QScrollBar\u6EDA\u52A8\u6761\u6837\u5F0F/ScrollBar.py=utf-8
|
||||
|
|
|
@ -37,6 +37,7 @@
|
|||
- [4.3 QScrollBar滚动条样式](界面美化/QScrollBar滚动条样式)
|
||||
- [4.4 QLabel圆形头像](界面美化/QLabel圆形头像)
|
||||
- [4.5 QFileSystemModel图标](界面美化/QFileSystemModel图标)
|
||||
- [4.6 QPushButton进度动画](界面美化/QPushButton进度动画)
|
||||
|
||||
# QQ群
|
||||
- [PyQt & PySide](https://jq.qq.com/?_wv=1027&k=50LWvn9)
|
||||
|
|
BIN
界面美化/QPushButton进度动画/Fonts/FontAwesome/fontawesome-webfont.ttf
Normal file
BIN
界面美化/QPushButton进度动画/Fonts/FontAwesome/fontawesome-webfont.ttf
Normal file
Binary file not shown.
90
界面美化/QPushButton进度动画/PushButtonFont.py
Normal file
90
界面美化/QPushButton进度动画/PushButtonFont.py
Normal file
|
@ -0,0 +1,90 @@
|
|||
#!/usr/bin/env python
|
||||
# -*- coding: utf-8 -*-
|
||||
|
||||
'''
|
||||
Created on 2018年2月1日
|
||||
@author: Irony."[讽刺]
|
||||
@site: http://alyl.vip, http://orzorz.vip, https://coding.net/u/892768447, https://github.com/892768447
|
||||
@email: 892768447@qq.com
|
||||
@file: PushButtonFont
|
||||
@description:
|
||||
'''
|
||||
|
||||
|
||||
import sys
|
||||
|
||||
from PyQt5.QtCore import QPropertyAnimation, Qt, QRectF
|
||||
from PyQt5.QtGui import QFontDatabase
|
||||
from PyQt5.QtWidgets import QPushButton, QApplication, QStyleOptionButton,\
|
||||
QStylePainter, QStyle
|
||||
|
||||
|
||||
__Author__ = "By: Irony.\"[讽刺]\nQQ: 892768447\nEmail: 892768447@qq.com"
|
||||
__Copyright__ = "Copyright (c) 2018 Irony.\"[讽刺]"
|
||||
__Version__ = "Version 1.0"
|
||||
|
||||
|
||||
class PushButtonFont(QPushButton):
|
||||
|
||||
LoadingText = "\uf110"
|
||||
|
||||
def __init__(self, *args, **kwargs):
|
||||
super(PushButtonFont, self).__init__(*args, **kwargs)
|
||||
self.fontSize = self.font().pointSize() * 2
|
||||
self._rotateAnimationStarted = False
|
||||
self._rotateAnimation = QPropertyAnimation(self)
|
||||
self._rotateAnimation.setTargetObject(self)
|
||||
self._rotateAnimation.setStartValue(1)
|
||||
self._rotateAnimation.setEndValue(12)
|
||||
self._rotateAnimation.setDuration(1000)
|
||||
self._rotateAnimation.setLoopCount(-1) # 无限循环
|
||||
self._rotateAnimation.valueChanged.connect(self.update)
|
||||
self.clicked.connect(self._onClick)
|
||||
|
||||
def paintEvent(self, _):
|
||||
option = QStyleOptionButton()
|
||||
self.initStyleOption(option)
|
||||
painter = QStylePainter(self)
|
||||
if self._rotateAnimationStarted:
|
||||
option.text = ""
|
||||
painter.drawControl(QStyle.CE_PushButton, option)
|
||||
if not self._rotateAnimationStarted:
|
||||
return
|
||||
painter.save()
|
||||
font = self.font()
|
||||
font.setPointSize(self.fontSize)
|
||||
font.setFamily("FontAwesome")
|
||||
painter.setFont(font)
|
||||
# 变换坐标为正中间
|
||||
painter.translate(self.rect().center())
|
||||
# 旋转90度
|
||||
painter.rotate(self._rotateAnimation.currentValue() * 30)
|
||||
fm = self.fontMetrics()
|
||||
# 在变换坐标后的正中间画文字
|
||||
w = fm.width(self.LoadingText)
|
||||
h = fm.height()
|
||||
painter.drawText(
|
||||
QRectF(0 - w * 2, 0 - h, w * 2 * 2, h * 2), Qt.AlignCenter,
|
||||
self.LoadingText)
|
||||
painter.restore()
|
||||
|
||||
def _onClick(self):
|
||||
if self._rotateAnimationStarted:
|
||||
self._rotateAnimationStarted = False
|
||||
self._rotateAnimation.stop()
|
||||
return
|
||||
self._rotateAnimationStarted = True
|
||||
self._rotateAnimation.start()
|
||||
|
||||
def update(self, _=None):
|
||||
super(PushButtonFont, self).update()
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
app = QApplication(sys.argv)
|
||||
# 加载字体到字体库中
|
||||
QFontDatabase.addApplicationFont(
|
||||
"Fonts/FontAwesome/fontawesome-webfont.ttf")
|
||||
w = PushButtonFont("点击加载")
|
||||
w.show()
|
||||
sys.exit(app.exec_())
|
116
界面美化/QPushButton进度动画/PushButtonLine.py
Normal file
116
界面美化/QPushButton进度动画/PushButtonLine.py
Normal file
|
@ -0,0 +1,116 @@
|
|||
#!/usr/bin/env python
|
||||
# -*- coding: utf-8 -*-
|
||||
|
||||
'''
|
||||
Created on 2018年2月1日
|
||||
@author: Irony."[讽刺]
|
||||
@site: http://alyl.vip, http://orzorz.vip, https://coding.net/u/892768447, https://github.com/892768447
|
||||
@email: 892768447@qq.com
|
||||
@file: PushButtonLine
|
||||
@description:
|
||||
'''
|
||||
from random import randint
|
||||
import sys
|
||||
|
||||
from PyQt5.QtCore import QTimer, QThread, pyqtSignal
|
||||
from PyQt5.QtGui import QPainter, QColor, QPen
|
||||
from PyQt5.QtWidgets import QPushButton, QApplication, QWidget, QVBoxLayout
|
||||
|
||||
|
||||
__Author__ = "By: Irony.\"[讽刺]\nQQ: 892768447\nEmail: 892768447@qq.com"
|
||||
__Copyright__ = "Copyright (c) 2018 Irony.\"[讽刺]"
|
||||
__Version__ = "Version 1.0"
|
||||
|
||||
StyleSheet = '''
|
||||
PushButtonLine {
|
||||
color: white;
|
||||
border: none;
|
||||
min-height: 48px;
|
||||
background-color: #90caf9;
|
||||
}
|
||||
'''
|
||||
|
||||
|
||||
class LoadingThread(QThread):
|
||||
|
||||
valueChanged = pyqtSignal(float) # 当前值/最大值
|
||||
|
||||
def __init__(self, *args, **kwargs):
|
||||
super(LoadingThread, self).__init__(*args, **kwargs)
|
||||
self.totalValue = randint(100, 200) # 模拟最大
|
||||
|
||||
def run(self):
|
||||
for i in range(self.totalValue + 1):
|
||||
self.valueChanged.emit(i / self.totalValue)
|
||||
QThread.msleep(randint(300, 600))
|
||||
|
||||
|
||||
class PushButtonLine(QPushButton):
|
||||
|
||||
lineColor = QColor(0, 150, 136)
|
||||
|
||||
def __init__(self, *args, **kwargs):
|
||||
self._waitText = kwargs.pop("waitText", "等待中")
|
||||
super(PushButtonLine, self).__init__(*args, **kwargs)
|
||||
self._text = self.text()
|
||||
self._percent = 0
|
||||
self._timer = QTimer(self, timeout=self.update)
|
||||
self.clicked.connect(self.start)
|
||||
|
||||
def paintEvent(self, event):
|
||||
super(PushButtonLine, self).paintEvent(event)
|
||||
if not self._timer.isActive():
|
||||
return
|
||||
# 画进度
|
||||
painter = QPainter(self)
|
||||
pen = QPen(self.lineColor)
|
||||
pen.setWidth(4)
|
||||
painter.setPen(pen)
|
||||
painter.drawLine(0, self.height(), self.width()
|
||||
* self._percent, self.height())
|
||||
|
||||
def start(self):
|
||||
if hasattr(self, "loadingThread"):
|
||||
return self.stop()
|
||||
self.loadingThread = LoadingThread(self)
|
||||
self.loadingThread.valueChanged.connect(self.setPercent)
|
||||
self._timer.start(200) # 200ms
|
||||
self.loadingThread.start()
|
||||
self.setText(self._waitText)
|
||||
|
||||
def stop(self):
|
||||
self.loadingThread.valueChanged.disconnect(self.setPercent)
|
||||
self.loadingThread.terminate()
|
||||
self.loadingThread.deleteLater()
|
||||
del self.loadingThread
|
||||
self._percent = 0
|
||||
self._timer.stop()
|
||||
self.setText(self._text)
|
||||
|
||||
def setPercent(self, v):
|
||||
self._percent = v
|
||||
if v == 1:
|
||||
self.stop()
|
||||
self.update()
|
||||
|
||||
def setLineColor(self, color):
|
||||
self.lineColor = QColor(color)
|
||||
return self
|
||||
|
||||
|
||||
class Window(QWidget):
|
||||
|
||||
def __init__(self, *args, **kwargs):
|
||||
super(Window, self).__init__(*args, **kwargs)
|
||||
layout = QVBoxLayout(self)
|
||||
layout.addWidget(PushButtonLine("点击加载"))
|
||||
layout.addWidget(PushButtonLine("点击加载").setLineColor("#ef5350"))
|
||||
layout.addWidget(PushButtonLine("点击加载").setLineColor("#ffc107"))
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
app = QApplication(sys.argv)
|
||||
app.setStyleSheet(StyleSheet)
|
||||
w = Window()
|
||||
w.show()
|
||||
sys.exit(app.exec_())
|
10
界面美化/QPushButton进度动画/README.md
Normal file
10
界面美化/QPushButton进度动画/README.md
Normal file
|
@ -0,0 +1,10 @@
|
|||
# QPushButton 加载动画
|
||||
|
||||
### 简单说明
|
||||
- 1.第一种是利用字体,使用FontAwesome字体来显示一个圆形进度条,然后利用旋转动画
|
||||
- 2.第二种是在按钮下方画一条线,根据百分值绘制
|
||||
|
||||
截图
|
||||
|
||||
![1](ScreenShot/1.gif)
|
||||
![1](ScreenShot/2.gif)
|
BIN
界面美化/QPushButton进度动画/ScreenShot/1.gif
Normal file
BIN
界面美化/QPushButton进度动画/ScreenShot/1.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 29 KiB |
BIN
界面美化/QPushButton进度动画/ScreenShot/2.gif
Normal file
BIN
界面美化/QPushButton进度动画/ScreenShot/2.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 10 KiB |
|
@ -13,4 +13,6 @@
|
|||
|
||||
### [4.QLabel圆形头像](QLabel圆形头像/)
|
||||
|
||||
### [5.QFileSystemModel图标](QFileSystemModel图标/)
|
||||
### [5.QFileSystemModel图标](QFileSystemModel图标/)
|
||||
|
||||
### [6.QPushButton进度动画](QPushButton进度动画/)
|
Loading…
Reference in a new issue