1.動畫屬性setPropertyName（）值設置及其效果

1.1.位置變換動畫

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.setWindowTitle('動畫學習')
        self.resize(500,500)
        self.setup_ui()

    def setup_ui(self):
        btn = QPushButton('測試按鈕',self)
        btn.move(100,100)
        btn.resize(200,200)
        btn.setStyleSheet('background-color: cyan;')

        # 1.創建一個動畫對象，並且設置目標 屬性

        # 有兩種方式
        # 法一
        animation = QPropertyAnimation(self)
        animation.setTargetObject(btn)  # 設置動畫對象
        animation.setPropertyName(b"pos")  # b代表字節；pos代表位置縮寫
        #法二
        # animation = QPropertyAnimation(btn, b'pos',self)

        # 2.設置屬性值： 開始 插值 結束
        animation.setStartValue(QPoint(0,0))  # 設置起始點
        animation.setEndValue((QPoint(300, 300)))  # 設置終點

        # 3.動畫時長
        animation.setDuration(3000)  # 時長單位毫秒


        # 4.啟東動畫
        animation.start()
        

if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)

    window = Window()
    window.show()


    sys.exit(app.exec_())

pos

1.2.尺寸變換動畫

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.setWindowTitle('動畫學習')
        self.resize(500,500)
        self.setup_ui()

    def setup_ui(self):
        btn = QPushButton('測試按鈕',self)
        btn.move(100,100)
        btn.resize(200,200)
        btn.setStyleSheet('background-color: cyan;')

        # 1.創建一個動畫對象，並且設置目標 屬性

        # 有兩種方式
        # 法一
        animation = QPropertyAnimation(self)
        animation.setTargetObject(btn)  # 設置動畫對象
        animation.setPropertyName(b"size")  # b代表字節；size代表位置縮寫
        #法二
        # animation = QPropertyAnimation(btn, b'pos',self)

        # 2.設置屬性值： 開始 插值 結束
        animation.setStartValue(QSize(0,0))  # 設置起始點
        animation.setEndValue((QSize(300, 300)))  # 設置終點

        # 3.動畫時長
        animation.setDuration(3000)  # 時長單位毫秒


        # 4.啟東動畫
        animation.start()


if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)

    window = Window()
    window.show()


    sys.exit(app.exec_())

size

1.3.位置和尺寸同時變化

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.setWindowTitle('動畫學習')
        self.resize(500,500)
        self.setup_ui()

    def setup_ui(self):
        btn = QPushButton('測試按鈕',self)
        btn.move(100,100)
        btn.resize(200,200)
        btn.setStyleSheet('background-color: cyan;')

        # 1.創建一個動畫對象，並且設置目標 屬性

        # 有兩種方式
        # 法一
        animation = QPropertyAnimation(self)
        animation.setTargetObject(btn)  # 設置動畫對象
        animation.setPropertyName(b"geometry")  # b代表字節；size代表位置縮寫
        #法二
        # animation = QPropertyAnimation(btn, b'pos',self)

        # 2.設置屬性值： 開始 插值 結束
        animation.setStartValue(QRect(0,0, 0,0))  # 設置起始點;初始尺寸
        animation.setEndValue((QRect(300, 300,150,150)))  # 設置終點；終止尺寸

        # 3.動畫時長
        animation.setDuration(3000)  # 時長單位毫秒


        # 4.啟東動畫
        animation.start()


if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)

    window = Window()
    window.show()


    sys.exit(app.exec_())

geometry

1.4透明度變化

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.setWindowTitle('動畫學習')
        self.resize(500,500)
        self.setup_ui()

    def setup_ui(self):
        btn = QPushButton('測試按鈕',self)
        btn.move(100,100)
        btn.resize(200,200)
        btn.setStyleSheet('background-color: cyan;')

        # 1.創建一個動畫對象，並且設置目標 屬性

        # 有兩種方式
        # 法一
        animation = QPropertyAnimation(self)
        animation.setTargetObject(btn)  # 設置動畫對象
        animation.setPropertyName(b"windowOpacity")  # b代表字節；size代表位置縮寫
        #法二
        # animation = QPropertyAnimation(btn, b'pos',self)

        # 2.設置屬性值： 開始 插值 結束
        animation.setStartValue(1)  # 設置起始點;初始尺寸
        animation.setKeyValueAt(0.5,0.5)
        animation.setEndValue(1)  # 設置終點；終止尺寸

        # 3.動畫時長
        animation.setDuration(3000)  # 時長單位毫秒


        # 4.啟東動畫
        animation.start()


