Qt QWidget实现简约美观的加载动画

最新推荐文章于 2024-07-15 14:44:54 发布
最新推荐文章于 2024-07-15 14:44:54 发布
阅读量786 收藏 10
点赞数 10
文章标签： qt 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shensheng100221/article/details/136220343
版权
这篇文章详细介绍了如何使用C++编写并实现六个简单的加载动画，包括SpotsCircle、SpotsShrinkCircle、StickCircle、TubeCircle、TextCircle和TubeBallCircle，这些动画仅需三个文件即可编译运行。
摘要由CSDN通过智能技术生成

😃 给大家分享6个简约的加载动画,这是第一季,后续陆续上架 😃
这是最终效果
在这里插入图片描述
一共只有三个文件,可以直接编译运行

//main.cpp
#include "LoadingAnimWidget.h"
#include <QApplication>
#include <QVBoxLayout>
#include <QPushButton>
#include <QGridLayout>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QWidget w;
    w.setWindowTitle("加载动画 第一季");
    QGridLayout * mainLayout = new QGridLayout;

    SpotsCircle * anim1 = new SpotsCircle;
    mainLayout->addWidget(anim1,0,0);

    SpotsShrinkCircle * anim2 = new SpotsShrinkCircle;
    mainLayout->addWidget(anim2,0,1);

    auto* anim3 = new TextCircle("Loading...");
    mainLayout->addWidget(anim3,1,0);

    auto* anim4 = new StickCircle();
    mainLayout->addWidget(anim4,1,1);

    TubeCircle * anim5 = new TubeCircle;
    mainLayout->addWidget(anim5,0,2);

    TubeBallCircle * anim6 = new TubeBallCircle;
    mainLayout->addWidget(anim6,1,2);

    QPushButton * btn = new QPushButton("start");
    mainLayout->addWidget(btn,2,1);
    w.setLayout(mainLayout);
    QObject::connect(btn,&QPushButton::clicked,anim1,&SpotsCircle::exec);
    QObject::connect(btn,&QPushButton::clicked,anim2,&SpotsShrinkCircle::exec);
    QObject::connect(btn,&QPushButton::clicked,anim3,&TextCircle::exec);
    QObject::connect(btn,&QPushButton::clicked,anim4,&StickCircle::exec);
    QObject::connect(btn,&QPushButton::clicked,anim5,&TubeCircle::exec);
    QObject::connect(btn,&QPushButton::clicked,anim6,&TubeBallCircle::exec);
    QObject::connect(btn,&QPushButton::clicked,btn,[=](){
        if(btn->text() == "start") btn->setText("stop");
        else btn->setText("start");
    });
    w.show();
    return a.exec();
}


//LoadingAnimWidget.h
#ifndef LOADINGANIMWIDGET_H
#define LOADINGANIMWIDGET_H
#include <QPropertyAnimation>
#include <QWidget>
class LoadingAnimBase:public QWidget
{
    Q_OBJECT
public:
    LoadingAnimBase(QWidget* parent=nullptr);
    virtual ~LoadingAnimBase();
public slots:

    virtual void exec();
    virtual void start();
    virtual void stop();
protected:
    QPropertyAnimation mAnim;
};

class SpotsShrinkCircle:public LoadingAnimBase{//32个球均匀分布在四周,绕着中心转圈,球越来越小
    Q_OBJECT
    Q_PROPERTY(qreal angle READ angle WRITE setAngle)
public:
    explicit SpotsShrinkCircle(QWidget * parent = nullptr);
    qreal angle()const;
    void setAngle(qreal an);
protected:
    void paintEvent(QPaintEvent *event);
signals:

public slots:
private:
    qreal mAngle;
};

class SpotsCircle : public LoadingAnimBase//8个紧挨着的球绕着中心转圈,每个球大小一样
{
    Q_OBJECT
    Q_PROPERTY(qreal angle READ angle WRITE setAngle)
public:
    explicit SpotsCircle(QWidget *parent = nullptr);

