64.md

# 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`。

![Animation along curve](img/a358e8c8049cef4fd02bc3385e49cedb.jpg)

图：沿曲线的动画

## 图形视图框架中的`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/)。