我们考虑一件事情，如果让你来做GUI实现按钮后在屏幕喷射烟花并放音乐，你应该如何做？

1. 需要一个UI窗口，一个代表button的icon图形，这个我可以用PS或者Sketch画出来。画的时候注意，一定要按照你想要的button 的比例构建。

   
   
   image.png

2. 我们需要定义一个烟花发射的video，以及一段音乐。
   https://github.com/YuanzhengMa/notes_md/blob/main/fireworks.gif

3. 然后需要对button绑定该动作就可以了。

绑定释放烟花，播放音乐在Qt中教slot function，按按钮这个的动作是用户发出的，叫做signal。

如下定义main窗口

# -*- coding: utf-8 -*-
# main.py


import argparse
import PIL.Image as Image
import PIL.ImageSequence as ImageSeq


# define hyper params
parser = argparse.ArgumentParser(description='Firework playing.')
parser.add_argument('--window_size', type=tuple, default=(300, 300), help='the size of the Main Window')

opt = parser.parse_args()

# designed the sub-class of Qt Window


class UiMainWindow(object):
    def __init__(self, options=None):
        self.opt = options
    # set up Ui in PyQt5 including windows, push button, radio buttons...

    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(self.opt.window_size[0], self.opt.window_size[1])

        MainWindow.setWindowOpacity(1)
        screen = QtWidgets.QDesktopWidget().screenGeometry()
        self.width = screen.width()
        self.height = screen.height()


        # 创建一个按钮控件-submit selctions
        self.pushButton = QtWidgets.QPushButton(MainWindow)
        self.pushButton.setGeometry(QtCore.QRect(self.opt.window_size[0]//2-50, self.opt.window_size[1]//2, 100, 32))
        # 1.png是我定义的图标
        self.pushButton.setStyleSheet("QPushButton{border-image: url(1.png)}")
        self.pushButton.setObjectName("submitButton")
        # rename Ui
        self.retranslateUi(MainWindow)
        # bind to slots
        QtCore.QMetaObject.connectSlotsByName(MainWindow)
        # binding slot for submit button
        self.pushButton.clicked.connect(self.openImg_Music)

    def openImg_Music(self):
        # image show with new window
        import imshowWin
        # resize imgs，fireworks.gif是烟花
        temp = Image.open("fireworks.gif")
        temp = [frame.resize((self.width, self.height)) for frame in ImageSeq.Iterator(temp)]

        temp[0].save("fireworks2.gif", save_all=True, append_images=temp[1:])
        #  imageio.mimsave('fireworks2.gif',temp)
        self.imgWin = imshowWin.multiImgs(imgs='fireworks2.gif')
        self.imgWin.show()

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

# Main function
if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()  # Create the normal window object
    ui = UiMainWindow(options=opt)  # 创建PyQt5设计的窗体对象
    ui.setupUi(MainWindow=MainWindow)  # 调用PyQt5窗体的方法对窗体对象进行初始化设置
    MainWindow.show()  # Show the designed window
    sys.exit(app.exec_())  # close the app and exit

import imshowWin是我自己定义的一个类，其内容如下：

定义一个multiImgs类，

# -*- coding: utf-8 -*-
# imshowWin.py

from PyQt5.QtWidgets import *
from PyQt5.QtGui import QPainter, QPixmap, QMovie
from PyQt5.QtCore import Qt, QRect, QCoreApplication, QMetaObject
import pygame


class multiImgs(QLabel):
    def __init__(self, parent=None, imgs=None):
        super(multiImgs, self).__init__(parent)

        self.setObjectName("Fireworks")
        self.setWindowFlag(Qt.FramelessWindowHint)
        screen = QDesktopWidget().screenGeometry()
        self.width = screen.width()
        self.height = screen.height()
        self.resize(self.width, self.height)
        self.label = QLabel(self)
        self.label.setGeometry(QRect(0, 0, self.width, self.height))
        self.label.setObjectName("label")
        # show gif
        self.gif = QMovie(imgs)
        self.label.setMovie(self.gif)
        self.gif.start()
        # Opacity button
        self.pushBtn = QPushButton(self)
        self.pushBtn.setGeometry(QRect(0, 0, self.width, self.height))
        op = QGraphicsOpacityEffect()
        op.setOpacity(0)
        self.pushBtn.setGraphicsEffect(op)
        #  play music，lonelyWaltz.mp3是我的音乐
        pygame.init()
        my_track = pygame.mixer.music.load(r"lonelyWaltz.mp3")
        pygame.mixer.music.play()

        # add slot for opacity button
        self.pushBtn.clicked.connect(self.close_all)
        # rename windows
        self.retranslateUi(self)
        # connect slots for signal
        QMetaObject.connectSlotsByName(self)

    def close_all(self):
        self.close()
        pygame.mixer.music.stop()

    def retranslateUi(self, Form):
        _translate = QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Form"))