Qt动画使用教程

学习教程更新于 2026-08-16编辑本文

以下是关于Qt动画的使用教程，结合了多个来源的示例和说明，帮助你快速上手Qt动画系统。

1. Qt动画系统概述

Qt动画系统是Qt框架的一部分，用于创建和管理动画效果。它提供了简单而强大的方式来实现动态图形效果，使用户界面更加生动和交互性强。核心概念包括：

属性动画（Property Animation）：对控件的属性（如位置、大小、颜色等）进行动画处理。
并行动画（Parallel Animation）：允许多个动画同时进行。
顺序动画（Sequential Animation）：按顺序执行一系列动画。
动画组（Animation Group）：将多个动画组合在一起进行管理。
插值函数（Easing Curve）：控制动画过程中属性值的变化速率，如线性、加速、减速等。

2. 基本属性动画示例

以下是一个简单的示例，展示如何使用QPropertyAnimation让一个按钮从屏幕左上角移动到右下角：

#include <QApplication>
#include <QPushButton>
#include <QPropertyAnimation>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // 创建按钮
    QPushButton button("Move Me!");
    button.show();

    // 创建属性动画
    QPropertyAnimation animation(&button, "geometry");
    animation.setDuration(2000); // 持续时间：2秒
    animation.setStartValue(button.geometry()); // 起始位置
    animation.setEndValue(QRect(400, 400, 100, 30)); // 目标位置
    animation.setEasingCurve(QEasingCurve::OutBounce); // 设置弹跳效果

    // 开始动画
    animation.start();

    return app.exec();
}

在这个示例中，QPropertyAnimation对象指定了对按钮的geometry属性进行动画处理，并设置了动画的持续时间、起始值和结束值。

3. 并行动画示例

以下示例展示了如何使用QParallelAnimationGroup同时改变按钮的位置和大小：

#include <QApplication>
#include <QPushButton>
#include <QParallelAnimationGroup>
#include <QPropertyAnimation>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // 创建按钮
    QPushButton button("Animate Me!");
    button.show();

    // 创建位置动画
    QPropertyAnimation *posAnimation = new QPropertyAnimation(&button, "pos");
    posAnimation->setDuration(1000);
    posAnimation->setStartValue(button.pos());
    posAnimation->setEndValue(QPoint(200, 200));

    // 创建大小动画
    QPropertyAnimation *sizeAnimation = new QPropertyAnimation(&button, "geometry");
    sizeAnimation->setDuration(1000);
    sizeAnimation->setStartValue(button.geometry());
    sizeAnimation->setEndValue(QRect(100, 100, 400, 100));

    // 创建并行动画组
    QParallelAnimationGroup *group = new QParallelAnimationGroup;
    group->addAnimation(posAnimation);
    group->addAnimation(sizeAnimation);

    // 开始动画
    group->start();

    return app.exec();
}

在这个示例中，QParallelAnimationGroup将两个动画组合在一起，使它们同时执行。

4. 顺序动画示例

以下示例展示了如何使用QSequentialAnimationGroup按顺序执行动画：

#include <QApplication>
#include <QPushButton>
#include <QSequentialAnimationGroup>
#include <QPropertyAnimation>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // 创建按钮
    QPushButton button("Animate Me!");
    button.show();

    // 创建大小动画
    QPropertyAnimation *sizeAnimation = new QPropertyAnimation(&button, "geometry");
    sizeAnimation->setDuration(1000);
    sizeAnimation->setStartValue(button.geometry());
    sizeAnimation->setEndValue(QRect(100, 100, 400, 100));

    // 创建位置动画
    QPropertyAnimation *posAnimation = new QPropertyAnimation(&button, "pos");
    posAnimation->setDuration(1000);
    posAnimation->setStartValue(button.pos());
    posAnimation->setEndValue(QPoint(200, 200));

    // 创建顺序动画组
    QSequentialAnimationGroup *group = new QSequentialAnimationGroup;
    group->addAnimation(sizeAnimation);
    group->addAnimation(posAnimation);

    // 开始动画
    group->start();

    return app.exec();
}

在这个示例中，QSequentialAnimationGroup确保了先改变按钮的大小，再改变按钮的位置。

5. 插值函数（Easing Curve）

插值函数用于控制动画过程中属性值的变化速率。Qt提供了多种预定义的缓和曲线类型，例如：

QEasingCurve::Linear：线性变化
QEasingCurve::InQuad：二次加速
QEasingCurve::OutBounce：弹跳效果

6. 在`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) {
        animation->setRotationAt(i / 100.0, i * 3.6); // 旋转360度
    }

    timer->start();
    view.show();

    return app.exec();
}

在这个示例中，QGraphicsItemAnimation用于控制图形项的动画，QTimeLine用于定义动画的时间范围。

7. 其他动画效果

Qt动画系统还可以实现以下效果：

淡入淡出效果：通过改变控件的windowOpacity属性实现。
复杂动画组合：通过QSequentialAnimationGroup和QParallelAnimationGroup组合多个动画。

总结

Qt动画系统提供了强大的工具来实现各种动态效果。通过QPropertyAnimation、QParallelAnimationGroup、QSequentialAnimationGroup等类，可以轻松创建平滑的动画效果。结合插值函数和QGraphicsView，可以实现更复杂和灵活的动画。

来源：CSDN 原文，首次发布于 2025-06-13。