qt-C++笔记之动画框架(Qt Animation Framework)入门

qt-C++笔记之动画框架(Qt Animation Framework)入门

code review!

在 Linux 平台上，使用 C++ 和 Qt 框架实现动画是一个非常好的选择。Qt 提供了强大的动画框架（Qt Animation Framework），使得动画的实现变得简单高效。下面将介绍 Qt 动画的基本概念与入门使用，并进一步探讨 QTimeLine、QEasingCurve 的用法，以及 Qt 动画框架中几个重要的类之间的区别。

1. Qt 动画框架简介

1.1 核心类

1.1.1 QPropertyAnimation

• 用于对对象属性（如位置、大小、透明度等）进行动画处理，直接操作 QObject 的特定属性。

1.1.2 QSequentialAnimationGroup

• 用于按顺序播放多个动画。

1.1.3 QParallelAnimationGroup

• 用于并行播放多个动画。

1.1.4 QGraphicsItemAnimation

• 用于对 QGraphicsItem（图形场景中的对象）进行动画处理。
• 通常与 QTimeLine 搭配使用。

1.1.5 QAnimationDriver

• 自定义动画的驱动类，用于更底层地控制动画刷新。

1.2 动画作用域

1.2.1 UI 部件动画

• 对 GUI 组件（如按钮、窗口等）进行动画处理（位置、大小、透明度等）。

1.2.2 场景动画

• 对 QGraphicsView 场景中的对象进行动画处理，适合做复杂的 2D 场景交互或游戏等。

1.2.3 自定义动画

• 如果需要更复杂的动画效果，可以自定义动画逻辑或插值方式。

2. 简单动画示例

2.1 示例 1：移动一个按钮

下面的示例展示了如何使用 QPropertyAnimation 将一个按钮从左上角平滑移动到右下角，并添加弹跳效果：

#include <QApplication>
#include <QPushButton>
#include <QPropertyAnimation>
#include <QEasingCurve>int main(int argc, char *argv[]) {QApplication app(argc, argv);// 创建一个按钮QPushButton button("Move Me");button.resize(100, 50);button.show();// 创建一个属性动画QPropertyAnimation *animation = new QPropertyAnimation(&button, "geometry");// 设置动画时长 2 秒animation->setDuration(2000);// 动画的起始位置animation->setStartValue(QRect(0, 0, 100, 50));// 动画的结束位置animation->setEndValue(QRect(300, 300, 100, 50));// 设置动画曲线（弹跳效果）animation->setEasingCurve(QEasingCurve::OutBounce);// 开始动画animation->start();return app.exec();
}

运行

2.1.1 代码说明

1. QPropertyAnimation animation(&button, "geometry")

   • 指定了对按钮的 geometry 属性进行动画，geometry 决定了部件的在屏幕上的位置和大小。

2. setStartValue 与 setEndValue

   • 分别设定了动画的初始位置和结束位置。

3. setEasingCurve(QEasingCurve::OutBounce)

   • 设置了弹跳缓动曲线，动画结束时会呈现弹跳的效果。

3. 组合动画

有时我们需要在一个动画之后紧接着播放另一个动画，或者同时播放多个动画，这可以使用 QSequentialAnimationGroup 和 QParallelAnimationGroup 来实现。

3.1 示例 2：顺序执行多个动画

#include <QApplication>
#include <QPushButton>
#include <QPropertyAnimation>
#include <QSequentialAnimationGroup>int main(int argc, char *argv[]) {QApplication app(argc, argv);QPushButton button("Animate Me");button.resize(100, 50);button.show();// 创建两个属性动画QPropertyAnimation *animation1 = new QPropertyAnimation(&button, "geometry");animation1->setDuration(1000);animation1->setStartValue(QRect(0, 0, 100, 50));animation1->setEndValue(QRect(300, 0, 100, 50));QPropertyAnimation *animation2 = new QPropertyAnimation(&button, "geometry");animation2->setDuration(1000);animation2->setStartValue(QRect(300, 0, 100, 50));animation2->setEndValue(QRect(300, 300, 100, 50));// 创建一个顺序动画组QSequentialAnimationGroup group;group.addAnimation(animation1);group.addAnimation(animation2);// 开始动画group.start();return app.exec();
}

