QPropertyAnimation 动画类入门与实践指南

QPropertyAnimation 是 Qt 开源框架中用于向 QObject 对象添加属性动画的强大工具。它允许开发者通过简单的代码实现丰富的界面动画效果。本文将详细介绍 QPropertyAnimation 的使用方法，并通过多个实例展示其应用场景。

1. QAbstractAnimation：动画的基类

QPropertyAnimation 的根基是 QAbstractAnimation 类，这是一个抽象基类，提供了动画的基本操作功能，如播放、暂停、停止、设置持续时间、循环次数等。所有动画类都必须继承自 QAbstractAnimation。

常用成员函数：
- currentTime(): 获取当前动画的播放时间。
- setLoopCount(int loopCount): 设置动画的循环次数，-1表示无限循环。
- setDirection(Direction direction): 设置动画播放方向，可选 Forward（正序）或 Backward（倒序）。

常用信号函数：
- currentLoopChanged(int currentLoop): 动画进入新循环时触发。
- finished(): 动画完成时触发。
- stateChanged(QAbstractAnimation::State newState, QAbstractAnimation::State oldState): 动画状态变化时触发。

2. QPropertyAnimation：属性动画的核心

QPropertyAnimation 是 QAbstractAnimation 的子类，专门用于为 QObject 实体添加属性动画。它支持多种属性类型，如 geometry（几何形状）、opacity（透明度）、color（颜色）等。

常用函数：
- setStartValue(QVariant value): 设置动画的起始值。
- setEndValue(QVariant value): 设置动画的结束值。
- setDuration(int msecs): 设置动画的持续时间（单位：毫秒）。
- setEasingCurve(QEasingCurve easing): 设置动画的缓冲曲线，用于平滑动画效果。
- setKeyValueAt(qreal step, QVariant value): 在指定时间步骤设置动画值。

常用信号函数：
- valueChanged(QVariant value): 动画值发生变化时触发。

3. 示例1：界面下降动画实现

效果描述：

界面从顶部中心位置向下滑动至底部，形成一种下降效果。

代码实现：

// 在构造函数中初始化动画void loginwindow::initAnimation() {    // 初始化动画对象    DownAnimation = new QPropertyAnimation(this, "geometry", this);    DownAnimation->setDuration(300); // 设置动画时间    // 获取桌面 widget    QDesktopWidget* desktop = qApp->desktop();    // 设置动画起始位置    DownAnimation->setStartValue(QRect(        (desktop->width() - this->width()) / 2,        (desktop->height() - this->height()) / 2,        this->width(),        0    ));    // 设置动画结束位置    DownAnimation->setEndValue(QRect(        (desktop->width() - this->width()) / 2,        (desktop->height() - this->height()) / 2,        this->width(),        this->height()    ));    // 启动动画    DownAnimation->start();}

说明：

setStartValue 和 setEndValue 方法用于设置动画的起始和结束位置。

start() 方法启动动画。

动画完成后，可以通过 finished() 信号连接后续操作。

4. 示例2：多动画串行运行

通过信号槽机制实现多个动画的串行运行。例如，界面下降完成后，启动 logo 上浮动画。

效果描述：

界面下降动画完成后，隐藏的 logo 图标逐渐向上滑动显现。

代码实现：

// 在构造函数中初始化动画void loginwindow::initAnimation() {    // 设置图标    logo = new QLabel(this);    setIconPix(logo, ":logo", size); // 设置图标    logo->move(this->width()/2 - size.width()/2, 142); // 设置初始位置    logo->hide(); // 隐藏 logo    // 初始化下降动画    DownAnimation = new QPropertyAnimation(this, "geometry", this);    DownAnimation->setDuration(300);    DownAnimation->setStartValue(QRect(        (desktop->width() - this->width())/2,        (desktop->height() - this->height())/2,        this->width(),        0    ));    DownAnimation->setEndValue(QRect(        (desktop->width() - this->width())/2,        (desktop->height() - this->height())/2,        this->width(),        this->height()    ));    DownAnimation->start();    // 初始化上浮动画    LogoAnimation = new QPropertyAnimation(logo, "geometry", this);    LogoAnimation->setDuration(200);    LogoAnimation->setStartValue(QRect(        this->width()/2 - size.width()/2,        142,        size.width(),        size.height()    ));    LogoAnimation->setEndValue(QRect(        this->width()/2 - size.width()/2,        107,        size.width(),        size.height()    ));    LogoAnimation->start();    // 连接动画完成信号    connect(DownAnimation, SIGNAL(finished()), this, SLOT(DownAnimationOnfinish()));}// 动画完成槽函数void loginwindow::DownAnimationOnfinish() {    logo->show();    LogoAnimation->start();}

说明：

connect 函数用于连接信号和槽。