    qreal angle()const;
    void setAngle(qreal an);
protected:
    void paintEvent(QPaintEvent *event);

public slots:
private:
    qreal mAngle;
};
class StickCircle:public LoadingAnimBase//12根小棒分布周围,三根小棒是深色的,其他都是淡色的,深色小棒循环占取淡色小棒的位置
{
    Q_OBJECT
    Q_PROPERTY(qreal angle READ angle WRITE setAngle)
public:
    explicit StickCircle(QWidget* parent = nullptr);
    qreal angle()const;
    void setAngle(qreal an);
    void setShrinkStick(bool shrink);
protected:
    void paintEvent(QPaintEvent *event);

public slots:
private:
    qreal mAngle;
    bool mShrink;
};
class TubeCircle:public LoadingAnimBase //一根管子绕着中心旋转
{
    Q_OBJECT
    Q_PROPERTY(qreal angle READ angle WRITE setAngle)
public:
    explicit TubeCircle(QWidget* parent = nullptr);
    qreal angle()const;
    void setAngle(qreal an);
protected:
    void paintEvent(QPaintEvent *event);

public slots:
private:
    qreal mAngle;
};
class TextCircle:public LoadingAnimBase{ //一串文本绕着中心旋转
    Q_OBJECT
    Q_PROPERTY(qreal angle READ angle WRITE setAngle)
public:
    explicit TextCircle(const QString & txt = "Loading...",QWidget* parent = nullptr);
    qreal angle()const;
    void setAngle(qreal an);
protected:
    void paintEvent(QPaintEvent* event);
private:
    QString mText;
    qreal mAngle;
};

class TubeBallCircle:public LoadingAnimBase //一根封闭的管子,中间有个小球沿着管子滚动
{
    Q_OBJECT
    Q_PROPERTY(qreal angle READ angle WRITE setAngle)
public:
    explicit TubeBallCircle(QWidget* parent = nullptr);
    qreal angle()const;
    void setAngle(qreal an);
protected:
    void paintEvent(QPaintEvent *event);

public slots:
private:
    qreal mAngle;
};


#endif // LOADINGANIMWIDGET_H


//LoadingAnimWidget.cpp
#include "LoadingAnimWidget.h"
#include <QDebug>
#include <QPaintEvent>
#include <QPainter>
LoadingAnimBase::LoadingAnimBase(QWidget* parent):QWidget(parent){}
LoadingAnimBase::~LoadingAnimBase(){}
void LoadingAnimBase::exec(){
    if(mAnim.state() == QAbstractAnimation::Stopped){
        start();
    }
    else{
        stop();
    }
}
void LoadingAnimBase::start(){
    mAnim.setStartValue(0);
    mAnim.setEndValue(360);
    mAnim.start();
}
void LoadingAnimBase::stop(){
    mAnim.stop();
}
SpotsCircle::SpotsCircle(QWidget *parent) : LoadingAnimBase(parent)
{
    mAnim.setPropertyName("angle");
    mAnim.setTargetObject(this);
    mAnim.setDuration(2000);
    mAnim.setLoopCount(-1);//run forever
    mAnim.setEasingCurve(QEasingCurve::Linear);
    resize(200,200);
    setFixedSize(200,200);
    mAngle = 0;
}
void SpotsCircle::paintEvent(QPaintEvent *event){
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing);
    int x = width();
    int y = height();

    painter.setPen(Qt::NoPen);
    painter.translate(x/2,y/2);
    QColor color = QColor("black");
    qreal alpha = color.alphaF();
    painter.rotate(mAngle);
    for(int i = 0;i<16;++i){//16个小球
        qreal rw = 1.0/8*x;
        qreal r = rw/2;
        painter.setBrush(QBrush(color));
        alpha *= 0.8;
        color.setAlphaF(alpha);
        painter.drawEllipse(0,x/2-rw,r,r);
        auto transform = painter.transform();
        transform.rotate(-2);
        painter.setTransform(transform);
    }
}
qreal SpotsCircle::angle()const{
    return mAngle;
}
void SpotsCircle::setAngle(qreal an){
    mAngle = an;
    update();
}

SpotsShrinkCircle::SpotsShrinkCircle(QWidget *parent) : LoadingAnimBase(parent)
{
    mAnim.setPropertyName("angle");
    mAnim.setTargetObject(this);
    mAnim.setDuration(3000);
    mAnim.setLoopCount(-1);//run forever
    mAnim.setEasingCurve(QEasingCurve::Linear);
    resize(200,200);
    setFixedSize(200,200);
    mAngle = 0;
}
void SpotsShrinkCircle::paintEvent(QPaintEvent *event){
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing);
    int x = width();
    int y = height();
    qreal ang = mAngle;

    painter.setPen(Qt::NoPen);
    painter.translate(x/2,y/2);
    QColor color = QColor("black");
    qreal alpha = color.alphaF();
    painter.rotate(ang);
    qreal rw = 1.0/7*x;
    qreal r = rw/2;
    for(int i = 0;i<12;++i){
        painter.setBrush(QBrush(color));
        alpha *= 0.9;
        color.setAlphaF(alpha);
        painter.drawEllipse(0,x/2-rw,r,r);
        r *= 0.95;
        auto transform = painter.transform();
        transform.rotate(-360/18);
        painter.setTransform(transform);
    }
}
qreal SpotsShrinkCircle::angle()const{
    return mAngle;
}
void SpotsShrinkCircle::setAngle(qreal an){
    mAngle = an;
    update();
}

