PyQt学习系列03-动画与过渡效果

PyQt学习系列笔记（Python Qt框架）

第三课：PyQt的动画与过渡效果

---

一、动画与过渡效果概述

1.1 动画与过渡的区别

• 动画（Animation）：用于描述对象属性随时间变化的过程（如位置、颜色、大小）。
  示例：按钮从屏幕外滑入屏幕内。
• 过渡（Transition）：用于描述界面状态变化的视觉效果（如窗口切换、元素显示/隐藏）。
  示例：窗口从透明变为不透明的淡入效果。

核心区别：
动画关注属性值的变化过程，而过渡关注界面状态的切换效果。两者在PyQt中通过QPropertyAnimation和QTransition等类实现。

---

二、PyQt动画框架的核心组件

2.1 QPropertyAnimation

QPropertyAnimation是PyQt动画框架的核心类，用于对对象的属性进行插值动画。
关键方法：

• setTargetObject(obj)：设置目标对象。
• setPropertyName(b"property")：设置要动画化的属性。
• setStartValue(value)：设置起始值。
• setEndValue(value)：设置结束值。
• setDuration(msecs)：设置动画持续时间（毫秒）。
• setEasingCurve(type)：设置缓动曲线（如线性、加速、减速）。

示例：按钮从左侧滑入屏幕

from PyQt5.QtCore import QPropertyAnimation, QEasingCurve
from PyQt5.QtWidgets import QApplication, QPushButtonapp = QApplication([])
button = QPushButton("Click Me")
button.show()animation = QPropertyAnimation(button, b"pos")
animation.setStartValue(QPoint(-100, 100))
animation.setEndValue(QPoint(100, 100))
animation.setDuration(1000)
animation.setEasingCurve(QEasingCurve.InOutQuad)
animation.start()

---

2.2 缓动曲线（QEasingCurve）

QEasingCurve定义动画的插值速度变化规则，控制动画的“节奏感”。
常用类型：

• Linear：匀速。
• InQuad：加速。
• OutQuad：减速。
• InOutQuad：先加速后减速。
• OutBounce：弹跳结束。
• InElastic：弹性开始。

示例：弹跳结束的动画

animation.setEasingCurve(QEasingCurve.OutBounce)

---

三、动画组（Animation Groups）

3.1 QSequentialAnimationGroup

按顺序执行多个动画。
使用步骤：

1. 创建动画组实例。
2. 添加多个动画。
3. 调用start()启动。

示例：按钮先缩放再平移

from PyQt5.QtCore import QSequentialAnimationGroup, QPropertyAnimation# 创建缩放动画
scale_animation = QPropertyAnimation(button, b"scale")
scale_animation.setStartValue(1.0)
scale_animation.setEndValue(1.5)
scale_animation.setDuration(500)# 创建平移动画
move_animation = QPropertyAnimation(button, b"pos")
move_animation.setStartValue(QPoint(100, 100))
move_animation.setEndValue(QPoint(200, 100))
move_animation.setDuration(500)# 创建动画组
group = QSequentialAnimationGroup()
group.addAnimation(scale_animation)
group.addAnimation(move_animation)
group.start()

---

3.2 QParallelAnimationGroup

并行执行多个动画。
示例：同时改变按钮的位置和颜色

from PyQt5.QtCore import QParallelAnimationGroup
from PyQt5.QtGui import QColor# 位置动画
pos_animation = QPropertyAnimation(button, b"pos")
pos_animation.setStartValue(QPoint(100, 100))
pos_animation.setEndValue(QPoint(200, 100))
pos_animation.setDuration(1000)# 颜色动画
color_animation = QPropertyAnimation(button, b"color")
color_animation.setStartValue(QColor("red"))
color_animation.setEndValue(QColor("blue"))
color_animation.setDuration(1000)# 并行动画组
group = QParallelAnimationGroup()
group.addAnimation(pos_animation)
group.addAnimation(color_animation)
group.start()

---

四、自定义属性动画

4.1 定义自定义属性

通过pyqtProperty装饰器定义可动画化的属性。
示例：定义渐变进度属性

from PyQt5.QtCore import pyqtProperty, QObject, QVariantAnimationclass GradientWidget(QWidget):def __init__(self):super().__init__()self._gradient_stop = 0.0@pyqtProperty(float)def gradient_stop(self):return self._gradient_stop@gradient_stop.setterdef gradient_stop(self, value):self._gradient_stop = valueself.update()# 创建动画
animation = QVariantAnimation()
animation.setDuration(2000)
animation.setStartValue(0.0)
animation.setEndValue(1.0)
animation.valueChanged.connect(lambda v: widget.gradient_stop = v)
animation.start()

---

五、过渡效果的实现

5.1 窗口切换过渡

通过QStackedWidget和动画结合实现窗口切换的过渡效果。
示例：淡入淡出切换

from PyQt5.QtWidgets import QStackedWidget, QWidget, QLabelstacked = QStackedWidget()
page1 = QLabel("Page 1")
page2 = QLabel("Page 2")
stacked.addWidget(page1)
stacked.addWidget(page2)# 淡入动画
def fade_transition(old_page, new_page):old_page.setVisible(True)new_page.setVisible(True)animation = QPropertyAnimation(old_page, b"opacity")animation.setDuration(500)animation.setStartValue(1.0)animation.setEndValue(0.0)animation.start()animation.finished.connect(lambda: stacked.setCurrentIndex(stacked.currentIndex() + 1))

---

5.2 元素显示/隐藏过渡

通过QPropertyAnimation控制元素的透明度或大小变化。
示例：按钮淡出隐藏

def hide_animation(widget):animation = QPropertyAnimation(widget, b"opacity")animation.setDuration(500)animation.setStartValue(1.0)animation.setEndValue(0.0)animation.finished.connect(widget.hide)animation.start()

---

六、动画的高级功能

6.1 动画循环与方向

• setLoopCount(n)：设置循环次数（-1表示无限循环）。
• setDirection(QAbstractAnimation.Forward/Backward)：设置动画方向。

示例：无限循环缩放动画

animation.setLoopCount(-1)
animation.start()

---

6.2 动画信号与槽

通过信号监听动画状态变化。
示例：动画结束时打印日志

animation.finished.connect(lambda: print("Animation finished!"))

---

七、常见问题与解决方案

7.1 动画卡顿

原因：动画持续时间过短或帧率不足。
解决方法：

1. 调整setDuration增加持续时间。
2. 使用QTimer控制帧更新频率。

---

7.2 动画未生效

原因：目标属性未正确设置或对象未启用动画支持。
解决方法：

1. 确保属性名称与Q_PROPERTY定义一致。
2. 检查目标对象是否为QObject派生类。

---

八、总结与下一步

本节课重点讲解了PyQt的动画与过渡效果，包括：

1. QPropertyAnimation：实现属性值的动态变化。
2. 缓动曲线：控制动画的节奏感。
3. 动画组：串行和并行执行多个动画。
4. 自定义属性：扩展动画的适用范围。
5. 过渡效果：实现窗口切换和元素显示/隐藏的视觉效果。

下节课预告：
第四课将深入讲解PyQt的多线程与异步编程，包括QThread、QThreadPool、asyncio的集成，以及如何避免主线程阻塞。请持续关注后续内容！

---

参考资料：

1. PyQt官方文档 - Animation Framework
2. Qt官方教程 - Animation Framework
3. CSDN PyQt5动画教程