pyqt5 動畫學習（二） 改變控件顏色

上一篇我們通過  self.anim = QPropertyAnimation(self.label, b"geometry")創建了一個動畫，改變了空間的大小，這次我們來改變控件的顏色

但是label是沒有color這個動畫屬性的，即設置  self.anim = QPropertyAnimation(self.label, b"color")是無效的

為此，我們要重寫label類，賦予一個color屬性，例如：

class MyLabel(QLabel):
    def __init__(self, text, para):
        super().__init__(text, para)

    def _set_color(self, col):
        self.setAutoFillBackground(True)
        palette = self.palette()
        palette.setColor(self.backgroundRole(), col)
        self.setPalette(palette)

    color = pyqtProperty(QColor, fset=_set_color)

還是通過調色板來改變label的顏色， 然后我們自定義一個名為"color"的屬性

color = pyqtProperty(QColor, fset=_set_color)

定義以后我們就可以正常使用這個屬性了，例如

self.anim = QPropertyAnimation(self.label, b"color")

 

下面是程式完整代碼：

 

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
PyQt5 Animation tutorial

This program animates the color of a
widget with QPropertyAnimation.

Author: Seshigure [e-mail]
Last edited: 2018.03.02
"""

from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *


class MyLabel(QLabel):
    def __init__(self, text, para):
        super().__init__(text, para)

    def _set_color(self, col):
        self.setAutoFillBackground(True)
        palette = self.palette()
        palette.setColor(self.backgroundRole(), col)
        self.setPalette(palette)

    color = pyqtProperty(QColor, fset=_set_color)


class Example(QWidget):
    def __init__(self):
        super(Example, self).__init__()
        self.initUI()

    def initUI(self):
        self.button = QPushButton("Start", self)
        self.button.clicked.connect(self.doAnim)
        self.button.move(30, 30)

        self.label = MyLabel("changeColor", self)
        self.label._set_color(QColor(255, 50, 50, 50))
        self.label.setGeometry(150, 30, 100, 100)

        self.setGeometry(300, 300, 380, 300)
        self.setWindowTitle('Animation')
        self.show()

    def doAnim(self):
        self.anim = QPropertyAnimation(self.label, b"color")
        self.anim.setDuration(3000)
        self.anim.setStartValue(QColor(255, 50, 50, 50))  # 粉色 
        self.anim.setKeyValueAt(0.5, QColor(255, 0, 0, 250))  # 紅色
        self.anim.setEndValue(QColor(255, 250, 50, 50))  # 米黃
        self.anim.start()


if __name__ == "__main__":
    app = QApplication([])
    ex = Example()
    ex.show()
    app.exec_()

 

 

 

 

界面預覽圖如下：

 

 

備注：

1、label沒有color動畫屬性，所以我們得重寫label

2、self.anim.setKeyValueAt(0.5, QColor(255, 0, 0, 250))這里使用了一個關鍵幀，讓動畫完成 粉色>紅色>米黃的顏色轉換