运行

3.2 示例 3：并行执行多个动画

#include <QApplication>
#include <QPushButton>
#include <QLabel>
#include <QPropertyAnimation>
#include <QParallelAnimationGroup>int main(int argc, char *argv[]) {QApplication app(argc, argv);QPushButton button("Button");QLabel label("Label");button.resize(100, 50);label.resize(100, 50);button.show();label.show();// 创建属性动画QPropertyAnimation *buttonAnimation = new QPropertyAnimation(&button, "geometry");buttonAnimation->setDuration(2000);buttonAnimation->setStartValue(QRect(0, 0, 100, 50));buttonAnimation->setEndValue(QRect(300, 300, 100, 50));QPropertyAnimation *labelAnimation = new QPropertyAnimation(&label, "geometry");labelAnimation->setDuration(2000);labelAnimation->setStartValue(QRect(0, 300, 100, 50));labelAnimation->setEndValue(QRect(300, 0, 100, 50));// 创建一个并行动画组QParallelAnimationGroup group;group.addAnimation(buttonAnimation);group.addAnimation(labelAnimation);// 开始动画group.start();return app.exec();
}

运行

4. 自定义动画曲线

Qt 提供了多种内置的动画曲线，比如线性、弹跳、缓动等。如果默认曲线无法满足需求，还可以使用 QEasingCurve 自定义动画曲线。

4.1 常用曲线类型

• QEasingCurve::Linear：线性插值
• QEasingCurve::InQuad：缓入二次方
• QEasingCurve::OutBounce：弹跳效果

4.2 自定义动画曲线示例

QEasingCurve customCurve([](qreal t) -> qreal {// 这里使用简单的二次函数曲线 y = t^2return t * t;
});
animation->setEasingCurve(customCurve);

5. 在 QGraphicsView 中实现动画

如果使用 QGraphicsView 和 QGraphicsItem，可以通过 QGraphicsItemAnimation + QTimeLine 进行更灵活的动画控制。以下示例演示了如何为图形项做一个旋转动画：

#include <QApplication>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QGraphicsRectItem>
#include <QTimeLine>
#include <QGraphicsItemAnimation>int main(int argc, char *argv[]) {QApplication app(argc, argv);QGraphicsView view;QGraphicsScene scene;view.setScene(&scene);QGraphicsRectItem *rect = scene.addRect(0, 0, 100, 100);QTimeLine *timer = new QTimeLine(2000);timer->setFrameRange(0, 100);QGraphicsItemAnimation *animation = new QGraphicsItemAnimation;animation->setItem(rect);animation->setTimeLine(timer);for (int i = 0; i <= 100; ++i) {// 让矩形在 2 秒内旋转 360 度animation->setRotationAt(i / 100.0, i * 3.6);}timer->start();view.show();return app.exec();
}

实际运行程序

#include <QApplication>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QGraphicsRectItem>
#include <QTimeLine>
#include <QGraphicsItemAnimation>int main(int argc, char *argv[]) {QApplication app(argc, argv);// 创建视图和场景QGraphicsView view;view.move(100, 100); // 屏幕左上角 (100, 100)QGraphicsScene scene;view.setScene(&scene);view.setFixedSize(300, 300); // 窗口大小view.setWindowTitle("Animation Demo"); // 窗口标题// 设置场景范围scene.setSceneRect(0, 0, 300, 300);// 添加矩形QGraphicsRectItem *rect = scene.addRect(0, 0, 100, 100);rect->setPos(100, 100); // 矩形的初始位置// 创建时间线和动画QTimeLine *timer = new QTimeLine(2000);timer->setFrameRange(0, 100);QGraphicsItemAnimation *animation = new QGraphicsItemAnimation;animation->setItem(rect);animation->setTimeLine(timer);for (int i = 0; i <= 100; ++i) {// 让矩形在 2 秒内旋转 360 度animation->setRotationAt(i / 100.0, i * 3.6);}// 启动动画并显示视图timer->start();view.show();return app.exec();
}

运行

6. 总结

