QParallelAnimationGroup的使用——创建简单的动画

写作思路

本篇博客主要实现在QGraphicsItem 添加特效，主要是基于QParallelAnimationGroup这个类实现动画的播放，实现效果如下，创建可以创建并让星星往复闪烁
本文是在PyQt创建UE蓝图这篇文章的基础上扩展的，将原有的节点绘制改为星星，并添加闪烁特效。
实现步骤：
1、创建一个场景提供绘制，可参考QGraphicsScene、QGraphicsView的基础使用
2、基于QGraphicsItem创建一个星星item
3、基于QParallelAnimationGroup给星星添加特效

1、创建一个场景提供绘制

可参考QGraphicsScene、QGraphicsView的基础使用

2、基于QGraphicsItem创建一个星星item

class StarItem(QGraphicsItem):def __init__(self, scene, parent=None):super(StarItem, self).__init__(parent)self.setFlag(QGraphicsItem.ItemIsMovable, True)self.setFlag(QGraphicsItem.ItemIsSelectable, True)self.setFlag(QGraphicsItem.ItemSendsGeometryChanges, True)self.setFlag(QGraphicsItem.ItemIsFocusable, True)self.scene = sceneself.radius = 50self.anim = Noneself.addAnimation()def addAnimation(self):self.anim = StarAnimation(self, 0.25)self.anim.start()def stopAnimation(self):if self.anim:self.anim.stop()self.anim = Noneself.graphicsEffect().setColor(QColor(0x00, 0x00, 0x00, 0x00))def createGraphicsEffect(self):dropShadow = QGraphicsDropShadowEffect()dropShadow.setColor(QColor(0xff, 0x00, 0x00, 0xff))dropShadow.setBlurRadius(50)dropShadow.setOffset(0)self.setGraphicsEffect(dropShadow)def paint(self, painter, style, *args, **kwargs):painter.setRenderHint(QPainter.Antialiasing)painter.setRenderHint(QPainter.TextAntialiasing)R = self.radiusPi = 3.1415926deg = Pi * 72 / 180points = [QPoint(R, 0),QPoint(R * cos(deg), -R * sin(deg)),QPoint(R * cos(2 * deg), -R * sin(2 * deg)),QPoint(R * cos(3 * deg), -R * sin(3 * deg)),QPoint(R * cos(4 * deg), -R * sin(4 * deg)),]font = QFont()font.setPointSize(12)font.setBold(True)painter.setFont(font)penLine = QPen()penLine.setWidth(2)penLine.setColor(Qt.blue)penLine.setStyle(Qt.SolidLine)penLine.setCapStyle(Qt.FlatCap)penLine.setJoinStyle(Qt.BevelJoin)painter.setPen(penLine)painter.rotate(54)starPath = QPainterPath()starPath.moveTo(points[0])starPath.lineTo(points[2])starPath.lineTo(points[4])starPath.lineTo(points[1])starPath.lineTo(points[3])starPath.closeSubpath()painter.drawPath(starPath)def boundingRect(self):return QRectF(0, 0, self.radius, self.radius)

简要分析一下
1、首先星星的绘制方法在paint中

2、boundingRect方法要重写并且一定要重写，这样才能控制星星，相当于给星星增加了一个触碰区域

3、我们在星星内部封装了三个方法，分别是
生成特效 createGraphicsEffect：使用Qt自带的阴影特效QGraphicsDropShadowEffect，提供一个包围绘制路径内的一个投影

开始动画 startAnimation：创建一个动画的特效，如果不创建这个动画，投影只会静止在星星上

结束动画 stopAnimation：停止动画，并且将投影透明化（也可以直接置None）

3、基于QParallelAnimationGroup给星星添加特效

class StarAnimation(QParallelAnimationGroup):def __init__(self, item, duration):super(StarAnimation, self).__init__()self.item = itemself.duration = durationself.anim = Noneself.finished.connect(self.onFinished)def createAnimations(self):graphicsEffect = self.item.graphicsEffect()if not graphicsEffect:self.item.createGraphicsEffect()graphicsEffect = self.item.graphicsEffect()qba = QByteArray()qba.append("color")anim = QPropertyAnimation(graphicsEffect, qba)anim.setDuration(self.duration * 1000)anim.setStartValue(QColor(0xff, 0x00, 0x00, 0xff))anim.setEndValue(QColor(0x00, 0x00, 0x00, 0xff))self.addAnimation(anim)def start(self, policy=QAbstractAnimation.KeepWhenStopped):self.createAnimations()super(StarAnimation, self).start(policy)def onFinished(self):if self.item:self.item.addAnimation()

要了解两个东西，一个是该动作组的基类QParallelAnimationGroup，另一个是控制属性变化的类QPropertyAnimation

QParallelAnimationGroup： 提供了一个动画组，用于存放动画，并且这些动画是同时播放的，其中几个关键的方法：

①addAnimation(QAbstractAnimation *animation)：将动画添加到动画组内

②start(QAbstractAnimation::DeletionPolicy policy = KeepWhenStopped)：开始动画

③stop()：结束动画，其中结束之后会回调 finished()

QPropertyAnimation： 动画的本质就是逐帧变化，我们要提供动画特效产生的是哪几个属性，下面讲一下几个注意的点和几个封装好的关键函数：

①QPropertyAnimation(QObject *target, const QByteArray &propertyName, QObject *parent = nullptr)，初始化函数，注意两个点：

1、传入的第一个参数的基类必须是QObject，我们这里使用QGraphicsDropShadowEffect对象基类就是QObject，QGraphicsDropShadowEffect文档

2、传入的第二个参数是QByteArray 对象，并且这个 propertyName必须是要存在于target里面 的，因此我们需要对第二个参数进行一个转化！如下

qba = QByteArray()qba.append("color")

如果传入的propertyName不存在于target是会报错的哦！

②setDuration(int msecs)：属性变化的持续时间（单位是毫秒哦！）

③setStartValue(const QVariant &value)：设置初始值（你的这个属性变化的初始状态）

④setEndValue(const QVariant &value)：设置终值（属性的结束值）

最后补充一点

在一个 QParallelAnimationGroup 是可以插入多个动画的，因此我们可以创建多个QPropertyAnimation，例如下面：

 def createAnimations(self):graphicsEffect = self.item.graphicsEffect()if not graphicsEffect:self.item.createGraphicsEffect()graphicsEffect = self.item.graphicsEffect()qba = QByteArray()qba.append("color")anim = QPropertyAnimation(graphicsEffect, qba)anim.setDuration(self.duration * 1000)anim.setStartValue(QColor(0xff, 0x00, 0x00, 0xff))anim.setEndValue(QColor(0x00, 0x00, 0x00, 0xff))self.addAnimation(anim)qba = QByteArray()qba.append("blurRadius")anim = QPropertyAnimation(graphicsEffect, qba)anim.setDuration(self.duration * 1000)anim.setStartValue(50)anim.setEndValue(500)self.addAnimation(anim)

可以观察到下面gif 不仅仅有颜色上的闪烁，还有光圈的缩放

最后附上一张早期QQ网图哈哈哈哈哈哈