QPushButton进度动画

.settings/org.eclipse.core.resources.prefs

@@ -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

README.md

@@ -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)

界面美化/QPushButton进度动画/PushButtonFont.py

@@ -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_())

界面美化/QPushButton进度动画/PushButtonLine.py

@@ -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_())

界面美化/QPushButton进度动画/README.md

@@ -0,0 +1,10 @@
+# QPushButton 加载动画
+
+### 简单说明
+ - 1.第一种是利用字体，使用FontAwesome字体来显示一个圆形进度条，然后利用旋转动画
+ - 2.第二种是在按钮下方画一条线，根据百分值绘制
+
+截图
+
+![1](ScreenShot/1.gif)
+![1](ScreenShot/2.gif)

界面美化/README.md

@@ -14,3 +14,5 @@
 ### [4.QLabel圆形头像](QLabel圆形头像/)
 
 ### [5.QFileSystemModel图标](QFileSystemModel图标/)
+
+### [6.QPushButton进度动画](QPushButton进度动画/)