Qt下使用动画框架实现动画520

news2024/11/29 10:45:52

文章目录

前言
一、动画框架的介绍
二、示例完整代码
三、QtCreator官方示例
总结

前言

文章中引用的内容均来自这本书中的原文：【Qt Creator快速入门_霍亚飞编著】。可以通过更改本文示例pro文件中的条件编译，运行示例1和示例2来查看串行动画组和并行动画组的区别，希望可以帮助到大家，如有错误之处，欢迎大家批评指正。

下面项目是并行动画组的效果展示：
项目效果
请添加图片描述

提示：以下是本篇文章正文内容，下面案例可供参考

一、动画框架的介绍

动画框架：其目的是提供一种简单的方法来创建平滑的、具有动画效果的 GUI界面。该框架是通过控制 Qt的属性来实现动画的，它可以应用在窗口部件和其他 QObject对象上，也可以应用在图形视图框架中

属性动画：QPropertyAnimation类可以对Qt属性进行插值，可以使用函数setStartValue()和setEndValue()设置属性开始和结束的值，还可以调用setKeyValueAt()函数在动画中间为属性设置值

缓和曲线：可以使用setEasingCurve()函数设置部件运动的缓和曲线，QEasingCurve类中提供了四十多种缓和曲线，详细可以查看该类的帮助文档

动画组：在一个应用中经常会包含多个动画，例如要同时移动多个图形项或者让它们一个接一个的串行移动。使用QAnimationGroup类可以实现复杂的动画，它的两个子类QSequentialAnimationGroup和QParallelAnimationGroup分别提供了串行动画组和并行动画组

二、示例完整代码

1.MyAnimation.pro

QT += widgets

SOURCES += \
    main.cpp \

#条件编译
#DEFINES += EXAMPLE_1
DEFINES += EXAMPLE_2

2.main.cpp

#include <QApplication>
#include <QWidget>
#include <QPushButton>
#include <QPropertyAnimation>
#include <QSequentialAnimationGroup>
#include <QParallelAnimationGroup>
#include <QTimer>
#include <QDebug>

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

#if EXAMPLE_1
//*****************串行动画组******************
    //新建QWidget类对象
    QWidget *widget = new QWidget();
    widget->setWindowTitle("串行动画");
    widget->setFixedSize(540,320);

    //创建一个按钮
    QPushButton *pb = new QPushButton(widget);

    //为按钮的geometry属性创建动画1
    QPropertyAnimation *animation1 = new QPropertyAnimation(pb,"geometry");
    animation1->setDuration(3000);   //设置动画持续时间,单位ms
    animation1->setStartValue(QRect(0,0,0,0));   //设置属性开始和结束的值
    animation1->setEndValue(QRect(200,150,120,30));
    //animation1->setKeyValueAt(0,QRect(0,0,0,0));   //在动画中间为属性设置值
    //animation1->setKeyValueAt(0.5,QRect(0,0,120,30));
    //animation1->setKeyValueAt(1,QRect(200,150,120,30));
    animation1->setEasingCurve(QEasingCurve::OutBounce);   //使用缓和曲线,这里实现弹跳效果

    //创建动画2
    QPropertyAnimation *animation2 = new QPropertyAnimation(pb,"geometry");
    animation2->setDuration(2000);   //设置动画持续时间,单位ms
    animation2->setStartValue(QRect(200,150,120,30));   //设置属性开始和结束的值
    animation2->setEndValue(QRect(150,120,240,60));
    animation2->setEasingCurve(QEasingCurve::OutBounce);

    //开始串行动画组
    QSequentialAnimationGroup group;
    group.addAnimation(animation1);
    group.addAnimation(animation2);
    group.start();

    //显示界面
    widget->show();

    return app.exec();
#endif

#if EXAMPLE_2
//*****************并行动画组******************
    //新建QWidget类对象
    QWidget *widget = new QWidget();
    widget->setWindowTitle("动画520");
    widget->setFixedSize(540,320);

    //创建动画按钮容器
    QList<QPushButton*> pbList;
    for(int i=0;i<16;i++)
    {
        QPushButton *pb = new QPushButton(widget);
        pbList.append(pb);
    }

    //创建动画开始时的坐标容器
    QList<QRect> startList;
    startList.append(QRect(70,0,0,0));   //组成数字5
    startList.append(QRect(0,50,0,0));
    startList.append(QRect(70,0,0,0));
    startList.append(QRect(0,140,0,0));
    startList.append(QRect(70,0,0,0));
    startList.append(QRect(210,0,0,0));   //组成数字2
    startList.append(QRect(0,50,0,0));
    startList.append(QRect(210,0,0,0));
    startList.append(QRect(0,140,0,0));
    startList.append(QRect(210,320,0,0));
    startList.append(QRect(350,0,0,0));   //组成数字0
    startList.append(QRect(350,320,0,0));
    startList.append(QRect(540,50,0,0));
    startList.append(QRect(540,140,0,0));
    startList.append(QRect(540,50,0,0));
    startList.append(QRect(540,140,0,0));

    //创建动画结束时的坐标容器
    QList<QRect> endList;
    endList.append(QRect(70,50,120,30));   //组成数字5
    endList.append(QRect(70,50,30,120));
    endList.append(QRect(70,140,120,30));
    endList.append(QRect(160,140,30,120));
    endList.append(QRect(70,230,120,30));
    endList.append(QRect(210,50,120,30));   //组成数字2
    endList.append(QRect(300,50,30,120));
    endList.append(QRect(210,140,120,30));
    endList.append(QRect(210,140,30,120));
    endList.append(QRect(210,230,120,30));
    endList.append(QRect(350,50,120,30));   //组成数字0
    endList.append(QRect(350,230,120,30));
    endList.append(QRect(440,50,30,120));
    endList.append(QRect(440,140,30,120));
    endList.append(QRect(350,50,30,120));
    endList.append(QRect(350,140,30,120));

    //创建动画的缓动曲线容器
    QList<QEasingCurve> typeList;
    typeList.append(QEasingCurve::Linear);
    typeList.append(QEasingCurve::InQuad);
    typeList.append(QEasingCurve::OutBounce);
    typeList.append(QEasingCurve::OutInQuad);
    typeList.append(QEasingCurve::InBounce);
    typeList.append(QEasingCurve::InOutQuart);
    typeList.append(QEasingCurve::InOutExpo);
    typeList.append(QEasingCurve::OutInExpo);
    typeList.append(QEasingCurve::InCirc);
    typeList.append(QEasingCurve::OutCirc);
    typeList.append(QEasingCurve::InOutElastic);
    typeList.append(QEasingCurve::OutInElastic);
    typeList.append(QEasingCurve::InOutBack);
    typeList.append(QEasingCurve::OutInBack);
    typeList.append(QEasingCurve::InOutBounce);
    typeList.append(QEasingCurve::OutInBounce);

    //设置各按钮的动画
    QParallelAnimationGroup group;
    for(int i=0;i<16;i++)
    {
        QPropertyAnimation *animation = new QPropertyAnimation(pbList[i],"geometry");
        animation->setDuration(5000);
        animation->setStartValue(startList[i]);
        animation->setEndValue(endList[i]);
        animation->setEasingCurve(typeList[i]);
        group.addAnimation(animation);
    }

    //开始并行动画组
    group.start();

    //显示界面
    widget->show();

    return app.exec();
#endif
}