if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)

    window = Window()
    window.show()


    sys.exit(app.exec_())

windowOpacity

2.動畫曲線效果

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.setWindowTitle('動畫學習')
        self.resize(500,500)
        self.setup_ui()

    def setup_ui(self):
        btn = QPushButton('測試按鈕',self)
        btn.move(100,100)
        btn.resize(200,200)
        btn.setStyleSheet('background-color: cyan;')

        # 1.創建一個動畫對象，並且設置目標 屬性

        # 有兩種方式
        # 法一
        animation = QPropertyAnimation(self)
        animation.setTargetObject(btn)  # 設置動畫對象
        animation.setPropertyName(b"pos")  # b代表字節；pos代表位置
        #法二
        # animation = QPropertyAnimation(btn, b'geometry',self)

        # 2.設置屬性值： 開始 插值 結束
        animation.setStartValue(QPoint(0, 0))
        animation.setEndValue(QPoint(300, 300))

        # 3.動畫時長
        animation.setDuration(3000)  # 時長單位毫秒

        animation.setEasingCurve(QEasingCurve.OutBounce)  # setEasingCurve動畫曲線

        # 4.啟東動畫
        animation.start()


if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)

    window = Window()
    window.show()


    sys.exit(app.exec_())

setEasingCurve

3.父類QAbstractAnimation功能

3.1循環操作

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.setWindowTitle('動畫學習')
        self.resize(500,500)
        self.setup_ui()

    def setup_ui(self):
        btn = QPushButton('測試按鈕',self)
        btn.move(100,100)
        btn.resize(200,200)
        btn.setStyleSheet('background-color: cyan;')

        # 1.創建一個動畫對象，並且設置目標 屬性

        # 有兩種方式
        # 法一
        animation = QPropertyAnimation(self)
        animation.setTargetObject(btn)  # 設置動畫對象
        animation.setPropertyName(b"pos")  # b代表字節；pos代表位置
        #法二
        # animation = QPropertyAnimation(btn, b'geometry',self)

        # 2.設置屬性值： 開始 插值 結束
        animation.setStartValue(QPoint(0, 0))
        animation.setEndValue(QPoint(300, 300))

        # 3.動畫時長
        animation.setDuration(3000)  # 時長單位毫秒
        animation.setLoopCount(5) #設置動畫循環次數

        animation.setEasingCurve(QEasingCurve.OutBounce)  # setEasingCurve動畫曲線

        # 4.啟東動畫
        animation.start()


if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)

    window = Window()
    window.show()


    sys.exit(app.exec_())

setLoopCount

3.2動畫時長操作

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.setWindowTitle('動畫學習')
        self.resize(500,500)
        self.setup_ui()

    def setup_ui(self):
        btn = QPushButton('測試按鈕',self)
        btn.move(100,100)
        btn.resize(200,200)
        btn.setStyleSheet('background-color: cyan;')

        # 1.創建一個動畫對象，並且設置目標 屬性

        # 有兩種方式
        # 法一
        animation = QPropertyAnimation(self)
        animation.setTargetObject(btn)  # 設置動畫對象
        animation.setPropertyName(b"pos")  # b代表字節；pos代表位置
        #法二
        # animation = QPropertyAnimation(btn, b'geometry',self)

        # 2.設置屬性值： 開始 插值 結束
        animation.setStartValue(QPoint(0, 0))
        animation.setEndValue(QPoint(300, 300))

        # 3.動畫時長
        animation.setDuration(3000)  # 時長單位毫秒
        animation.setLoopCount(5) #設置動畫循環次數
        animation.setDuration(2000) # 設置單次動畫時長

        animation.setEasingCurve(QEasingCurve.OutBounce)  # setEasingCurve動畫曲線

        # 4.啟東動畫
        animation.start()


if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)

    window = Window()
    window.show()


    sys.exit(app.exec_())

setDuration