Qt 提供了非常强大的动画框架，适用于各种场景，包括简单的 UI 动画、复杂的场景动画，以及自定义动画效果。建议先从 QPropertyAnimation 入门，熟悉后再学习 QSequentialAnimationGroup 与 QParallelAnimationGroup 的组合用法，以及在 QGraphicsView 场景中使用 QGraphicsItemAnimation。如果需要更现代化、更丰富的动画效果，还可以进一步探索 QML 动画与 C++ 的结合。

7. QTimeLine 是什么

QTimeLine 是 Qt 提供的一个时间驱动类，主要用于控制动画的时间轴。它可以生成一个时间流，用来精确地管理动画的时长、帧数、循环次数以及动画曲线等。

7.1 核心功能

• 控制动画的时间流（定时触发事件或更新插值）
• 配合 QGraphicsItemAnimation 使用
• 自定义动画的加速、减速或循环模式

7.2 关键属性和方法

属性/方法	描述
setDuration(int ms)	设置动画总时长（毫秒）。
setFrameRange(int start, int end)	设置帧范围。
setCurveShape(QTimeLine::CurveShape)	设置动画曲线（如线性、缓入、缓出等）。
start()	开始动画。
stop()	停止动画。
valueForTime(int ms)	根据当前时间计算动画进度值（通常在 [0.0, 1.0]）。
setUpdateInterval(int ms)	设置更新间隔（毫秒）。
setLoopCount(int loops)	设置动画循环次数（0 表示无限循环）。
state()	获取当前动画状态（Running、Paused、Stopped 等）。

7.3 常见动画曲线（CurveShape）

曲线类型	描述
LinearCurve	线性变化，恒定速度
EaseInCurve	缓入曲线，开始时慢，后期加速
EaseOutCurve	缓出曲线，开始时快，后期减速
EaseInOutCurve	缓入缓出曲线，开始结束时都较慢
SineCurve	正弦曲线，平滑的缓入缓出变化
CosineCurve	余弦曲线，与正弦曲线类似

7.4 QTimeLine 的信号

信号	描述
frameChanged(int frame)	当前帧改变时触发
valueChanged(qreal value)	当前进度值改变时触发（范围 [0.0, 1.0]）
stateChanged(State newState)	动画状态改变时触发
finished()	动画结束时触发

7.5 简单用法示例

以下例子演示用 QTimeLine 在 2 秒内把按钮从 x=0 移到 x=300：

#include <QApplication>
#include <QPushButton>
#include <QTimeLine>int main(int argc, char *argv[]) {QApplication app(argc, argv);QPushButton button("Move Me");button.resize(100, 50);button.show();QTimeLine timeline(2000); // 动画时长 2 秒timeline.setFrameRange(0, 300); // 帧范围timeline.setCurveShape(QTimeLine::EaseInOutCurve);QObject::connect(&timeline, &QTimeLine::frameChanged, [&button](int frame) {button.move(frame, 100);});timeline.start();return app.exec();
}

运行

7.6 进阶用法：配合 QGraphicsItemAnimation

#include <QApplication>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QGraphicsRectItem>
#include <QTimeLine>
#include <QGraphicsItemAnimation>int main(int argc, char *argv[]) {QApplication app(argc, argv);QGraphicsScene scene;QGraphicsView view(&scene);QGraphicsRectItem *rect = scene.addRect(0, 0, 100, 100);QTimeLine *timeline = new QTimeLine(2000);timeline->setFrameRange(0, 100);QGraphicsItemAnimation *animation = new QGraphicsItemAnimation;animation->setItem(rect);animation->setTimeLine(timeline);for (int i = 0; i <= 100; ++i) {animation->setRotationAt(i / 100.0, i * 3.6);}view.show();timeline->start();return app.exec();
}

7.7 优缺点与结论

• 优点

  • 提供完整的时间管理（时长、帧数、循环等）
  • 可与 QGraphicsItemAnimation 配合，实现更精细的动画控制

• 缺点

  • 对于现代的 Qt 属性动画或 QML 动画而言，QTimeLine 可能显得繁琐
  • 需要手动管理插值或场景更新

• 结论

  • QTimeLine 在需要精准控制帧数或需要自定义时间逻辑的场景下依旧实用

8. QTimeLine 和 QEasingCurve 的区别

