1

Заметил такую вещь, что если сделать обычный :hover на кнопку, то он резкий и без какой либо анимации.

Я пробовал на :hover как-нибудь накинуть QGraphicsDropShadowEffect, но это не привело к успеху.

Я хочу сделать так - pushbutton должна быть с эффектом QGraphicsDropShadowEffect, при наведении курсором на эту кнопку QGraphicsDropShadowEffect должен плавно пропадать, а :hover (например зеленого цвета) плавно появляться.

Как такое можно реализовать на PyQt5?


Пример того что я хочу сделать

пример


main.py

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(307, 158)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(70, 50, 171, 51))
        self.pushButton.setStyleSheet("background-color: rgb(255, 255, 255);\n"
"border-radius: 10px;\n"
"\n"
"}\n"
"QPushButton:hover{    \n"
"    background-color: rgb(191, 191, 191);\n"
"    effect = QtWidgets.QGraphicsDropShadowEffect(QPushButton)\n"
"    effect.setOffset(0, 0)\n"
"    effect.setBlurRadius(20)\n"
"    effect.setColor(QColor(57, 219, 255))\n"
"    QPushButton.setGraphicsEffect(effect)")
        self.pushButton.setObjectName("pushButton")
        MainWindow.setCentralWidget(self.centralwidget)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton.setText(_translate("MainWindow", "HOVER"))

class ExampleApp(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

if __name__=="__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    window = ExampleApp()
    window.show()
    sys.exit(app.exec_())        

1 ответ 1

4

Класс QGraphicsDropShadowEffect предоставляет эффект тени.

Когда кнопка отжата вы видите QGraphicsDropShadowEffect эффект, когда кнопка нажата эффект останавливаем.

Нажимайте на кнопку.


main.py

from PyQt5 import QtCore, QtGui, QtWidgets
from AnimationShadowEffect import AnimationShadowEffect                       # !!!

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(307, 158)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(70, 50, 171, 51))
        self.pushButton.setStyleSheet("background-color: rgb(255, 255, 255);\n"
"border-radius: 10px;\n"
"\n"
"}\n"
"QPushButton:hover{    \n"
"    background-color: rgb(191, 191, 191);\n"
"    effect = QtWidgets.QGraphicsDropShadowEffect(QPushButton)\n"
"    effect.setOffset(0, 0)\n"
"    effect.setBlurRadius(20)\n"
"    effect.setColor(QColor(57, 219, 255))\n"
"    QPushButton.setGraphicsEffect(effect)")
        self.pushButton.setObjectName("pushButton")
        MainWindow.setCentralWidget(self.centralwidget)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton.setText(_translate("MainWindow", "HOVER"))


class ExampleApp(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        self.pushButton.setCheckable(True)

        # Синяя кнопка границы
        self.aniButton = AnimationShadowEffect(QtCore.Qt.blue, self.pushButton)
        self.pushButton.clicked.connect(self.button_state_func)
        self.pushButton.setGraphicsEffect(self.aniButton)
        self.aniButton.start()

    def button_state_func(self, state):
        if state: self.aniButton.stop()
        else: self.aniButton.start()


if __name__=="__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    window = ExampleApp()
    window.show()
    sys.exit(app.exec_()) 

AnimationShadowEffect.py

from PyQt5.QtCore import QPropertyAnimation, pyqtProperty
from PyQt5.QtWidgets import QGraphicsDropShadowEffect


class AnimationShadowEffect(QGraphicsDropShadowEffect):

    def __init__(self, color, *args, **kwargs):
        super(AnimationShadowEffect, self).__init__(*args, **kwargs)
        self.setColor(color)
        self.setOffset(0, 0)
        self.setBlurRadius(0)
        self._radius = 0
        self.animation = QPropertyAnimation(self)
        self.animation.setTargetObject(self)
        self.animation.setDuration(2000)            # Время одного цикла
        self.animation.setLoopCount(-1)             # Постоянный цикл
        self.animation.setPropertyName(b'radius')
        # Вставить значение
        self.animation.setKeyValueAt(0, 1)
        self.animation.setKeyValueAt(0.5, 30)
        self.animation.setKeyValueAt(1, 1)

    def start(self):
        self.animation.start()

    def stop(self, r=0):
        # Остановить анимацию и изменить значение радиуса
        self.animation.stop()
        self.radius = r

    @pyqtProperty(int)
    def radius(self):
        return self._radius

    @radius.setter
    def radius(self, r):
        self._radius = r
        self.setBlurRadius(r)

введите сюда описание изображения


Update

Немного не то, что надо. Я хотел бы сделать так - анимация будет начинаться не при клике, а при наведении (hover), но после убирания курсора эффект должен пропасть. Я не совсем понимаю как отследить hover.

from PyQt5 import QtCore, QtGui, QtWidgets
from AnimationShadowEffect import AnimationShadowEffect                         # !!!

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(307, 158)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")

#        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton = PushButton(self.centralwidget)                         # +++

        self.pushButton.setGeometry(QtCore.QRect(70, 50, 171, 51))
        self.pushButton.setStyleSheet("background-color: rgb(255, 255, 255);\n"
"border-radius: 10px;\n"
"\n"
"}\n"
"QPushButton:hover{    \n"
"    background-color: rgb(191, 191, 191);\n"
"    effect = QtWidgets.QGraphicsDropShadowEffect(QPushButton)\n"
"    effect.setOffset(0, 0)\n"
"    effect.setBlurRadius(20)\n"
"    effect.setColor(QColor(57, 219, 255))\n"
"    QPushButton.setGraphicsEffect(effect)")
        self.pushButton.setObjectName("pushButton")
        MainWindow.setCentralWidget(self.centralwidget)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton.setText(_translate("MainWindow", "HOVER"))


# ++ vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
class PushButton(QtWidgets.QPushButton):
    hover = QtCore.pyqtSignal(str)

    def __init__(self, parent=None):
        super(PushButton, self).__init__(parent)
        pass

    def enterEvent(self, event):
        self.hover.emit("enterEvent")

    def leaveEvent(self, event):
        self.hover.emit("leaveEvent")
# ++ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


class ExampleApp(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        self.pushButton.setCheckable(True)

        # Синяя кнопка границы
        self.aniButton = AnimationShadowEffect(QtCore.Qt.blue, self.pushButton)

#        self.pushButton.clicked.connect(self.button_state_func)
        self.pushButton.hover.connect(self.button_hover)                          # +++

        self.pushButton.setGraphicsEffect(self.aniButton)
#        self.aniButton.start()

# ++ vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
    def button_state_func(self, state):
        if state: self.aniButton.stop()
        else: self.aniButton.start()

    def button_hover(self, hover):
        if hover == "enterEvent" : self.aniButton.start()
        elif hover == "leaveEvent" : self.aniButton.stop()
# ++ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


if __name__=="__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    window = ExampleApp()
    window.show()
    sys.exit(app.exec_()) 

введите сюда описание изображения

4
  • Немного не то, что надо. Я хотел бы сделать так - анимация будет начинаться не при клике, а при наведении (hover), но после убирания курсора эффект должен пропасть. Я не совсем понимаю как отследить hover.
    – imapw_
    2 мар 2020 в 19:23
  • @imapw_ я добавил обновление
    – S. Nick
    2 мар 2020 в 19:47
  • Спасибо большое!
    – imapw_
    2 мар 2020 в 19:58
  • @imapw_ пожалуйста
    – S. Nick
    2 мар 2020 в 20:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.