当前位置：首页 > news >正文

PySide(PyQt)的QPropertyAnimation（属性动画）的应用实践

news 来源：原创 2024/9/20 22:44:16

关于QPropertyAnimation的基础知识见PySide(PyQt)的QPropertyAnimation（属性动画）-CSDN博客

原理和语句都很简单。然而在实践使用中，还是踩了坑，耗了一下午的时间才解决。

看代码：

from PyQt5.QtCore import QPropertyAnimation, QSize, QEasingCurve
from PyQt5.QtWidgets import QApplication, QVBoxLayout, QWidget, QLabelapp = QApplication([])# 创建一个窗口
window = QWidget()
window.setGeometry(100, 100, 800, 300)
layout = QVBoxLayout(window)# 创建一个标签
label = QLabel("Animate Me")
label.setStyleSheet('border:2px solid #b6b6b6;background-color:#e0e0e0;')
label.setFixedHeight(40)  # 固定按钮的高度
layout.addWidget(label)# 创建 QPropertyAnimation 对象
animation = QPropertyAnimation(label, b"size")# 设置动画的起始值和结束值
start_size = label.size()
end_size = QSize(300, label.height())  # 目标宽度为300，高度保持不变
animation.setStartValue(start_size)
animation.setEndValue(end_size)# 设置动画持续时间（2000 毫秒即 2 秒）
animation.setDuration(2000)# 设置缓动曲线为线性
animation.setEasingCurve(QEasingCurve.Linear)# 启动动画
animation.start()window.show()
app.exec_()

这个代码的运行是没有任何问题的。将其稍加修改：

from PyQt5.QtCore import QPropertyAnimation, QSize, QEasingCurve
from PyQt5.QtWidgets import QApplication, QVBoxLayout, QWidget, QLabelapp = QApplication([])# 创建一个窗口
window = QWidget()
window.setGeometry(100, 100, 800, 300)
layout = QVBoxLayout(window)# 创建一个标签
label = QLabel("Animate Me")
label.setStyleSheet('border:2px solid #b6b6b6;background-color:#e0e0e0;')
label.setFixedHeight(40)  # 固定按钮的高度
layout.addWidget(label)def animate():# 创建 QPropertyAnimation 对象animation = QPropertyAnimation(label, b"size")# 设置动画的起始值和结束值start_size = label.size()end_size = QSize(300, label.height())  # 目标宽度为300，高度保持不变animation.setStartValue(start_size)animation.setEndValue(end_size)# 设置动画持续时间（2000 毫秒即 2 秒）animation.setDuration(2000)# 设置缓动曲线为线性animation.setEasingCurve(QEasingCurve.Linear)# 启动动画animation.start()animate()
window.show()
app.exec_()

新的代码中，将动画部分的定义和设置、运行定义为一个函数animate()，并在主循环中运行。从逻辑和语法上看没有任何问题，但是，运行的结果，并没有执行预期的动画。

究其原因，新的代码中，QPropertyAnimation 对象animation，它是函数animate()的一个局部变量，当函数animate()执行完毕后，并没有将该变量传递到主线程，所以造成运行异常。解决方法是将QPropertyAnimation 对象定义为一个全局变量，即可保证在局部函数运行后，QPropertyAnimation 对象仍然持续运行。修改后的代码：

from PyQt5.QtCore import QPropertyAnimation, QSize, QEasingCurve
from PyQt5.QtWidgets import QApplication, QVBoxLayout, QWidget, QLabelapp = QApplication([])# 创建一个窗口
window = QWidget()
window.setGeometry(100, 100, 800, 300)
layout = QVBoxLayout(window)# 创建一个标签
label = QLabel("Animate Me")
label.setStyleSheet('border:2px solid #b6b6b6;background-color:#e0e0e0;')
label.setFixedHeight(40)  # 固定按钮的高度
layout.addWidget(label)# 创建全局变量的QPropertyAnimation 对象
animation = QPropertyAnimation(label, b"size")def animate():# 创建 QPropertyAnimation 对象# animation = QPropertyAnimation(label, b"size")# 设置动画的起始值和结束值start_size = label.size()end_size = QSize(300, label.height())  # 目标宽度为300，高度保持不变animation.setStartValue(start_size)animation.setEndValue(end_size)# 设置动画持续时间（2000 毫秒即 2 秒）animation.setDuration(2000)# 设置缓动曲线为线性animation.setEasingCurve(QEasingCurve.Linear)# 启动动画animation.start()animate()
window.show()
app.exec_()

或者：

from PyQt5.QtCore import QPropertyAnimation, QSize, QEasingCurve, QObject
from PyQt5.QtWidgets import QApplication, QVBoxLayout, QWidget, QLabelapp = QApplication([])# 项目的定义
class UI(QObject):  # 将项目定义为QObject，用来管理项目级别的信号和变量def __init__(self):super().__init__()# 窗口的定义
class Window(QWidget):def __init__(self, parent=None):super().__init__(parent)self.setupUI()def setupUI(self):self.setGeometry(100, 100, 800, 300)self.layout = QVBoxLayout(self)# 创建一个标签self.label = QLabel("Animate Me")self.label.setStyleSheet('border:2px solid #b6b6b6;background-color:#e0e0e0;')self.label.setFixedHeight(40)  # 固定按钮的高度self.layout.addWidget(self.label)# UI类的实体化
ui = UI()
# 窗口的实体化
window = Window()# 创建全局变量的QPropertyAnimation 对象
ui.animation = QPropertyAnimation(window.label, b"size")def animate(obj):# 创建 QPropertyAnimation 对象# animation = QPropertyAnimation(label, b"size")# 设置动画的起始值和结束值start_size = obj.size()end_size = QSize(300, obj.height())  # 目标宽度为300，高度保持不变ui.animation.setStartValue(start_size)ui.animation.setEndValue(end_size)# 设置动画持续时间（2000 毫秒即 2 秒）ui.animation.setDuration(2000)# 设置缓动曲线为线性ui.animation.setEasingCurve(QEasingCurve.Linear)# 启动动画ui.animation.start()animate(window.label)
window.show()
app.exec_()

这个代码中，定义了一个UI(QObject)的类，将其作为项目级别的信号和变量的容器。以“ui.”开头的变量都是项目级别的、跨画面的，其生命周期属于主线程。

进一步的应用demo，见PySide(PyQt)使用QPropertyAnimation制作动态界面-CSDN博客