3.2動畫方向

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.setWindowTitle('動畫學習')
        self.resize(500,500)
        self.setup_ui()

    def setup_ui(self):
        btn = QPushButton('測試按鈕',self)
        btn.move(100,100)
        btn.resize(200,200)
        btn.setStyleSheet('background-color: cyan;')

        # 1.創建一個動畫對象，並且設置目標 屬性

        # 有兩種方式
        # 法一
        animation = QPropertyAnimation(self)
        animation.setTargetObject(btn)  # 設置動畫對象
        animation.setPropertyName(b"pos")  # b代表字節；pos代表位置
        #法二
        # animation = QPropertyAnimation(btn, b'geometry',self)

        # 2.設置屬性值： 開始 插值 結束
        animation.setStartValue(QPoint(0, 0))
        animation.setEndValue(QPoint(300, 300))

        # 3.動畫時長
        animation.setDuration(3000)  # 時長單位毫秒
        animation.setLoopCount(5) #設置動畫循環次數
        animation.setDuration(2000) # 設置單次動畫時長
        animation.setDirection(QAbstractAnimation.Backward) # 設置動畫方向反着走
        animation.setEasingCurve(QEasingCurve.OutBounce)  # setEasingCurve動畫曲線

        # 4.啟東動畫
        animation.start()


if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)

    window = Window()
    window.show()


    sys.exit(app.exec_())

setDirection

3.3動畫狀態

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.setWindowTitle('動畫學習')
        self.resize(500,500)
        self.setup_ui()

    def setup_ui(self):
        btn = QPushButton('測試按鈕',self)
        btn.move(100,100)
        btn.resize(200,200)
        btn.setStyleSheet('background-color: cyan;')

        # 1.創建一個動畫對象，並且設置目標 屬性

        # 有兩種方式
        # 法一
        animation = QPropertyAnimation(self)
        animation.setTargetObject(btn)  # 設置動畫對象
        animation.setPropertyName(b"pos")  # b代表字節；pos代表位置
        #法二
        # animation = QPropertyAnimation(btn, b'geometry',self)

        # 2.設置屬性值： 開始 插值 結束
        animation.setStartValue(QPoint(0, 0))
        animation.setEndValue(QPoint(300, 300))

        # 3.動畫時長
        animation.setDuration(3000)  # 時長單位毫秒
        animation.setLoopCount(5) #設置動畫循環次數
        animation.setDuration(2000) # 設置單次動畫時長
        animation.setDirection(QAbstractAnimation.Backward) # 設置動畫方向反着走
        animation.setEasingCurve(QEasingCurve.OutBounce)  # setEasingCurve動畫曲線

        # 4.啟東動畫
        animation.start()
        def animation_operation():
            if animation.state() == QAbstractAnimation.Running:  # 判斷動畫是否運行
                animation.pause()
            elif animation.state() == QAbstractAnimation.Paused:  # 判斷動畫是否暫停
                animation.resume()
            elif animation.state() == QAbstractAnimation.Stopped:  # 判斷動畫是否停止
                animation.resume()

        btn.clicked.connect(animation_operation)

if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)

    window = Window()
    window.show()


    sys.exit(app.exec_())

animation.state()

3.3動畫信號