这两个类在 Qt 动画框架中分别承担不同的职责，可以相互配合使用，但并不互斥。

8.1 一、核心区别

特性	QTimeLine	QEasingCurve
定义	时间轴类，用于生成动画的时间流	数学曲线类，用于定义动画的缓动插值
作用	控制动画的进度（时长、帧数、循环）	改变动画速度/插值模式（线性、弹跳、缓动等）
输出	当前时间或帧信息	根据输入进度返回相应缓动后的数值
使用场景	精准时间/帧控制	定义动画的加速、减速、弹跳等视觉效果

8.2 二、QTimeLine 详解

• 提供动画的整体时间控制
• 可以设置时长、帧范围、循环次数、曲线形状
• 常用于 QGraphicsItemAnimation 等需要时间驱动的场合

8.3 三、QEasingCurve 详解

• 定义动画的插值方式（线性、缓入缓出、弹跳等）
• 不独立控制时间，而是根据 [0.0, 1.0] 的输入值，返回不同的插值结果
• 通常与 QPropertyAnimation 或 QTimeLine 配合使用

8.4 四、两者关系与配合

• QTimeLine 生成一个随时间变化的进度值 t，范围在 [0.0, 1.0]
• QEasingCurve 根据进度值 t 计算出缓动后的插值值
• 典型用法：easedValue = curve.valueForProgress(t)

8.5 五、总结对比

• QTimeLine：管理时间进度与帧信息，提供事件驱动
• QEasingCurve：管理插值模式，使动画效果更平滑或更富表现力

它们可以结合使用，也可分别使用在不同的动画需求场景下。

9. QAbstractAnimation、QVariantAnimation 和 QPropertyAnimation 的区别

在 Qt 动画框架中，这三个类具有从抽象到具体的继承关系，主要差异在于能否直接使用以及应用场景是否针对特定属性。

9.1 一、继承关系

QAbstractAnimation└── QVariantAnimation└── QPropertyAnimation

9.2 二、核心区别

特性	QAbstractAnimation	QVariantAnimation	QPropertyAnimation
定义	动画框架的抽象基类	生成数值插值的动画类，继承自 QAbstractAnimation	继承自 QVariantAnimation，用于动画化 QObject 的属性
作用	定义动画的基本接口和生命周期	在动画过程中生成从起始到结束的插值数值	直接将插值结果应用到属性（如 geometry、pos 等）
是否可直接使用	否，需要子类实现	是，可直接插值	是，可直接操作属性
使用场景	自定义动画逻辑（需要自己实现插值或刷新）	需要插值数值并在动画中使用	需要直接为对象属性创建动画（UI 控件、图形项等）

9.3 三、详细分析

9.3.1.QAbstractAnimation 示例：自定义动画基类

QAbstractAnimation 是一个抽象基类，提供了基本的动画框架。通过继承它，我们可以实现自定义的动画。以下是一个简单的示例程序，创建了一个自定义动画类，使一个数字从 0 变化到 100，并在每次更新时打印值。

#include <QCoreApplication>
#include <QAbstractAnimation>
#include <QTimer>
#include <QDebug>class CustomAnimation : public QAbstractAnimation {Q_OBJECTpublic:CustomAnimation(QObject *parent = nullptr) : QAbstractAnimation(parent), m_value(0) {}int duration() const override {return 5000; // 动画持续时间为 5 秒}protected:// 更新动画进度void updateCurrentTime(int currentTime) override {m_value = (100 * currentTime) / duration(); // 根据当前时间计算值qDebug() << "Current value:" << m_value;}private:int m_value; // 当前值
};int main(int argc, char *argv[]) {QCoreApplication app(argc, argv);CustomAnimation animation;animation.start();QTimer::singleShot(6000, &app, &QCoreApplication::quit); // 6秒后退出程序return app.exec();
}#include "main.moc"

运行

特点：

• 用途：QAbstractAnimation 是所有动画类的基类，可以通过继承它来实现完全自定义的动画逻辑。
• 灵活性：需要手动实现 updateCurrentTime() 和指定动画持续时间。
• 适用场景：当现有的 QVariantAnimation 或 QPropertyAnimation 无法满足需求时使用。

