БЛОГ НА HUSL


Как сделать анимацию, плавное появление картинки label?

Автор вопроса: Никита Пфейфер

Как сделать так, чтобы изображение на label появлялся постепенно (плавно).

from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow10(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(492, 613)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setStyleSheet("#centralwidget{\n"
"background-color: rgb(0, 0, 0);\n"
"}")
        self.centralwidget.setObjectName("centralwidget")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.centralwidget)
        self.verticalLayout.setObjectName("verticalLayout")
        self.frame = QtWidgets.QFrame(self.centralwidget)
        self.frame.setStyleSheet("QFrame {\n"
"background-color: rgb(0, 0, 0);\n"
"color: rgb(220, 220, 220);\n"
"border-radius: 10px\n"
"\n"
"}")
        self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame.setObjectName("frame")
        self.progressBar = QtWidgets.QProgressBar(self.frame)
        self.progressBar.setGeometry(QtCore.QRect(156, 530, 161, 21))
        self.progressBar.setStyleSheet("QProgressBar{\n"
"background-color: rgb(98, 114, 164);\n"
"color: rgb(200, 200, 200);\n"
"border-style:  none;\n"
"\n"
"\n"
"text-align: center\n"
"}\n"
"\n"
"QProgressBar::chunk{\n"
"\n"
"border-radius: 10 px;\n"
"    background-color: rgb(255, 255, 255);\n"
"}")
        self.progressBar.setProperty("value", 24)
        self.progressBar.setAlignment(QtCore.Qt.AlignCenter)
        self.progressBar.setObjectName("progressBar")
        self.label_4 = QtWidgets.QLabel(self.frame)
        self.label_4.setGeometry(QtCore.QRect(300, 560, 181, 31))
        font = QtGui.QFont()
        font.setPointSize(14)
        self.label_4.setFont(font)
        self.label_4.setStyleSheet("color: rgb(98, 114, 164);")
        self.label_4.setObjectName("label_4")
        self.label_3 = QtWidgets.QLabel(self.frame)
        self.label_3.setGeometry(QtCore.QRect(20, 0, 431, 291))
        self.label_3.setText("")
        self.label_3.setPixmap(QtGui.QPixmap("Изображения/bb.jpg"))
        self.label_3.setAlignment(QtCore.Qt.AlignCenter)
        self.label_3.setObjectName("label_3")
        self.label = QtWidgets.QLabel(self.frame)
        self.label.setGeometry(QtCore.QRect(42, 274, 391, 231))
        self.label.setText("")
        self.label.setPixmap(QtGui.QPixmap("Изображения/ggg.jpg"))
        self.label.setAlignment(QtCore.Qt.AlignCenter)
        self.label.setObjectName("label")
        self.verticalLayout.addWidget(self.frame)
        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.label_4.setText(_translate("MainWindow", "<strong>Created</strong>: Nanoxia"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow10()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

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

Вот класс из main файла, но картинка по прежнему плавно не появляется

counter = 0 
class SplashScreen(QtWidgets.QMainWindow, Ui_MainWindow10):
    def __init__(self):
        QMainWindow.__init__(self)
        self.ui = Ui_MainWindow10()
        self.ui.setupUi(self)

    ## Remove Title Bar
        self.setWindowFlag(QtCore.Qt.FramelessWindowHint)
        self.setAttribute(QtCore.Qt.WA_TranslucentBackground)

    ##Drop shadow Effect
        self.shadow = QGraphicsDropShadowEffect(self)
        self.shadow.setBlurRadius(20)
        self.shadow.setXOffset(0)
        self.shadow.setYOffset(0)
        self.shadow.setColor(QColor(0, 0, 0, 60))
        self.ui.frame.setGraphicsEffect(self.shadow)

    # QTImer ==> Start

        self.timer = QtCore.QTimer()
        self.timer.timeout.connect(self.progress)

    ##Timer in millisecond
        self.timer.start(35)

    def progress(self):

        global counter

        # SET Value to progress bar
        self.ui.progressBar.setValue(counter)

        # CLose splash scree and open app

        if counter > 100:
            #stop timer
            self.timer.stop()
            
            #show main window
            self.main = MainWindow()
            self.main.show()

            #close splash screen
            self.close()

        counter += 1
    
    def start_animation(self):
        opacity_effect = QtWidgets.QGraphicsOpacityEffect(self.label)
        self.label.setGraphicsEffect(opacity_effect)

        geometry_animation = QtCore.QPropertyAnimation(
            self.label,
            b"geometry",
            duration=4700,
            startValue=QtCore.QRect(190, -260, 671, 261),
            endValue=QtCore.QRect(42, 274, 391, 231),
        )

        opacity_animation = QtCore.QPropertyAnimation(
            opacity_effect, 
            b"opacity", 
            duration=6000, 
            startValue=0.0, 
            endValue=1.0
        )

        group = QtCore.QParallelAnimationGroup(self.label)
        group.addAnimation(geometry_animation)
        group.addAnimation(opacity_animation)
        group.start(QtCore.QAbstractAnimation.DeleteWhenStopped)

Источник

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

Автор решения: S. Nick

Класс QPropertyAnimation анимирует свойства Qt.
Больше https://doc.qt.io/qt-5/qpropertyanimation.html

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


class Ui_MainWindow10(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(492, 613)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setStyleSheet("#centralwidget{\n"
"background-color: rgb(0, 0, 0);\n"
"}")
        self.centralwidget.setObjectName("centralwidget")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.centralwidget)
        self.verticalLayout.setObjectName("verticalLayout")
        
        self.frame = QtWidgets.QFrame(self.centralwidget)
        self.frame.setStyleSheet("QFrame {\n"
"background-color: rgb(0, 0, 0);\n"
"color: rgb(220, 220, 220);\n"
"border-radius: 10px\n"
"\n"
"}")
        self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame.setObjectName("frame")
        
        self.progressBar = QtWidgets.QProgressBar(self.frame)
#        self.progressBar.setGeometry(QtCore.QRect(126, 530, 220, 30))
# +++
        self.progressBar.setStyleSheet("""
        QProgressBar {
            background-color: #DA7B93;
            color: rgb(200, 200, 200);
            border-style: none;
            border-radius: 10px;
            text-align: center;
            font-size: 30px;
        }
        QProgressBar::chunk {
            border-radius: 10px;
            background-color: qlineargradient(spread:pad x1:0, x2:1, y1:0.511364, y2:0.523, stop:0 #1C3334, stop:1 #376E6F);
        }
        """)
        self.progressBar.setAlignment(QtCore.Qt.AlignCenter)
        self.progressBar.setObjectName("progressBar")
# +++        
        self.progressBar.resize(self.width() - 180, 40)
        self.progressBar.move(80, 510)
        self.progressBar.setFormat('%p%')
        self.progressBar.setTextVisible(True)
        self.progressBar.setRange(0, 150)
        self.progressBar.setValue(20)
        
        self.label_4 = QtWidgets.QLabel(self.frame)
        self.label_4.setGeometry(QtCore.QRect(300, 560, 181, 31))
        font = QtGui.QFont()
        font.setPointSize(14)
        self.label_4.setFont(font)
        self.label_4.setStyleSheet("color: rgb(98, 114, 164);")
        self.label_4.setObjectName("label_4")
        self.label_3 = QtWidgets.QLabel(self.frame)
        self.label_3.setGeometry(QtCore.QRect(20, 0, 431, 291))
        self.label_3.setText("")
        self.label_3.setPixmap(QtGui.QPixmap("lena.jpg"))
        self.label_3.setAlignment(QtCore.Qt.AlignCenter)
        self.label_3.setObjectName("label_3")
        self.label = QtWidgets.QLabel(self.frame)
        self.label.setGeometry(QtCore.QRect(42, 274, 391, 231))
        self.label.setText("")
        self.label.setPixmap(QtGui.QPixmap("Ok.png"))
        self.label.setAlignment(QtCore.Qt.AlignCenter)
        self.label.setObjectName("label")
        
        self.verticalLayout.addWidget(self.frame)
        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.label_4.setText(_translate("MainWindow", "<strong>Created</strong>: Nanoxia"))


class MainWindow(QtWidgets.QMainWindow, Ui_MainWindow10):   
    def __init__(self):
        super().__init__()
        
        self.setupUi(self)
        
        self.counter = 0
        self.timer = QTimer()
        self.timer.timeout.connect(self.loading)
        self.timer.start(30)
        
        self.start_animation()

    def loading(self):
        self.progressBar.setValue(self.counter)
        self.counter += 1
        if self.counter == 151: self.timer.stop()
        
    def start_animation(self):
        opacity_effect = QtWidgets.QGraphicsOpacityEffect(self.label)
        self.label.setGraphicsEffect(opacity_effect)

        geometry_animation = QtCore.QPropertyAnimation(
            self.label,
            b"geometry",
            duration=4700,
            startValue=QtCore.QRect(190, -260, 671, 261),
            endValue=QtCore.QRect(42, 274, 391, 231),
        )

        opacity_animation = QtCore.QPropertyAnimation(
            opacity_effect, 
            b"opacity", 
            duration=6000, 
            startValue=0.0, 
            endValue=1.0
        )

        group = QtCore.QParallelAnimationGroup(self.label)
        group.addAnimation(geometry_animation)
        group.addAnimation(opacity_animation)
        group.start(QtCore.QAbstractAnimation.DeleteWhenStopped)


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

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

Update

Картинка вылетает из-за угла, а мне надо чтобы она появлялась на своём месте.

Я вам показал ДВЕ анимации. Уберите анимацию geometry_animation и будет то что вам надо.

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


class Ui_MainWindow10(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(492, 613)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setStyleSheet("#centralwidget{\n"
"background-color: rgb(0, 0, 0);\n"
"}")
        self.centralwidget.setObjectName("centralwidget")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.centralwidget)
        self.verticalLayout.setObjectName("verticalLayout")
        
        self.frame = QtWidgets.QFrame(self.centralwidget)
        self.frame.setStyleSheet("QFrame {\n"
"background-color: rgb(0, 0, 0);\n"
"color: rgb(220, 220, 220);\n"
"border-radius: 10px\n"
"\n"
"}")
        self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame.setObjectName("frame")
        
        self.progressBar = QtWidgets.QProgressBar(self.frame)
#        self.progressBar.setGeometry(QtCore.QRect(126, 530, 220, 30))
# +++
        self.progressBar.setStyleSheet("""
        QProgressBar {
            background-color: #DA7B93;
            color: rgb(200, 200, 200);
            border-style: none;
            border-radius: 10px;
            text-align: center;
            font-size: 30px;
        }
        QProgressBar::chunk {
            border-radius: 10px;
            background-color: qlineargradient(spread:pad x1:0, x2:1, y1:0.511364, y2:0.523, stop:0 #1C3334, stop:1 #376E6F);
        }
        """)
        self.progressBar.setAlignment(QtCore.Qt.AlignCenter)
        self.progressBar.setObjectName("progressBar")
# +++        
        self.progressBar.resize(self.width() - 180, 40)
        self.progressBar.move(80, 510)
        self.progressBar.setFormat('%p%')
        self.progressBar.setTextVisible(True)
        self.progressBar.setRange(0, 150)
        self.progressBar.setValue(20)
        
        self.label_4 = QtWidgets.QLabel(self.frame)
        self.label_4.setGeometry(QtCore.QRect(300, 560, 181, 31))
        font = QtGui.QFont()
        font.setPointSize(14)
        self.label_4.setFont(font)
        self.label_4.setStyleSheet("color: rgb(98, 114, 164);")
        self.label_4.setObjectName("label_4")
        self.label_3 = QtWidgets.QLabel(self.frame)
        self.label_3.setGeometry(QtCore.QRect(20, 0, 431, 291))
        self.label_3.setText("")
        self.label_3.setPixmap(QtGui.QPixmap("lena.jpg"))
        self.label_3.setAlignment(QtCore.Qt.AlignCenter)
        self.label_3.setObjectName("label_3")
        self.label = QtWidgets.QLabel(self.frame)
        self.label.setGeometry(QtCore.QRect(42, 274, 391, 231))
        self.label.setText("")
        self.label.setPixmap(QtGui.QPixmap("Ok.png"))
        self.label.setAlignment(QtCore.Qt.AlignCenter)
        self.label.setObjectName("label")
        
        self.verticalLayout.addWidget(self.frame)
        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.label_4.setText(_translate("MainWindow", "<strong>Created</strong>: Nanoxia"))


class MainWindow(QtWidgets.QMainWindow, Ui_MainWindow10):   
    def __init__(self):
        super().__init__()
        
        self.setupUi(self)
        
        self.counter = 0
        self.timer = QTimer()
        self.timer.timeout.connect(self.loading)
        self.timer.start(30)
        
        self.start_animation()

    def loading(self):
        self.progressBar.setValue(self.counter)
        self.counter += 1
        if self.counter == 151: self.timer.stop()
        
    def start_animation(self):
        opacity_effect = QtWidgets.QGraphicsOpacityEffect(self.label)
        self.label.setGraphicsEffect(opacity_effect)
        '''
        geometry_animation = QtCore.QPropertyAnimation(
            self.label,
            b"geometry",
            duration=4700,
            startValue=QtCore.QRect(190, -260, 671, 261),
            endValue=QtCore.QRect(42, 274, 391, 231),
        )
        '''
        opacity_animation = QtCore.QPropertyAnimation(
            opacity_effect, 
            b"opacity", 
            duration=6000, 
            startValue=0.0, 
            endValue=1.0
        )

        group = QtCore.QParallelAnimationGroup(self.label)
#        group.addAnimation(geometry_animation)
        group.addAnimation(opacity_animation)
        group.start(QtCore.QAbstractAnimation.DeleteWhenStopped)


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

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

lena.jpg

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

Ok.png

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

→ Ссылка

licensed under cc by-sa 3.0 with attribution.