void StickCircle::setShrinkStick(bool shrink){
    mShrink = shrink;
}
StickCircle::StickCircle(QWidget *parent) : LoadingAnimBase(parent)
{
    mAnim.setPropertyName("angle");
    mAnim.setTargetObject(this);
    mAnim.setDuration(2000);
    mAnim.setLoopCount(-1);//run forever
    mAnim.setEasingCurve(QEasingCurve::Linear);
    resize(200,200);
    setFixedSize(200,200);
    mAngle = 0;
    mShrink = false;
}
void StickCircle::paintEvent(QPaintEvent *event){
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing);
    int x = width();
    int y = height();
    qreal ang = mAngle;

    painter.setPen(Qt::NoPen);
    painter.translate(x/2,y/2);
    QColor lightColor = QColor("black");
    lightColor.setAlphaF(0.1);

    const int stickw = 10;//小棍子的宽度
    qreal stickl = x / 4;//小棍子的长度

    QColor highlight = QColor("black");
    const int startIdx = ang / 30;//开头的深色小棍子的索引号
    const int arr[14] = {0,1,2,3,4,5,6,7,8,9,10,11,0,1};
    QList<int> hightlightList{arr[startIdx],arr[startIdx+1],arr[startIdx+2]};
    QList<qreal> alphaList{0.5,0.75,0.99};//三根深色的小棍子的透明度

    for(int i = 0;i < 12;++i){
        if(hightlightList.contains(i)){
            auto hc = highlight;
            hc.setAlphaF(alphaList[0]);
            painter.setBrush(QBrush(hc));
            alphaList.pop_front();
        }
        else {
            painter.setBrush(QBrush(lightColor));
        }
        painter.drawRoundedRect(QRectF(-stickw/2,0.375*y -stickl/2-1,stickw,stickl),stickw/2,stickw/2);
        auto transform = painter.transform();
        transform.rotate(30);
        painter.setTransform(transform);
    }
}
qreal StickCircle::angle()const{
    return mAngle;
}
void StickCircle::setAngle(qreal an){
    mAngle = an;
    update();
}

TextCircle::TextCircle(const QString & txt,QWidget* parent):mText(txt),LoadingAnimBase(parent){
    mAnim.setPropertyName("angle");
    mAnim.setTargetObject(this);
    mAnim.setDuration(2000);
    mAnim.setLoopCount(-1);//run forever
    mAnim.setEasingCurve(QEasingCurve::Linear);
    //resize(200,200);
    setFixedSize(200,200);
    mAngle = 0;
}
qreal TextCircle::angle()const{return mAngle;}
void TextCircle::setAngle(qreal an){
    mAngle = an;
    update();
}

void TextCircle::paintEvent(QPaintEvent* event){
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    int x = width();
    int y = height();

    QPen pen("black");
    pen.setWidth(4);
    painter.setPen(pen);

    painter.translate(x/2,y/2);
    painter.rotate(mAngle);

    for(int i = 0;i < mText.length();++i){
        const QString s = QString(mText[i]);
        painter.drawText(QRect(-10,y/2-22,20,20),Qt::AlignTop,s);//中下方画一个字符
        painter.rotate(-8);//每个字符之间间距8度
    }
}

TubeCircle::TubeCircle(QWidget *parent) : LoadingAnimBase(parent)
{
    mAnim.setPropertyName("angle");
    mAnim.setTargetObject(this);
    mAnim.setDuration(2000);
    mAnim.setLoopCount(-1);//run forever
    mAnim.setEasingCurve(QEasingCurve::Linear);
    resize(200,200);
    setFixedSize(200,200);
    mAngle = 0;
}
void TubeCircle::paintEvent(QPaintEvent *event){
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing);
    int x = width();
    int y = height();
    qreal ang = mAngle;

    QPen pen(QColor("black"));
    pen.setWidth(x/20);
    pen.setCapStyle(Qt::RoundCap);
    painter.setPen(pen);
    painter.translate(x/2,y/2);
    painter.rotate(ang);
    const int adjust = x/20;
    auto rect = this->rect().adjusted(adjust,adjust,-adjust,-adjust);
    rect.translate(-x/2,-y/2);
    painter.drawArc(rect,30*16,-300*16);

}
qreal TubeCircle::angle()const{
    return mAngle;
}
void TubeCircle::setAngle(qreal an){
    mAngle = an;
    update();
}