DownAnimationOnfinish 槽函数负责启动上浮动画并显示 logo。

5. 示例3：界面关闭时的居中关闭动画

效果描述：

界面从当前位置缓慢居中关闭，逐渐缩小并移出视野。

代码实现：

// 初始化动画void loginwindow::initAnimation() {    // ... 其他动画初始化代码 ...    // 初始化关闭动画    CloseAnimation = new QPropertyAnimation(this, "geometry", this);    CloseAnimation->setDuration(150);    // 连接关闭按钮信号    connect(ui->title_close, SIGNAL(clicked()), this, SLOT(CloseAnimationOnStart()));    // 动画完成后关闭界面    connect(CloseAnimation, SIGNAL(finished()), this, SLOT(close()));}// 开始关闭动画void loginwindow::CloseAnimationOnStart() {    // 设置动画起始值为当前布局    CloseAnimation->setStartValue(QRect(this->geometry()));    // 设置动画结束值为居中关闭的位置    CloseAnimation->setEndValue(QRect(        this->x(),        this->y() + this->height()/4 - 2,        this->width(),        4    ));    CloseAnimation->start();}

说明：

setStartValue 和 setEndValue 设置动画的起始和结束位置。

CloseAnimationOnStart 槽函数初始化动画，并设置动画的起始和结束位置。

动画完成后，close() 方法用于关闭界面。

6. QParallelAnimationGroup：并行动画组

QParallelAnimationGroup 类用于管理多个 QPropertyAnimation 动画，实现它们的并行运行。通过将多个动画添加到 QParallelAnimationGroup 中，可以同时启动并运行多个动画。

示例：多动画并行运行

// 初始化并行动画组void loginwindow::initAnimation() {    // 图标下浮动画    LogoDownAnimation = new QPropertyAnimation(logo, "geometry", this);    LogoDownAnimation->setDuration(200);    LogoDownAnimation->setStartValue(QRect(        this->width()/2 - size.width()/2,        107,        size.width(),        size.height()    ));    LogoDownAnimation->setEndValue(QRect(        this->width()/2 - size.width()/2,        160,        size.width(),        size.height()    ));    // 窗口下浮动画    LogoInDownAnimation = new QPropertyAnimation(ui->stackedWidget, "geometry", this);    LogoInDownAnimation->setDuration(400);    LogoInDownAnimation->setStartValue(QRect(0, ui->widget_title->height(), width(), height()));    LogoInDownAnimation->setKeyValueAt(0.6, QRect(0, window()->height(), width(), height()));    LogoInDownAnimation->setEndValue(QRect(0, size.height()/2 + 140, width(), height()));    // 创建并行动画组    LoginGroup = new QParallelAnimationGroup;    LoginGroup->addAnimation(LogoDownAnimation);    LoginGroup->addAnimation(LogoInDownAnimation);    // 启动动画组    connect(ui->login, SIGNAL(clicked()), LoginGroup, SLOT(start()));    connect(ui->cancelLogin, SIGNAL(clicked()), LoginGroup, SLOT(start()));    // 动画完成后切换界面    connect(LoginGroup, SIGNAL(finished()), this, SLOT(goCheckorLoginFinished()));}

说明：

QParallelAnimationGroup 提供了 addAnimation 方法，将多个动画添加到组中。

start() 方法启动组内所有动画的同时运行。

finished() 信号在所有动画完成后触发，用于切换界面或执行其他操作。

7. 其他常见用法

1. 自定义属性动画

// 示例：设置 XY 坐标QPropertyAnimation *anima1 = new QPropertyAnimation(m_topWidget, "pos", this);anima1->setDuration(500);anima1->setStartValue(QPoint(0, 0));anima1->setEndValue(QPoint(0, 100));// 示例：设置透明度QPropertyAnimation *anima2 = new QPropertyAnimation(m_grayWidget, "opacity", this);anima2->setDuration(500);anima2->setStartValue(1);anima2->setEndValue(0);// 示例：设置滑动条位置QPropertyAnimation *anima3 = new QPropertyAnimation(tableView->verticalScrollBar(), "value", this);anima3->setDuration(500);anima3->setEasingCurve(QEasingCurve::OutCubic);anima3->setEndValue(100);

2. 动画组合使用

通过将多个动画组合使用，可以创建复杂的动画效果。例如，先上浮后旋转。

// 动画组合示例QPropertyAnimation *rotateAnimation = new QPropertyAnimation(ui->widget, "rotation", this);rotateAnimation->setDuration(300);rotateAnimation->setStartValue(0);rotateAnimation->setEndValue(90);// 创建并行动画组AnimationGroup = new QParallelAnimationGroup;AnimationGroup->addAnimation(LogoUpAnimation);AnimationGroup->addAnimation(rotateAnimation);// 启动动画组AnimationGroup->start();