手机开发网站教程,石家庄做网站的,外贸企业邮箱哪个好用,网站模板文件怎么下载qt-C笔记之动画框架(Qt Animation Framework)入门
code review! 在 Linux 平台上#xff0c;使用 C 和 Qt 框架实现动画是一个非常好的选择。Qt 提供了强大的动画框架#xff08;Qt Animation Framework#xff09;#xff0c;使得动画的实现变得简单高效。下面将介绍 Qt …qt-C笔记之动画框架(Qt Animation Framework)入门
code review! 在 Linux 平台上使用 C 和 Qt 框架实现动画是一个非常好的选择。Qt 提供了强大的动画框架Qt Animation Framework使得动画的实现变得简单高效。下面将介绍 Qt 动画的基本概念与入门使用并进一步探讨 QTimeLine、QEasingCurve 的用法以及 Qt 动画框架中几个重要的类之间的区别。 文章目录 qt-C笔记之动画框架(Qt Animation Framework)入门1. Qt 动画框架简介1.1 核心类1.1.1 QPropertyAnimation1.1.2 QSequentialAnimationGroup1.1.3 QParallelAnimationGroup1.1.4 QGraphicsItemAnimation1.1.5 QAnimationDriver 1.2 动画作用域1.2.1 UI 部件动画1.2.2 场景动画1.2.3 自定义动画 2. 简单动画示例2.1 示例 1移动一个按钮2.1.1 代码说明 3. 组合动画3.1 示例 2顺序执行多个动画3.2 示例 3并行执行多个动画 4. 自定义动画曲线4.1 常用曲线类型4.2 自定义动画曲线示例 5. 在 QGraphicsView 中实现动画6. 总结7. QTimeLine 是什么7.1 核心功能7.2 关键属性和方法7.3 常见动画曲线CurveShape7.4 QTimeLine 的信号7.5 简单用法示例7.6 进阶用法配合 QGraphicsItemAnimation7.7 优缺点与结论 8. QTimeLine 和 QEasingCurve 的区别8.1 一、核心区别8.2 二、QTimeLine 详解8.3 三、QEasingCurve 详解8.4 四、两者关系与配合8.5 五、总结对比 9. QAbstractAnimation、QVariantAnimation 和 QPropertyAnimation 的区别9.1 一、继承关系9.2 二、核心区别9.3 三、详细分析9.3.1.QAbstractAnimation 示例自定义动画基类9.3.2.QVariantAnimation 示例插值动画9.3.3.QPropertyAnimation 示例操作对象的属性动画9.3.4.区别总结 9.4 四、对比总结 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 QEasingCurveint 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 代码说明 QPropertyAnimation animation(button, geometry) 指定了对按钮的 geometry 属性进行动画geometry 决定了部件的在屏幕上的位置和大小。 setStartValue 与 setEndValue 分别设定了动画的初始位置和结束位置。 setEasingCurve(QEasingCurve::OutBounce) 设置了弹跳缓动曲线动画结束时会呈现弹跳的效果。
3. 组合动画
有时我们需要在一个动画之后紧接着播放另一个动画或者同时播放多个动画这可以使用 QSequentialAnimationGroup 和 QParallelAnimationGroup 来实现。
3.1 示例 2顺序执行多个动画
#include QApplication
#include QPushButton
#include QPropertyAnimation
#include QSequentialAnimationGroupint 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 QParallelAnimationGroupint 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 QGraphicsItemAnimationint 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 QGraphicsItemAnimationint 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 秒内把按钮从 x0 移到 x300
#include QApplication
#include QPushButton
#include QTimeLineint 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 QGraphicsItemAnimationint 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 一、核心区别
特性QTimeLineQEasingCurve定义时间轴类用于生成动画的时间流数学曲线类用于定义动画的缓动插值作用控制动画的进度时长、帧数、循环改变动画速度/插值模式线性、弹跳、缓动等输出当前时间或帧信息根据输入进度返回相应缓动后的数值使用场景精准时间/帧控制定义动画的加速、减速、弹跳等视觉效果
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└── QPropertyAnimation9.2 二、核心区别
特性QAbstractAnimationQVariantAnimationQPropertyAnimation定义动画框架的抽象基类生成数值插值的动画类继承自 QAbstractAnimation继承自 QVariantAnimation用于动画化 QObject 的属性作用定义动画的基本接口和生命周期在动画过程中生成从起始到结束的插值数值直接将插值结果应用到属性如 geometry、pos 等是否可直接使用否需要子类实现是可直接插值是可直接操作属性使用场景自定义动画逻辑需要自己实现插值或刷新需要插值数值并在动画中使用需要直接为对象属性创建动画UI 控件、图形项等
9.3 三、详细分析
9.3.1.QAbstractAnimation 示例自定义动画基类
QAbstractAnimation 是一个抽象基类提供了基本的动画框架。通过继承它我们可以实现自定义的动画。以下是一个简单的示例程序创建了一个自定义动画类使一个数字从 0 变化到 100并在每次更新时打印值。
#include QCoreApplication
#include QAbstractAnimation
#include QTimer
#include QDebugclass 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 QDebugint 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.valueQColor();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 QPropertyAnimationint 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 等更高级或更灵活的功能。