TubeBallCircle::TubeBallCircle(QWidget *parent) : LoadingAnimBase(parent)
{
    mAnim.setPropertyName("angle");
    mAnim.setTargetObject(this);
    mAnim.setDuration(2000);
    mAnim.setLoopCount(-1);//run forever
    mAnim.setEasingCurve(QEasingCurve::Linear);
    resize(200,200);
    setFixedSize(200,200);
    mAngle = 0;
}
void TubeBallCircle::paintEvent(QPaintEvent *event){
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing);
    int x = width();
    int y = height();
    qreal ang = mAngle;

    QColor co("gray");
    co.setAlphaF(0.3);
    QPen pen(co);
    const int penw = x/8;
    pen.setWidth(penw);
    pen.setCapStyle(Qt::RoundCap);
    painter.setPen(pen);
    painter.translate(x/2,y/2);
    painter.rotate(ang);
    const int adjust = penw/2;
    auto rect = this->rect().adjusted(adjust,adjust,-adjust,-adjust);
    rect.translate(-x/2,-y/2);
    painter.drawArc(rect,30*16,360*16);//画轨道

    painter.setPen(Qt::NoPen);
    painter.setBrush(QColor("black"));
    painter.drawEllipse(QPoint(0,y/2-penw/2),penw/2,penw/2);//画小球

}
qreal TubeBallCircle::angle()const{
    return mAngle;
}
void TubeBallCircle::setAngle(qreal an){
    mAngle = an;
    update();
}
Halsey Walker
关注
  • 10
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QWidget实现界面收缩栏的效果
11-21
QT插件实现了界面收缩栏效果 1、可以在收缩栏中添加界面 2、可以对添加的界面进行收起或展开 3、可以拖动界面变换界面的位置 用法链接：https://blog.csdn.net/cs1395293598/article/details/134535444?spm=1001.2014.3001.5501 微博主页：https://menghui666.blog.csdn.net/
Qt重写QWidget实现按钮进度条
06-19
通过重写QWidget实现在按钮上的进度条,点击按钮就会在按钮上绘制进度
qml与Qwidget绘制动画的优缺点
公孙莫言的博客
06-05 483
QML和Qt Widgets都提供了绘制动画的能力，但它们在实现方式和使用场景上有一些区别。
Qt利用帧动画实现所有动画效果(QWidget)
05-23
对应博文地址：http://blog.csdn.net/CSND_Ayo/article/details/70175385
qt制作一个加载中等待动画界面
zzZZzzzzjh的博客
04-22 715
【代码】qt制作一个加载中等待动画界面。
PYQT5|Pyside2 界面设计师 Qt Designer动态加载UI文件
HRD的博客
12-09 2256
PYQT5|Pyside2 界面设计师 Qt Designer动态加载UI文件 Qt Designer 简介 点击这里，边看视频讲解，边学习以下内容 QT程序界面的 一个个窗口、控件，就是像上面那样用相应的代码创建出来的。 但是，把你的脑海里的界面，用代码直接写出来，是有些困难的。 很多时候，运行时呈现的样子，不是我们要的。我们经常还要修改代码调整界面上控件的位置，再运行预览。反复多次这样操作。 可是这样，真的…太麻烦了。 其实，我们可以用QT界面生成器Qt Designer，拖拖..
qt widget加载动画
12-21
qt widget 加载动画，希望对大家有帮助。
qt做一个简单数据加载动画
jian436的专栏
03-30 516
【代码】qt做一个简单数据加载动画。
QT显示加载动画
k先森的博客
08-07 907
QT加载动画
Qt耗时操作添加动画等待加载效果
qq_36666864的博客
05-16 2880
本例模拟耗时请求实现动画等待加载效果，采用QtConcurrent::run实现异步耗时操作，通过QFutureWatcher异步监测耗时操作结果的返回值做相应的动画演示。
Qt案例之利用QPaint实现自定义加载中动画控件
04-24
Qt案例之利用QPaint实现自定义加载中动画控件，不使用图片，仅仅利用代码实现Loading加载中动画，可参考文章：https://blog.csdn.net/didi_ya/article/details/124375758
Qt自定义控件实现圆圈加载进度条
08-25
Qt自定义控件实现圆圈加载进度条 Qt自定义控件实现圆圈加载进度条是Qt开发中的一种常见需求，通过自定义控件可以实现圆圈加载进度条的效果。在这篇文章中，我们将详细介绍如何使用Qt实现圆圈加载进度条的步骤。 ...
Qt QWidget 互斥抽屉模型
08-10
总的来说，Qt的互斥抽屉模型是通过结合Qt的多种组件和机制来实现的，它既涉及到基本的UI构建，也包含复杂的事件处理和动画效果。通过深入学习这些知识点，你可以创建出具有专业级别的用户界面。
QT:QML中使用Loader加载界面
qq_48597462的博客
06-03 675
在QML中使用Loader加载界面，可以带来诸多好处，如提高应用程序的启动速度、动态地改变界面内容、根据条件加载不同的组件、更有效地使用内存以及帮助分割应用逻辑等。1.延迟加载：QML Loader允许开发者在需要时才加载组件，而不是在应用程序启动时一次性加载所有组件。这样可以加快应用程序的启动时间，因为它只需要初始化用户当前需要看到的部分。2.动态内容：Loader可以在运行时加载不同的QML文件或组件，这样可以根据用户的操作或应用程序的状态来改变界面的内容。3.条件加载。
界面设计——添加Loading启动画面
qq_46014045的博客
03-22 337
如果程序初始化加载时间较长，可以考虑增加启动画面使用户得到更好得使用体验，下面是两种增加启动画面的方法。
QT程序启动前的预加载与QT程序的启动动画（C++）
qq_19319481的博客
05-10 398
QT程序启动前的预加载程序与启动动画的实现，C++
Qt动画之等待/加载效果
草上爬的博客
03-07 8549
1.支持设置线条和文字的颜色 2.支持设置线条的圆角0-100，100表示最圆 3.支持设置线条的透明度 4.支持设置每秒旋转几圈 5.支持设置线条个数 6.支持设置线条长度 7.支持设置线条宽度 8.支持设置内部空白圆的半径 9.支持设置文字
qt 创建一个矩形，矩形的边线可以拖拽
最新发布
xie__jin__cheng的博客
07-15 249
qt 创建一个矩形，矩形的边线可以拖拽
QT creator简介
weixin_74923758的博客
07-14 917
轻量级跨平台集成开发环境，包含高级C++代码编辑器、集成的GUI外观和版式设计器、项目和生成管理工具、集成的上下文相关帮助系统以及图形化调试器等。强大的拖曳式图形化用户界面排版和设计工具。：多国语言翻译工具，用于Qt应用程序的多国语言翻译。：基于Qt的开源帮助文档阅读器，用于阅读由Qt Assistant应用程序生成的帮助文件。：用于编译ui文件的命令行工具，全称为UI Compiler。：全称为User Interface Compiler，将.ui文件编译为.h文件的命令行工具。
qt 实现圆圈加载动画
07-09
Qt是一个功能强大的跨平台应用程序框架，它提供了丰富的图形和动画功能，可以用来实现各种各样的动画效果，包括圆圈加载动画。 要实现圆圈加载动画，可以使用Qt提供的QPainter绘图工具和动画框架QPropertyAnimation进行开发。 首先，创建一个继承自QWidget的自定义控件，用来显示动画效果。在控件的paintEvent事件中，使用QPainter绘制一个圆圈，并根据动画的进度调整圆圈的大小和颜色。可以使用QPainter的drawEllipse方法来绘制圆圈。 接下来，使用QPropertyAnimation创建一个动画对象，并设置动画的目标对象为自定义控件。通过设置动画的属性，可以实现圆圈大小和颜色的渐变效果。可以使用QVariantAnimation来设置圆圈的大小，并使用QColorAnimation来设置圆圈的颜色。 最后，开始动画播放，可以使用QPropertyAnimation的start方法来启动动画效果。可以设置动画的时长和循环模式，并通过信号槽机制来处理动画结束的事件。 通过以上步骤，就可以实现一个简单的圆圈加载动画。可以通过调整绘制圆圈的参数、设置动画效果等来实现不同的加载动画效果。在实际应用中，可以将该自定义控件添加到窗口中并进行布局，从而实现更加复杂和丰富的加载动画界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值