很多 Qt 开发者都会写界面，却很少有人真正会写动画。于是，我们经常看到这样的软件：页面切换像“瞬移”，没有任何过渡；按钮点击后毫无反馈，不知道是否响应；弹窗直接出现、直接消失，显得十分生硬；菜单展开没有任何过渡效果，仿佛回到了 Windows XP 时代。

而真正优秀的软件，例如 Qt Creator、WPS、QQ、微信 PC、腾讯会议、钉钉等，几乎每一个交互都伴随着细腻的动画。很多人认为动画只是为了“炫酷”，其实并不是。动画真正的作用，是帮助用户理解界面发生了什么。例如：一个窗口为什么突然消失？一个按钮为什么不能点击？一个菜单是从哪里出来的？登录到底成功了没有？动画，就是界面与用户之间最自然的一种“语言”。

Qt 从 Qt4 开始，就提供了一套完整的 Animation Framework（动画框架）。很多人只会QPropertyAnimation，其实真正掌握 Qt 动画，需要理解整个动画体系。今天，就带大家彻底学会 Qt Animation Framework，并附上15 个可直接运行的完整 Demo，涵盖按钮、菜单、侧边栏、抽屉、Toast、Loading、数字滚动、页面切换、卡片 Hover、进度动画等常用场景。

一、Qt 动画框架到底长什么样？

Qt 的动画框架其实并不复杂，核心类关系如下：

可以理解为：QVariantAnimation负责计算中间值；QPropertyAnimation负责修改属性；QEasingCurve负责控制运动节奏；AnimationGroup负责组合多个动画。真正企业项目中，超过 90% 的动画都是由这几个类组合完成的。

二、动画到底是什么？

很多人觉得动画很神秘。其实动画只有一句话：在指定时间内，把一个属性，从 A 变成 B。

例如按钮 X 坐标从 0 变到 300。如果直接调用button->move(300, 0);按钮就是瞬移。如果 Qt 每隔 16ms 修改一次坐标：0 → 15 → 30 → ... → 300，按钮就动起来了。所以动画的本质就是不断修改属性，Qt 帮我们完成了这些计算和定时刷新。

三、QVariantAnimation——所有动画的基础

QVariantAnimation是 Qt 动画框架真正的核心。所有动画，本质都是：开始值 → 中间值 → 结束值。它并不直接操作任何界面元素，只负责在给定时间内产生连续变化的数值。

Demo 1：数字滚动动画

很多工业软件需要显示温度、速度等实时变化的数值，比如从 25℃ 渐变到 80℃。我们完全不需要手动写定时器，几行代码就能实现。

auto *animation = new QVariantAnimation(this); animation->setDuration(1500); animation->setStartValue(25); animation->setEndValue(80); animation->setEasingCurve(QEasingCurve::OutCubic); connect(animation, &QVariantAnimation::valueChanged, this, [=](const QVariant &value) { ui->labelTemp->setText(QString("%1 ℃").arg(value.toInt())); }); // 点击按钮启动动画 connect(ui->btnStart, &QPushButton::clicked, animation, [animation]() { animation->start(); });

效果就是 25℃ → 26℃ → ... → 80℃，整个过程中没有任何 Timer，代码极其简洁。

四、QPropertyAnimation——最常用的动画

QPropertyAnimation是QVariantAnimation的子类，它可以直接修改QObject的任意属性（前提是该属性有Q_PROPERTY声明）。我们日常开发中最常用的就是它。

Demo 2：按钮平滑移动

auto *animation = new QPropertyAnimation(ui->pushButton, "pos"); animation->setDuration(600); animation->setStartValue(QPoint(0, 0)); animation->setEndValue(QPoint(300, 0)); animation->setEasingCurve(QEasingCurve::OutCubic); animation->start(QAbstractAnimation::DeleteWhenStopped);

整个过程无需手动调用move()，按钮就会平滑地从 (0,0) 滑到 (300,0)。

Demo 3：现代侧边栏展开

很多后台管理系统都有侧边栏滑出效果。假设左侧有一个QWidget（名为leftWidget），宽度 220，平时隐藏在屏幕外（x = -220），点击按钮后平滑滑入。