9.3.2.QVariantAnimation 示例：插值动画

QVariantAnimation 可以在两种值之间进行插值计算（支持整数、浮点数、颜色等），并在每次值更新时发出信号。以下是一个示例程序，通过插值计算让颜色从红色渐变到蓝色。

#include <QApplication>
#include <QVariantAnimation>
#include <QDebug>int main(int argc, char *argv[]) {QApplication app(argc, argv);QVariantAnimation animation;animation.setDuration(3000); // 动画持续时间为 3 秒animation.setStartValue(QColor(Qt::red)); // 起始值：红色animation.setEndValue(QColor(Qt::blue)); // 结束值：蓝色QObject::connect(&animation, &QVariantAnimation::valueChanged, [](const QVariant &value) {QColor color = value.value<QColor>();qDebug() << "Current color:" << color;});animation.start();QTimer::singleShot(4000, &app, &QCoreApplication::quit); // 4秒后退出程序return app.exec();
}

运行

特点：

• 用途：QVariantAnimation 是一个通用的插值动画类，支持多种类型（如整数、浮点数、颜色等）的值变化。
• 插值计算：根据动画进度自动计算中间值，并通过 valueChanged() 信号发出。
• 适用场景：需要在两个值之间平滑过渡时使用，例如颜色渐变、大小调整等。

9.3.3.QPropertyAnimation 示例：操作对象的属性动画

QPropertyAnimation 是一个常用的动画类，用于对 QObject 的属性（如位置、大小、颜色等）进行动画处理。以下是一个示例程序，通过动画让一个矩形从左移到右。

#include <QApplication>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QGraphicsRectItem>
#include <QPropertyAnimation>int main(int argc, char *argv[]) {QApplication app(argc, argv);// 创建场景和矩形QGraphicsScene scene;QGraphicsRectItem *rect = scene.addRect(0, 0, 50, 50, Qt::NoPen, Qt::blue);rect->setPos(0, 0);QGraphicsView view(&scene);view.setFixedSize(400, 200);view.show();// 创建属性动画QPropertyAnimation animation(rect, "pos"); // 动画作用于矩形的 "pos" 属性animation.setDuration(2000); // 动画持续时间为 2 秒animation.setStartValue(QPointF(0, 0)); // 起始位置animation.setEndValue(QPointF(300, 0)); // 结束位置animation.setEasingCurve(QEasingCurve::InOutQuad); // 平滑效果animation.start();return app.exec();
}

运行

特点：

• 用途：QPropertyAnimation 是专门设计用于操作 QObject 的属性的动画类。
• 自动绑定属性：通过指定属性名称（如 "pos"、"size" 等），直接修改对象的属性值。
• 适用场景：对象的移动、缩放、透明度变化等动画效果。

9.3.4.区别总结

动画类	主要特点	适用场景
QAbstractAnimation	抽象基类，允许完全自定义动画逻辑	特殊需求，现有动画类无法满足时使用
QVariantAnimation	通用插值动画类，支持多种类型（如整数、浮点数、颜色等）的值变化，提供 valueChanged 信号	数值渐变（如颜色渐变、大小调整等）
QPropertyAnimation	操作 QObject 的属性动画，直接绑定属性名称（如 "pos"、"size"），支持平滑插值和缓动曲线	对象的移动、缩放、透明度变化等动画效果

9.4 四、对比总结

• QAbstractAnimation：框架层面的基类，提供动画生命周期管理
• QVariantAnimation：可插值任何数值，适合自定义数值动画
• QPropertyAnimation：最常用，直接作用于对象属性，易于上手

根据需求选择合适的类：若只是要动画化控件的属性，用 QPropertyAnimation；若需要自定义插值逻辑，可用 QVariantAnimation；若需要从更底层控制动画流程，可以继承 QAbstractAnimation。

通过上述内容，应该对 Qt 动画的整体框架和常用类有了比较系统的认识。可以先从最简单的 QPropertyAnimation 入手，为按钮或窗口做移动、大小、透明度的动画，再逐步尝试组合动画（顺序或并行），最后再根据需要，学习并使用 QTimeLine、QEasingCurve 等更高级或更灵活的功能。