# PyQt 中的`QPropertyAnimation` > 原文： [http://zetcode.com/pyqt/qpropertyanimation/](http://zetcode.com/pyqt/qpropertyanimation/) PyQt 中的 QPropertyAnimation 顯示了如何使用`QPropertyAnimation`在 PyQt 中創建動畫。 在示例中，我們對對象的大小，顏色和位置進行了動畫處理。 來源和球圖像可以在作者的 Github [倉庫](https://github.com/janbodnar/pyqt-qpropertyanimation)中找到。 ## `QPropertyAnimation` `QPropertyAnimation`內插 PyQt 屬性。 聲明屬性的類必須為為`QObject`。 ## `QPropertyAnimation`方法 下表顯示了一些重要的`QPropertyAnimation`方法： | 名稱 | 描述 | | --- | --- | | `start()` | 開始動畫 | | `stop()` | 終止動畫 | | `setStartValue()` | 設置動畫的起始值 | | `setEndValue()` | 設置動畫的結束值 | | `setDuration()` | 設置動畫的持續時間，以毫秒為單位 | | `setKeyValueAt()` | 在給定步驟以給定值創建關鍵幀 | | `setLoopCount()` | 設置動畫的重復次數 | ## 使用`QPropertyAnimation`設置動畫大小 在第一個示例中，我們為小部件的大小設置動畫。 `size_anim.py` ```py #!/usr/bin/python3 # -*- coding: utf-8 -*- ''' ZetCode Advanced PyQt5 tutorial This program animates the size of a widget with QPropertyAnimation. Author: Jan Bodnar Website: zetcode.com Last edited: August 2017 ''' from PyQt5.QtWidgets import QWidget, QApplication, QFrame, QPushButton from PyQt5.QtCore import QRect, QPropertyAnimation import sys class Example(QWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): self.button = QPushButton("Start", self) self.button.clicked.connect(self.doAnim) self.button.move(30, 30) self.frame = QFrame(self) self.frame.setFrameStyle(QFrame.Panel | QFrame.Raised) self.frame.setGeometry(150, 30, 100, 100) self.setGeometry(300, 300, 380, 300) self.setWindowTitle('Animation') self.show() def doAnim(self): self.anim = QPropertyAnimation(self.frame, b"geometry") self.anim.setDuration(10000) self.anim.setStartValue(QRect(150, 30, 100, 100)) self.anim.setEndValue(QRect(150, 30, 200, 200)) self.anim.start() if __name__ == "__main__": app = QApplication([]) ex = Example() ex.show() app.exec_() ``` 該示例對`QFrame`小部件的大小進行動畫處理。 ```py self.button = QPushButton("Start", self) self.button.clicked.connect(self.doAnim) self.button.move(30, 30) ``` 動畫以`QPushButton`開始。 ```py self.anim = QPropertyAnimation(self.frame, b"geometry") ``` `QPropertyAnimation`已創建。 第一個參數是要動畫的目標對象； 在我們的例子中，我們為`QFrame`小部件設置了動畫。 第二個參數是將要更改的屬性。 ```py self.anim.setDuration(10000) ``` `setDuration()`設置動畫的持續時間（以毫秒為單位）。 ```py self.anim.setStartValue(QRect(150, 30, 100, 100)) self.anim.setEndValue(QRect(150, 30, 200, 200)) ``` 使用`setStartValue()`和`setEndValue()`分別定義動畫的開始和結束值。 ```py self.anim.start() ``` 動畫從`start()`方法開始。 ## 使用`QPropertyAnimation`設置顏色的動畫 下面的示例對小部件的顏色進行動畫處理。 由于沒有顏色屬性，因此我們必須創建一個。 `color_anim.py` ```py #!/usr/bin/python3 # -*- coding: utf-8 -*- ''' ZetCode Advanced PyQt5 tutorial This programs animates the color of a QLabel. Author: Jan Bodnar Website: zetcode.com Last edited: August 2017 ''' from PyQt5.QtWidgets import (QWidget, QApplication, QPushButton, QLabel, QHBoxLayout, QSizePolicy) from PyQt5.QtGui import QColor from PyQt5.QtCore import QPropertyAnimation, pyqtProperty import sys class MyLabel(QLabel): def __init__(self, text): super().__init__(text) def _set_color(self, col): palette = self.palette() palette.setColor(self.foregroundRole(), col) self.setPalette(palette) color = pyqtProperty(QColor, fset=_set_color) class Example(QWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): hbox = QHBoxLayout(self) self.button = QPushButton("Start", self) self.button.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Fixed) hbox.addWidget(self.button) hbox.addSpacing(40) self.label = MyLabel("Summer") font = self.label.font() font.setPointSize(35) self.label.setFont(font) hbox.addWidget(self.label) self.anim = QPropertyAnimation(self.label, b"color") self.anim.setDuration(2500) self.anim.setLoopCount(2) self.anim.setStartValue(QColor(0, 0, 0)) self.anim.setEndValue(QColor(255, 255, 255)) self.button.clicked.connect(self.anim.start) self.setGeometry(300, 300, 380, 250) self.setWindowTitle('Color anim') self.show() if __name__ == "__main__": app = QApplication([]) ex = Example() ex.show() app.exec_() ``` 該示例逐漸更改`QLabel`的顏色值。 ```py class MyLabel(QLabel): def __init__(self, text): super().__init__(text) def _set_color(self, col): palette = self.palette() palette.setColor(self.foregroundRole(), col) self.setPalette(palette) color = pyqtProperty(QColor, fset=_set_color) ``` `QLabel`沒有顏色屬性； 因此，我們用`pyqtProperty`定義一個。 更改此屬性將更新標簽的顏色。 ```py self.anim = QPropertyAnimation(self.label, b"color") ``` `QPropertyAnimation`更改標簽窗口小部件的`color`屬性。 ```py self.anim.setLoopCount(2) ``` 使用`setLoopCount()`方法，我們可以更改動畫運行的次數。 ```py self.anim.setStartValue(QColor(0, 0, 0)) self.anim.setEndValue(QColor(255, 255, 255)) ``` 我們設置開始和結束顏色值。 ## 使用`QPropertyAnimation`沿曲線動畫 以下示例使球沿貝塞爾曲線動畫。 `anim_along_curve.py` ```py #!/usr/bin/python3 # -*- coding: utf-8 -*- ''' ZetCode Advanced PyQt5 tutorial This programs animates a ball object along a curve. Author: Jan Bodnar Website: zetcode.com Last edited: August 2017 ''' from PyQt5.QtWidgets import QApplication, QWidget, QLabel from PyQt5.QtGui import QPainter, QPixmap, QPainterPath from PyQt5.QtCore import QObject, QPointF, QPropertyAnimation, pyqtProperty import sys class Ball(QLabel): def __init__(self, parent): super().__init__(parent) pix = QPixmap("ball.png") self.h = pix.height() self.w = pix.width() self.setPixmap(pix) def _set_pos(self, pos): self.move(pos.x() - self.w/2, pos.y() - self.h/2) pos = pyqtProperty(QPointF, fset=_set_pos) class Example(QWidget): def __init__(self): super().__init__() self.initView() self.initAnimation() def initView(self): self.path = QPainterPath() self.path.moveTo(30, 30) self.path.cubicTo(30, 30, 200, 350, 350, 30) self.ball = Ball(self) self.ball.pos = QPointF(30, 30) self.setWindowTitle("Animation along curve") self.setGeometry(300, 300, 400, 300) self.show() def paintEvent(self, e): qp = QPainter() qp.begin(self) qp.setRenderHint(QPainter.Antialiasing) qp.drawPath(self.path) qp.end() def initAnimation(self): self.anim = QPropertyAnimation(self.ball, b'pos') self.anim.setDuration(7000) self.anim.setStartValue(QPointF(30, 30)) vals = [p/100 for p in range(0, 101)] for i in vals: self.anim.setKeyValueAt(i, self.path.pointAtPercent(i)) self.anim.setEndValue(QPointF(350, 30)) self.anim.start() if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_()) ``` 該示例在窗口上繪制一條曲線。 沿繪制的曲線為球對象設置動畫。 ```py class Ball(QLabel): def __init__(self, parent): super().__init__(parent) pix = QPixmap("ball.png") self.h = pix.height() self.w = pix.width() self.setPixmap(pix) ``` 球顯示在`QLabel`小部件中。 ```py def _set_pos(self, pos): self.move(pos.x() - self.w/2, pos.y() - self.h/2) pos = pyqtProperty(QPointF, fset=_set_pos) ``` 我們調整球的位置； 我們希望將標簽的中間放置在曲線上。 ```py self.path = QPainterPath() self.path.moveTo(30, 30) self.path.cubicTo(30, 30, 200, 350, 350, 30) ``` 貝塞爾曲線是用`QPainterPath`創建的。 其`cubicTo()`方法以起點，控制點和終點為參數。 ```py def paintEvent(self, e): qp = QPainter() qp.begin(self) qp.setRenderHint(QPainter.Antialiasing) qp.drawPath(self.path) qp.end() ``` 在`paintEvent()`方法中使用`drawPath()`方法繪制曲線。 ```py self.anim = QPropertyAnimation(self.ball, b'pos') ``` 我們用`QPropertyAnimation`為球的`pos`屬性設置動畫。 ```py vals = [p/100 for p in range(0, 101)] ``` 通過 Python 列表推導式，我們創建了動畫步驟列表。 步長是介于 0 和 1 之間的值。 ```py for i in vals: self.anim.setKeyValueAt(i, self.path.pointAtPercent(i)) ``` 使用`setKeyValueAt()`，我們定義給定步驟中球的位置。 使用`pointAtPercent()`，我們可以在路徑的給定百分比處獲得`QPointF`。  圖：沿曲線的動畫 ## 圖形視圖框架中的`QPropertyAnimation` `QPropertyAnimation`可以在 Graphics View Framework 中為圖形項目設置動畫。 動畫對象必須繼承自`QObject`和`QGraphicsItem`。 `gvf_anim.py` ```py #!/usr/bin/python3 # -*- coding: utf-8 -*- ''' ZetCode Advanced PyQt5 tutorial This programs animates a ball object. Author: Jan Bodnar Website: zetcode.com Last edited: August 2017 ''' from PyQt5.QtWidgets import (QApplication, QGraphicsView, QGraphicsPixmapItem, QGraphicsScene) from PyQt5.QtGui import QPainter, QPixmap from PyQt5.QtCore import (QObject, QPointF, QPropertyAnimation, pyqtProperty) import sys class Ball(QObject): def __init__(self): super().__init__() self.pixmap_item = QGraphicsPixmapItem(QPixmap("ball.png")) def _set_pos(self, pos): self.pixmap_item.setPos(pos) pos = pyqtProperty(QPointF, fset=_set_pos) class Example(QGraphicsView): def __init__(self): super().__init__() self.initView() def initView(self): self.ball = Ball() self.anim = QPropertyAnimation(self.ball, b'pos') self.anim.setDuration(8000) self.anim.setStartValue(QPointF(5, 30)) self.anim.setKeyValueAt(0.3, QPointF(80, 30)) self.anim.setKeyValueAt(0.5, QPointF(200, 30)) self.anim.setKeyValueAt(0.8, QPointF(250, 250)) self.anim.setEndValue(QPointF(290, 30)) self.scene = QGraphicsScene(self) self.scene.setSceneRect(0, 0, 300, 300) self.scene.addItem(self.ball.pixmap_item) self.setScene(self.scene) self.setWindowTitle("Ball animation") self.setRenderHint(QPainter.Antialiasing) self.setGeometry(300, 300, 500, 350) self.anim.start() self.show() if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_()) ``` 該示例在 Graphics View Framework 中使用`QPropertyAnimation`為球對象設置動畫。 ```py class Ball(QObject): def __init__(self): super().__init__() self.pixmap_item = QGraphicsPixmapItem(QPixmap("ball.png")) def _set_pos(self, pos): self.pixmap_item.setPos(pos) pos = pyqtProperty(QPointF, fset=_set_pos) ``` Sice PyQt 不支持多重繼承，我們使用合成技術來滿足前面提到的條件。 ```py class Example(QGraphicsView): def __init__(self): super().__init__() self.initView() ``` `QGraphicsView`在可滾動視口中可視化`QGraphicsScene`的內容。 ```py self.anim = QPropertyAnimation(self.ball, b'pos') ``` 我們將使用`QPropertyAnimation`為球對象的`position`屬性設置動畫。 ```py self.anim.setDuration(8000) ``` 動畫持續八秒鐘。 ```py self.anim.setKeyValueAt(0.3, QPointF(80, 30)) self.anim.setKeyValueAt(0.5, QPointF(200, 30)) self.anim.setKeyValueAt(0.8, QPointF(250, 250)) ``` 使用`setKeyValueAt()`方法，我們在給定步驟創建具有給定值的關鍵幀。 換句話說，我們定義了動畫給定步驟中球的位置。 ```py self.scene = QGraphicsScene(self) self.scene.setSceneRect(0, 0, 300, 300) self.scene.addItem(self.ball.pixmap_item) ``` 創建`QGraphicsScene`并將球添加到場景中。 它提供了一個用于管理大量 2D 圖形項目的界面。 注意，我們將`ball`屬性添加到場景中，而不是`ball`對象。 在本教程中，我們使用`QPropertyAnimation`創建了動畫。 您可能也對以下相關教程感興趣： [PyQt5 教程](/gui/pyqt5/)， [`QNetworkAccessManager`教程](/pyqt/qnetworkaccessmanager/)和 [Python 教程](/lang/python/)。