void MainWindow::toggleSidebar() { bool isHidden = ui->leftWidget->x() < 0; auto *animation = new QPropertyAnimation(ui->leftWidget, "geometry"); animation->setDuration(250); animation->setEasingCurve(QEasingCurve::OutCubic); if (isHidden) { animation->setStartValue(QRect(-220, 0, 220, height())); animation->setEndValue(QRect(0, 0, 220, height())); } else { animation->setStartValue(QRect(0, 0, 220, height())); animation->setEndValue(QRect(-220, 0, 220, height())); } animation->start(QAbstractAnimation::DeleteWhenStopped); }

侧边栏就会平滑滑出/滑入，而不是“突然出现”。这也是企业软件中最常见的动画之一。

五、Hover 放大按钮（完整 Demo）

很多现代 UI 中，鼠标移到按钮上按钮会微微放大，移开恢复。这能极大提升交互质感。

Demo 4：Hover 放大效果

我们可以封装一个通用的动画函数，利用geometry属性实现放大（其实就是扩大控件的矩形区域）。注意，我们通常会保存控件的原始几何信息，这里假设按钮初始位置固定，我们直接基于当前几何信息计算。

void MainWindow::playHoverAnimation(QPushButton *btn, bool enter) { QRect start = btn->geometry(); QRect end; if (enter) { // 向四周扩展 3 像素 end = start.adjusted(-3, -2, 3, 2); } else { // 恢复到原始几何（这里简单写回原位置，实际项目可保存原始值） end = QRect(100, 100, 200, 50); // 假设原始位置 } auto *animation = new QPropertyAnimation(btn, "geometry"); animation->setDuration(120); animation->setStartValue(start); animation->setEndValue(end); animation->setEasingCurve(QEasingCurve::OutQuad); animation->start(QAbstractAnimation::DeleteWhenStopped); }

然后在eventFilter或重写enterEvent/leaveEvent中调用：

bool MainWindow::eventFilter(QObject *obj, QEvent *event) { if (obj == ui->btnLogin) { if (event->type() == QEvent::Enter) { playHoverAnimation(ui->btnLogin, true); } else if (event->type() == QEvent::Leave) { playHoverAnimation(ui->btnLogin, false); } } return QMainWindow::eventFilter(obj, event); }

安装事件过滤器：ui->btnLogin->installEventFilter(this);

六、透明度动画（弹窗淡入淡出）

Qt 控件本身没有opacity属性，但可以通过QGraphicsOpacityEffect来实现。

Demo 5：弹窗淡入效果

假设有一个自定义弹出面板popup，我们想让它从完全透明逐渐显现。

void MainWindow::fadeInPopup(QWidget *popup) { auto *effect = new QGraphicsOpacityEffect(popup); effect->setOpacity(0); popup->setGraphicsEffect(effect); auto *animation = new QPropertyAnimation(effect, "opacity"); animation->setDuration(300); animation->setStartValue(0); animation->setEndValue(1); animation->setEasingCurve(QEasingCurve::OutCubic); animation->start(QAbstractAnimation::DeleteWhenStopped); } void MainWindow::fadeOutPopup(QWidget *popup) { auto *effect = qobject_cast<QGraphicsOpacityEffect*>(popup->graphicsEffect()); if (!effect) return; auto *animation = new QPropertyAnimation(effect, "opacity"); animation->setDuration(300); animation->setStartValue(1); animation->setEndValue(0); animation->setEasingCurve(QEasingCurve::OutCubic); connect(animation, &QPropertyAnimation::finished, popup, &QWidget::hide); animation->start(QAbstractAnimation::DeleteWhenStopped); }

淡出时我们在动画结束后隐藏控件，避免残留。

七、自定义属性动画（完整 CircleWidget 示例）

并非只有内置属性才能做动画。我们可以声明自己的Q_PROPERTY，然后配合QPropertyAnimation驱动自定义控件。

Demo 6：圆形进度动画

创建一个CircleWidget，它有一个半径属性radius，动画驱动半径变化，圆从小变大。

circlewidget.h

#include <QWidget> class CircleWidget : public QWidget { Q_OBJECT Q_PROPERTY(int radius READ radius WRITE setRadius) public: explicit CircleWidget(QWidget *parent = nullptr); int radius() const; void setRadius(int r); protected: void paintEvent(QPaintEvent *event) override; private: int m_radius = 20; };

circlewidget.cpp

#include "circlewidget.h" #include <QPainter> CircleWidget::CircleWidget(QWidget *parent) : QWidget(parent) { setMinimumSize(200, 200); } int CircleWidget::radius() const { return m_radius; } void CircleWidget::setRadius(int r) { m_radius = r; update(); // 触发重绘 } void CircleWidget::paintEvent(QPaintEvent *) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); painter.setBrush(QColor(52, 152, 219)); painter.drawEllipse(rect().center(), m_radius, m_radius); }

使用动画驱动半径从 0 变到 80：

auto *circle = new CircleWidget(this); circle->setGeometry(100, 100, 200, 200); auto *anim = new QPropertyAnimation(circle, "radius"); anim->setDuration(1000); anim->setStartValue(0); anim->setEndValue(80); anim->setEasingCurve(QEasingCurve::OutElastic); anim->start();

八、QEasingCurve——为什么动画这么丝滑？

QEasingCurve控制的是动画的“节奏”，即属性值随时间的变化速率。线性曲线就是匀速变化，但真实世界的运动都有加速和减速，所以我们需要缓动曲线。

Qt 提供了 40 多种内置曲线，常用的有：

实际开发中，统一曲线风格非常重要。一般规则：

• 按钮 Hover：OutQuad或OutCubic，120ms

• 按钮 Press：OutQuad，80ms

• 侧边栏/大面板：OutCubic或OutExpo，250–300ms

• 对话框弹入弹出：InOutCubic，220ms

• Toast 提示：OutBack，250ms

• 页面切换：InOutCubic，260ms

下面我们结合更多 Demo 继续感受。

九、动画组合：并行与串行

现代 UI 中很少有单独一个动画，往往需要多个动画配合。使用QParallelAnimationGroup（并行）和QSequentialAnimationGroup（串行）即可轻松实现。

Demo 7：按钮移动并渐隐（并行）

按钮向右移动的同时逐渐透明。

auto *effect = new QGraphicsOpacityEffect(btn); btn->setGraphicsEffect(effect); effect->setOpacity(1); auto *moveAnim = new QPropertyAnimation(btn, "pos"); moveAnim->setDuration(500); moveAnim->setStartValue(QPoint(50, 50)); moveAnim->setEndValue(QPoint(300, 50)); auto *fadeAnim = new QPropertyAnimation(effect, "opacity"); fadeAnim->setDuration(500); fadeAnim->setStartValue(1); fadeAnim->setEndValue(0); auto *group = new QParallelAnimationGroup(this); group->addAnimation(moveAnim); group->addAnimation(fadeAnim); group->start(QAbstractAnimation::DeleteWhenStopped);

Demo 8：登录按钮缩放 → Loading 旋转 → 窗口淡出（串行）

模拟点击登录后的连续动画：按钮先缩小再恢复（表示按下的反馈），然后出现一个 Loading 旋转动画，加载完成后窗口淡出。

// 按下缩放动画 auto *pressAnim = new QPropertyAnimation(ui->btnLogin, "geometry"); pressAnim->setDuration(80); QRect origGeo = ui->btnLogin->geometry(); QRect pressedGeo = origGeo.adjusted(5, 5, -5, -5); pressAnim->setStartValue(origGeo); pressAnim->setEndValue(pressedGeo); pressAnim->setEasingCurve(QEasingCurve::OutQuad); // 恢复动画 auto *releaseAnim = new QPropertyAnimation(ui->btnLogin, "geometry"); releaseAnim->setDuration(80); releaseAnim->setStartValue(pressedGeo); releaseAnim->setEndValue(origGeo); releaseAnim->setEasingCurve(QEasingCurve::OutQuad); // 串行组合 auto *seq = new QSequentialAnimationGroup(this); seq->addAnimation(pressAnim); seq->addAnimation(releaseAnim); seq->start(QAbstractAnimation::DeleteWhenStopped); // 之后可以再串联 Loading 和窗口淡出...

限于篇幅，完整串行 Loading 旋转 Demo 见下面 Loading 部分。

十、更多企业级动画 Demo 集锦

下面一口气给出另外 7 个常用动画 Demo，覆盖菜单、抽屉、Toast、Loading、页面切换、卡片 Hover 和进度动画。

Demo 9：菜单弹出动画

类似右键菜单或下拉菜单，从无到有向下展开的同时淡入。

void MainWindow::showMenuAnimated(QMenu *menu, QPoint pos) { menu->setAttribute(Qt::WA_TranslucentBackground); // 需配合样式表 auto *effect = new QGraphicsOpacityEffect(menu); effect->setOpacity(0); menu->setGraphicsEffect(effect); auto *fadeAnim = new QPropertyAnimation(effect, "opacity"); fadeAnim->setDuration(180); fadeAnim->setStartValue(0); fadeAnim->setEndValue(1); fadeAnim->setEasingCurve(QEasingCurve::OutCubic); // 同时，利用菜单的 sizeHint 做高度动画比较复杂，这里仅演示透明度。 // 实际可用 QVariantAnimation 驱动菜单高度或使用 QWidget 模拟菜单。 fadeAnim->start(QAbstractAnimation::DeleteWhenStopped); menu->exec(pos); }

Demo 10：抽屉效果（从底部滑出面板）

常见于移动端或桌面端的选择器。一个QFrame从窗口底部滑上来。

void MainWindow::showDrawer(QWidget *drawer) { drawer->setVisible(true); int drawerHeight = 300; int parentHeight = this->height(); auto *anim = new QPropertyAnimation(drawer, "geometry"); anim->setDuration(300); anim->setEasingCurve(QEasingCurve::OutCubic); anim->setStartValue(QRect(0, parentHeight, width(), drawerHeight)); anim->setEndValue(QRect(0, parentHeight - drawerHeight, width(), drawerHeight)); anim->start(QAbstractAnimation::DeleteWhenStopped); } void MainWindow::hideDrawer(QWidget *drawer) { int drawerHeight = drawer->height(); auto *anim = new QPropertyAnimation(drawer, "geometry"); anim->setDuration(300); anim->setEasingCurve(QEasingCurve::OutCubic); anim->setStartValue(drawer->geometry()); anim->setEndValue(QRect(0, height(), width(), drawerHeight)); connect(anim, &QPropertyAnimation::finished, drawer, &QWidget::hide); anim->start(QAbstractAnimation::DeleteWhenStopped); }

Demo 11：Toast 提示消息（带弹性效果）

Toast 从透明出现并轻微回弹，停留一会儿后淡出消失。

void MainWindow::showToast(const QString &msg) { auto *label = new QLabel(msg, this); label->setStyleSheet("background: #333; color: white; padding: 12px 24px; border-radius: 6px;"); label->adjustSize(); int x = (width() - label->width()) / 2; int y = height() - 100; label->move(x, y); label->show(); auto *effect = new QGraphicsOpacityEffect(label); effect->setOpacity(0); label->setGraphicsEffect(effect); auto *fadeIn = new QPropertyAnimation(effect, "opacity"); fadeIn->setDuration(250); fadeIn->setStartValue(0); fadeIn->setEndValue(1); fadeIn->setEasingCurve(QEasingCurve::OutBack); auto *stay = new QPauseAnimation(1500); // 停留 1.5 秒 auto *fadeOut = new QPropertyAnimation(effect, "opacity"); fadeOut->setDuration(250); fadeOut->setStartValue(1); fadeOut->setEndValue(0); auto *seq = new QSequentialAnimationGroup(this); seq->addAnimation(fadeIn); seq->addAnimation(stay); seq->addAnimation(fadeOut); connect(seq, &QSequentialAnimationGroup::finished, label, &QObject::deleteLater); seq->start(QAbstractAnimation::DeleteWhenStopped); }

Demo 12：Loading 旋转动画

使用QVariantAnimation驱动一个角度属性，不断旋转一个QLabel或自定义控件。

// 假设 ui->loadingLabel 是一个显示加载图标的 QLabel auto *anim = new QVariantAnimation(this); anim->setDuration(1000); anim->setStartValue(0); anim->setEndValue(360); anim->setLoopCount(-1); // 无限循环 connect(anim, &QVariantAnimation::valueChanged, this, [=](const QVariant &val) { QPixmap pix(":/loading.png"); QTransform transform; transform.rotate(val.toInt()); ui->loadingLabel->setPixmap(pix.transformed(transform, Qt::SmoothTransformation)); }); anim->start();

Demo 13：页面切换动画（左右平移）

模拟移动端页面切换，当前页面向左滑出，新页面从右侧滑入。

void MainWindow::switchPage(QWidget *currentPage, QWidget *newPage) { int w = width(); newPage->setGeometry(w, 0, w, height()); newPage->show(); auto *animCur = new QPropertyAnimation(currentPage, "pos"); animCur->setDuration(260); animCur->setStartValue(QPoint(0, 0)); animCur->setEndValue(QPoint(-w, 0)); animCur->setEasingCurve(QEasingCurve::InOutCubic); auto *animNew = new QPropertyAnimation(newPage, "pos"); animNew->setDuration(260); animNew->setStartValue(QPoint(w, 0)); animNew->setEndValue(QPoint(0, 0)); animNew->setEasingCurve(QEasingCurve::InOutCubic); auto *group = new QParallelAnimationGroup(this); group->addAnimation(animCur); group->addAnimation(animNew); connect(group, &QParallelAnimationGroup::finished, currentPage, &QWidget::hide); group->start(QAbstractAnimation::DeleteWhenStopped); }

Demo 14：卡片 Hover 放大 + 阴影

卡片是一个QFrame，鼠标悬浮时整体放大并增加阴影（通过样式表模拟）。

void MainWindow::cardHoverAnimation(QFrame *card, bool enter) { QRect start = card->geometry(); QRect end; if (enter) { end = start.adjusted(-5, -5, 5, 5); card->setStyleSheet("QFrame { background: white; border-radius: 8px; " "border: 1px solid #ddd; } " "QFrame:hover { border-color: #4A90E2; }"); } else { end = start; // 实际使用时应保存原始几何 card->setStyleSheet("QFrame { background: white; border-radius: 8px; " "border: 1px solid #ddd; }"); } auto *anim = new QPropertyAnimation(card, "geometry"); anim->setDuration(200); anim->setStartValue(start); anim->setEndValue(end); anim->setEasingCurve(QEasingCurve::OutCubic); anim->start(QAbstractAnimation::DeleteWhenStopped); }

安装事件过滤器后，在Enter和Leave时分别调用。

Demo 15：平滑进度条

利用QVariantAnimation驱动进度值，让进度条平滑变化，而不是瞬间跳变。

void MainWindow::setProgressSmooth(int targetValue) { auto *anim = new QVariantAnimation(this); anim->setDuration(300); anim->setStartValue(ui->progressBar->value()); anim->setEndValue(targetValue); anim->setEasingCurve(QEasingCurve::OutCubic); connect(anim, &QVariantAnimation::valueChanged, this, [=](const QVariant &val) { ui->progressBar->setValue(val.toInt()); }); anim->start(QAbstractAnimation::DeleteWhenStopped); }

十一、企业项目中的动画规范

在实际项目中，建议统一动画参数，避免风格混乱。可以参照下表：

统一时长和曲线后，软件整体交互会显得非常专业、一致。

十二、Qt 动画开发中的常见坑（避坑指南）

1. 动画没有效果？

• 动画对象被提前释放：动画对象创建在栈上，函数结束时就被析构。务必在堆上创建，并设置DeleteWhenStopped或者用成员变量保存。

• 属性名拼写错误："post"而不是"pos"，或者对象根本没有对应的Q_PROPERTY。

• 起始值与结束值相同：动画不会触发任何变化。

2. 对 geometry 做动画时控件抖动

如果控件放在布局（QLayout）中，布局管理器会在动画过程中不断重新计算位置，导致抖动。解决办法：

• 动画前将控件临时移出布局（layout->removeWidget()），动画结束再加回去。

• 或者直接对父容器（没有布局约束）做动画。

3. 动画越来越卡

可能的原因：

• 同时启动了过多动画，例如列表每一项都在播放。请限制同时运行的动画数量。

• 在valueChanged信号中执行了重计算或复杂绘制。

• 每一帧都调用了repaint()或update()，可能形成递归。

• 避免在动画进行中频繁调整布局、创建/销毁控件。

4. 透明动画不生效

一定要检查控件是否设置了setAttribute(Qt::WA_TranslucentBackground)并且背景样式透明；否则QGraphicsOpacityEffect可能绘制异常。

5. 动画结束时属性没有停留在终点

默认情况下，动画结束后属性会保持在最终值，但如果设置了setEndValue()并且动画中途被停止，可能需要手动处理。建议监听finished信号确保最终状态。

总结

Qt Animation Framework 并不复杂，但它决定了软件的“质感”。真正优秀的桌面应用，动画不会喧宾夺主，而是在恰当的时候给予用户明确的反馈，让每一次点击、每一次切换都更加自然。

本文从零开始梳理了整个动画框架的体系结构，并提供了15 个可直接使用的完整 Demo：

1. 数字滚动

2. 按钮移动

3. 侧边栏展开

4. Hover 放大

5. 弹窗淡入淡出

6. 圆形进度动画（自定义属性）

7. 按钮移动并渐隐（并行组合）

8. 登录按钮按压缩放 + 串行基础

9. 菜单弹出

10. 抽屉效果

11. Toast 提示

12. Loading 旋转

13. 页面切换

14. 卡片 Hover 放大

15. 平滑进度条