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

文章目录


前言

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

下面项目是并行动画组的效果展示:
项目效果


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

一、动画框架的介绍

动画框架:其目的是提供一种简单的方法来创建平滑的、具有动画效果的 GUI界面。该框架是通过控制 Qt的属性来实现动画的,它可以应用在窗口部件和其他 QObject对象上,也可以应用在图形视图框架中
属性动画:QPropertyAnimation类可以对Qt属性进行插值,可以使用函数setStartValue()和setEndValue()设置属性开始和结束的值,还可以调用setKeyValueAt()函数在动画中间为属性设置值
缓和曲线:可以使用setEasingCurve()函数设置部件运动的缓和曲线,QEasingCurve类中提供了四十多种缓和曲线,详细可以查看该类的帮助文档
动画组:在一个应用中经常会包含多个动画,例如要同时移动多个图形项或者让它们一个接一个的串行移动。使用QAnimationGroup类可以实现复杂的动画,它的两个子类QSequentialAnimationGroupQParallelAnimationGroup分别提供了串行动画组和并行动画组

二、示例完整代码

1.MyAnimation.pro

c 复制代码
QT += widgets

SOURCES += \
    main.cpp \

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

2.main.cpp

c 复制代码
#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
}

三、QtCreator官方示例

在QtCreator下的官方示例下有这个图形视图框架与状态机框架使用动画的示例:Animated Tiles Example

总结

本文中的示例是比较简单的,使用并行动画组实现了一个由按钮部件组成的520形状,在组成这个形状的过程中可以看到各按钮部件的缓和曲线是不一样的,文中有对缓和曲线的介绍。另外还可以在图形视图框架下使用动画,可以参考文中提到的QtCreator官方示例。


hello:

共同学习,共同进步,如果还有相关问题,可在评论区留言进行讨论。

学习书籍:【Qt Creator快速入门_霍亚飞编著】

相关推荐
码农客栈3 分钟前
qt QFileInfo详解
qt
长沙红胖子Qt14 分钟前
OpenCV开发笔记(八十二):两图拼接使用渐进色蒙版场景过渡缝隙
qt·opencv·缝隙拼接·渐近过渡·图像蒙版融合
Ayka1 小时前
Linux Qt 6安装Oracle QOCI SQL Driver插件(适用WSL)
linux·sql·qt·oracle·oci
十里春风_jzh1 小时前
浅谈QT中Tab键的切换逻辑
qt
番茄灭世神5 小时前
Qt学习笔记第41到50讲
qt·ui·上位机
fengbizhe7 小时前
qt获取本机IP和定位
开发语言·c++·qt·tcp/ip
码农客栈13 小时前
qt QWizard详解
qt
蝶恋舞者1 天前
QT下载安装
开发语言·qt
Ru1yi1 天前
【VS+QT】联合开发踩坑记录
开发语言·c++·ide·qt·visual studio
QGC二次开发1 天前
Qt项目实战:红绿灯小程序
开发语言·c++·qt·小程序·qt项目实战