Анимация при наведении на кнопку (Qt Designer)

Question

Хочу сделать чтобы при наведении на кнопку происходила смена ее фона, но когда устанавливаю transition ничего не работает, анимация происходит с такой же скоростью.

Подскажите как это можно осуществить.

Answer 1

Поскольку Qt Style Sheet не является CSS, QSS основан на CSS2.1 и имеет ограниченный код свойств, так что такие свойства, как transition не определены в этом стандарте, поэтому не работает.

Если вы хотите сделать анимацию, вы должны использовать, например, QVariantAnimation, которая запускается в методах enterEvent() и leftEvent().

В Qt Designer вы не сделаете анимацию, надо писать код, примерно так:

from PyQt5 import QtCore, QtGui, QtWidgets


class PushButton(QtWidgets.QPushButton):
    def __init__(self, parent=None):
        super().__init__(parent)
        
        self._animation = QtCore.QVariantAnimation(
            startValue=QtGui.QColor("#4CAF50"),
            endValue=QtGui.QColor("white"),
            valueChanged=self._on_value_changed,
            duration=500,
        )
        self._update_stylesheet(QtGui.QColor("white"), QtGui.QColor("black"))
        self.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor))

    def _on_value_changed(self, color):
        foreground = (
            QtGui.QColor("black")
            if self._animation.direction() == QtCore.QAbstractAnimation.Forward
            else QtGui.QColor("white")
        )
        self._update_stylesheet(color, foreground)

    def _update_stylesheet(self, background, foreground):

        self.setStyleSheet("""
            QPushButton{
                background-color: %s;
                border: none;
                color: %s;
                padding: 16px 32px;
                text-align: center;
                text-decoration: none;
                font-size: 16px;
                margin: 4px 2px;
                border: 2px solid #4CAF50;
            }
        """
            % (background.name(), foreground.name())
        )

    def enterEvent(self, event):
        self._animation.setDirection(QtCore.QAbstractAnimation.Backward)
        self._animation.start()
        
        self.setText(self.tr("Это кнопка. \nУберита курсор с кнопки"))
        super().enterEvent(event)

    def leaveEvent(self, event):
        self._animation.setDirection(QtCore.QAbstractAnimation.Forward)
        self._animation.start()
        
        self.setText(self.tr("Это кнопка. \nНаведите курсор на кнопку"))
        super().leaveEvent(event)


class Dialog(QtWidgets.QDialog):
    def __init__(self):
        super().__init__()

        self.pushButton = PushButton()
        self.pushButton.setText(self.tr("Это кнопка. \nНаведите курсор на кнопку"))
        self.pushButton.setSizePolicy(
            QtWidgets.QSizePolicy.Minimum, QtWidgets.QSizePolicy.Minimum
        )
        self.pushButton.clicked.connect(lambda: print('Hello Button'))
        
        lay = QtWidgets.QVBoxLayout(self)
        lay.addWidget(self.pushButton)


if __name__ == "__main__":
    import sys

    app = QtWidgets.QApplication(sys.argv)
    w = Dialog()
    w.resize(300, 200)
    w.show()
    sys.exit(app.exec_())

БЛОГ НА HUSL

Анимация при наведении на кнопку (Qt Designer)

Ответы (1 шт):