三個信號：currentLoopChanged;finished;stateChanged

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.setWindowTitle('動畫學習')
        self.resize(500,500)
        self.setup_ui()

    def setup_ui(self):
        btn = QPushButton('測試按鈕',self)
        btn.move(100,100)
        btn.resize(200,200)
        btn.setStyleSheet('background-color: cyan;')

        # 1.創建一個動畫對象，並且設置目標 屬性

        # 有兩種方式
        # 法一
        animation = QPropertyAnimation(self)
        animation.setTargetObject(btn)  # 設置動畫對象
        animation.setPropertyName(b"pos")  # b代表字節；pos代表位置
        #法二
        # animation = QPropertyAnimation(btn, b'geometry',self)

        # 2.設置屬性值： 開始 插值 結束
        animation.setStartValue(QPoint(0, 0))
        animation.setEndValue(QPoint(300, 300))

        # 3.動畫時長
        animation.setDuration(3000)  # 時長單位毫秒
        animation.setLoopCount(5) #設置動畫循環次數
        animation.setDuration(2000) # 設置單次動畫時長
        animation.setDirection(QAbstractAnimation.Backward) # 設置動畫方向反着走
        animation.setEasingCurve(QEasingCurve.OutBounce)  # setEasingCurve動畫曲線

        # 4.啟東動畫
        animation.start()
        def animation_operation():
            if animation.state() == QAbstractAnimation.Running:  # 判斷動畫是否運行
                animation.pause()
            elif animation.state() == QAbstractAnimation.Paused:  # 判斷動畫是否暫停
                animation.resume()
            elif animation.state() == QAbstractAnimation.Stopped:  # 判斷動畫是否停止
                animation.resume()

        btn.clicked.connect(animation_operation)

        animation.currentLoopChanged.connect(lambda val: print("當前循環次數發生改變", val))
        # 循環次數發生變化發射信號
        animation.finished.connect(lambda: print("動畫執行完畢"))
        # 循環結束發射信號
        animation.stateChanged.connect(lambda ns, os: print("狀態發生改變", ns, os))
        # 循環狀態發生變化發射信號

if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)

    window = Window()
    window.show()


    sys.exit(app.exec_())

View Code

3.4動畫組

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("動畫組的學習")
        self.resize(800, 800)
        self.setup_ui()

    def setup_ui(self):
        red_btn = QPushButton("紅色按鈕", self)
        green_btn = QPushButton("綠色按鈕", self)

        red_btn.resize(100, 100)
        green_btn.resize(100, 100)
        green_btn.move(150, 150)

        red_btn.setStyleSheet("""
            background-color: red;
        """)

        green_btn.setStyleSheet("""
                    background-color: green;
        """)


        # 動畫設置
        animation = QPropertyAnimation(green_btn, b"pos", self)

        animation.setKeyValueAt(0, QPoint(150, 150))
        animation.setKeyValueAt(0.25, QPoint(550, 150))
        animation.setKeyValueAt(0.5, QPoint(550, 550))
        animation.setKeyValueAt(0.75, QPoint(150, 550))
        animation.setKeyValueAt(1, QPoint(150, 150))

        animation.setDuration(5000)
        # animation.setLoopCount(3)

        # animation.start()

        animation2 = QPropertyAnimation(red_btn, b"pos", self)

        animation2.setKeyValueAt(0, QPoint(0, 0))
        animation2.setKeyValueAt(0.25, QPoint(0, 700))
        animation2.setKeyValueAt(0.5, QPoint(700, 700))
        animation2.setKeyValueAt(0.75, QPoint(700, 0))
        animation2.setKeyValueAt(1, QPoint(0, 0))

        animation2.setDuration(5000)
        # animation2.setLoopCount(3)

        # animation2.start()

        animation_group1 = QSequentialAnimationGroup(self)  # 設置一個動畫組
        # QSequentialAnimationGroup # 串行動畫，多個動畫挨個執行
        # QParallelAnimationGroup  # 並行動畫，多個動畫一塊執行
        animation_group1.addAnimation(animation)  # 添加動畫
        # animation_group1.addPause(5000) #串行動畫暫時時間，串行

        pasuse_animation = QPauseAnimation()  #暫停動畫
        pasuse_animation.setDuration(3000)  # 設置暫停時間
        animation_group1.addAnimation(pasuse_animation)  # 添加動畫

        animation_group1.addAnimation(animation2)   # 添加動畫
        animation_group1.start()  # 動畫組開始執行

        red_btn.clicked.connect(animation_group1.pause)
        green_btn.clicked.connect(animation_group1.resume)


if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)

    window = Window()
    window.show()


    sys.exit(app.exec_())

View Code

QT的c++代碼該為python代碼只要把::改為.即可

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 pyqt5 動畫學習（二）改變控件顏色 pyqt5 動畫學習（三）指定控件的移動軌跡 PyQt5 加載gif動畫學習PyQt5（一）：安裝PyQt5以及在PyCharm上配置PyQt5 PyQt5之QComboBox學習 PyQt5 學習指南 PyQt5學習筆記1-安裝PyQt5 vnpy源碼閱讀學習(2)：學習PyQt5 PYQT5學習筆記之各模塊介紹 Python入門學習——PyQt5程序基本結構