Qt QWidget 简约美观的加载动画 第四季

2024-02-26 21:52
文章标签 加载 qt 美观 动画 第四季 qwidget 简约

本文主要是介绍Qt QWidget 简约美观的加载动画 第四季，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

😊 第四季来啦 😊
效果如下:
在这里插入图片描述
只有三个文件,可以直接编译运行的

//main.cpp
#include "LoadingAnimWidget.h"
#include <QApplication>
#include <QVBoxLayout>
#include <QGridLayout>
int main(int argc, char *argv[])
{QApplication a(argc, argv);QWidget w;w.setWindowTitle("加载动画 第四季");QGridLayout * mainLayout = new QGridLayout;auto* anim1= new JellyInBox;mainLayout->addWidget(anim1,0,0);auto* anim2 = new HorizontalDNA;mainLayout->addWidget(anim2,0,1);auto * anim3 = new  LoopedRingWithText;mainLayout->addWidget(anim3,1,0);auto* anim4 = new Radar;mainLayout->addWidget(anim4,1,1);w.setLayout(mainLayout);w.show();anim1->start();anim2->start();anim3->start();anim4->start();return a.exec();
}
//LoadingAnimWidget.h
#ifndef LOADINGANIMWIDGET_H
#define LOADINGANIMWIDGET_H
#include <QPropertyAnimation>
#include <QWidget>
class LoadingAnimBase:public QWidget
{Q_OBJECTQ_PROPERTY(qreal angle READ angle WRITE setAngle)
public:LoadingAnimBase(QWidget* parent=nullptr);virtual ~LoadingAnimBase();qreal angle()const;void setAngle(qreal an);
public slots:virtual void exec();virtual void start();virtual void stop();
protected:QPropertyAnimation mAnim;qreal mAngle;
};class JellyInBox:public LoadingAnimBase{//一个会伸缩的果冻在一个小盒子里面,一开始拉伸,然后移动,然后收缩
public:explicit JellyInBox(QWidget* parent = nullptr);
protected:void paintEvent(QPaintEvent *event);
};
class HorizontalDNA:public LoadingAnimBase{//两根水平方向的小球链,螺旋滚动,像DNA双分子链
public:explicit HorizontalDNA(QWidget* parent = nullptr);
protected:void paintEvent(QPaintEvent*);
private:void getPosYAlphaScale(const int amplitude,const qreal & offset,qreal & y,qreal & alpha,qreal & scale);//根据原始偏移获取当前时间点下的y轴坐标,透明度,和缩放比例
};
class LoopedRingWithText:public LoadingAnimBase{//外面有三圈圆环转动,中间有一个高亮的灯光从左向右移动照亮字符串的一部分
public:explicit LoopedRingWithText(QWidget* parent = nullptr);
protected:void paintEvent(QPaintEvent*);
};
class Radar:public LoadingAnimBase{//像一个雷达一样扫描,等待耗时操作的结束
public:explicit Radar(QWidget* parent = nullptr);
protected:void paintEvent(QPaintEvent*);
};#endif // LOADINGANIMWIDGET_H
//LoadingAnimWidget.cpp
#include "LoadingAnimWidget.h"
#include <QDebug>
#include <QPaintEvent>
#include <QPainter>
#include <QtMath>
LoadingAnimBase::LoadingAnimBase(QWidget* parent):QWidget(parent){mAnim.setPropertyName("angle");mAnim.setTargetObject(this);mAnim.setDuration(2000);mAnim.setLoopCount(-1);//run forevermAnim.setEasingCurve(QEasingCurve::Linear);setFixedSize(200,200);mAngle = 0;
}
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();
}
qreal LoadingAnimBase::angle()const{ return mAngle;}
void LoadingAnimBase::setAngle(qreal an){mAngle = an;update();
}
JellyInBox::JellyInBox(QWidget* parent):LoadingAnimBase (parent){}
void JellyInBox::paintEvent(QPaintEvent *event){QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);painter.setBrush(Qt::NoBrush);int x = this->width();const int y = this->height();//先画一个盒子QPen pen("black");pen.setWidth(3);painter.setPen(pen);painter.drawRoundedRect(QRectF(1,0.4375*y,x-2,y/8),y/16.0,y/16.0);//画果冻pen.setCapStyle(Qt::RoundCap);painter.setBrush(Qt::NoBrush);const int gap = 4;//果冻和盒子之间的间距const int boxGap = 1;//盒子的外间距const qreal jh = y/8 - gap*2;//果冻高度pen.setWidthF(jh);painter.setPen(pen);painter.translate(boxGap + gap + jh/2,y/2);x -= (boxGap + gap) * 2 + jh;//可以移动的x范围是总宽度 - 两边的两个间距 - 笔头厚度const qreal maxw = 0.4*x;//最大的果冻宽度int jx = 0;qreal jw = 0;if(mAngle < 90){jw = maxw * mAngle / 90;}else if(mAngle < 270){jw = maxw;jx = (x - maxw) * (mAngle - 90) / 180;}else{jx = x - maxw + (mAngle - 270) / 90 * maxw;jw = x - jx;}painter.drawLine(jx,0,jx+jw,0);
}
HorizontalDNA::HorizontalDNA(QWidget* parent):LoadingAnimBase (parent){mAnim.setDuration(5000);
}
void HorizontalDNA::getPosYAlphaScale(const int amplitude,const qreal & offset,qreal & y,qreal & alpha,qreal & scale){static const qreal a = 2*3.1415926 / 360;//qreal x = a*mAngle + offset;//随着时间的流逝,x变大,y踩着着右边的值,看上去就是右边的小球带动左侧的小球移动//如果要实现左边的小球带动右侧的小球,要这样auto x = -a * mAngle + offset;y = qSin(x);auto tmp = qCos(x); //随着时间的流逝,x变小,当小球向上移动的时候,透明度变小tmp += 1;tmp /= 2;alpha = 1- tmp;scale = alpha / 2 + 0.5;//不要太小了,最小是0.5y *= amplitude;//amplitude就是振幅 sin(x)的振幅是1
}
void HorizontalDNA::paintEvent(QPaintEvent*){QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);painter.setPen(Qt::NoPen);const int x = width();const qreal radius = x / 20.0;//小球的半径const qreal y = height();const qreal unitx = x / 8.0;//小球的间距painter.translate(unitx,y/2);static const qreal gap = M_PI / 6;static const qreal offsetList[7] = {gap*0,gap*1,gap*2,gap*3,gap*4,gap*5,gap*6};QColor ballColor("black");for(int i = 0;i < 7;++i){qreal bally ,alpha,scale;getPosYAlphaScale(y/6,offsetList[i],bally,alpha,scale);ballColor.setAlphaF(alpha);painter.setBrush(QBrush(ballColor));painter.drawEllipse(QPointF(unitx*i,bally),radius*scale,radius*scale);}static const qreal offsetList2[7] = {gap*6,gap*7,gap*8,gap*9,gap*10,gap*11,0};for(int i = 0;i < 7;++i){qreal bally ,alpha,scale;getPosYAlphaScale(y/6,offsetList2[i],bally,alpha,scale);ballColor.setAlphaF(alpha);painter.setBrush(QBrush(ballColor));painter.drawEllipse(QPointF(unitx*i,bally),radius*scale,radius*scale);}
}
LoopedRingWithText:: LoopedRingWithText(QWidget* parent):LoadingAnimBase(parent){mAnim.setDuration(6000);
}
void  LoopedRingWithText::paintEvent(QPaintEvent*){QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);const int x = width();const int y = height();//step0:定义一些颜色变量,也可以改成成员变量static const QColor bright("turquoise");//最亮的圆环颜色static const QColor medium = QColor(bright.red(),bright.green(),bright.blue(),200);static const QColor dim = QColor(bright.red(),bright.green(),bright.blue(),160);//step1:画一个深色的背景painter.setPen(Qt::NoPen);painter.setBrush(QBrush(QColor("dimgray")));painter.drawRoundedRect(this->rect(),x/12,x/12);//step2:画最外面的两个圆环painter.translate(x/2,y/2);QPen pen(dim);pen.setWidth(4);pen.setCapStyle(Qt::RoundCap);painter.setPen(pen);const auto rect1 = QRectF(-0.45*x,-0.45*y,0.9*x,0.9*y);static const qreal start = 30;static const qreal span = 120;auto ang = mAngle;painter.rotate(ang);painter.drawArc(rect1,start * 16,span * 16);painter.drawArc(rect1,(start+180) *16,span * 16);painter.resetTransform();//step3:画中间的两个圆环pen.setColor(medium);painter.setPen(pen);painter.translate(x/2,y/2);const auto rect2 = QRectF(-0.375*x,-0.375*y,0.75*x,0.75*y);if(ang > 180) ang -= 180;//周期改成180,比外面的转的快一倍painter.rotate(-2*ang);painter.drawArc(rect2,start * 16,span * 16);painter.drawArc(rect2,(start + 180)*16,span*16);painter.resetTransform();//step4:画内部的4个圆环pen.setColor(bright);painter.setPen(pen);painter.translate(x/2,y/2);const auto rect3 = QRectF(-0.3*x,-0.3*y,0.6*x,0.6*y);ang = mAngle;static const qreal t3 = 120;//周期改成120,比中间的更快while(ang > t3) ang -= t3;painter.rotate( ang * 90 / t3);//四个圆环转过90度的时候也就是长短交替一次,要把这个转过的角度乘以调整系数:90/120qreal start0 = 15 + (90-15) * (ang / t3);//开始的时候上方圆环起点在15度,变化到90度时弧长为0qreal span0 = 180 - 2*start0;if(span0 > 0){//第一组painter.drawArc(rect3,start0*16 , span0*16);painter.drawArc(rect3,(start0+180)*16,span0*16);}start0 = -75 * (ang / t3);//开始的时候,右侧圆环起点是0,弧长为0,它的最大弧长时刻,起点在-75度span0 = -start0 * 2;if(span0 > 0){//第二组painter.drawArc(rect3,start0*16,span0*16);painter.drawArc(rect3,(start0+180)*16,span0*16);}painter.resetTransform();QFont font("Microsoft YaHei",12,4);painter.setFont(font);QFontMetrics fm(font);static const QString text("Loading...");qreal textw = fm.horizontalAdvance(text);qreal texth = fm.height();QPainterPath pp;pp.addText(QPointF( (x - textw)/2,0.5*y + texth/4),font,text);painter.setClipPath(pp);painter.setPen(Qt::NoPen);painter.setBrush(QBrush(dim));//step5: 先画一个淡色的文本painter.drawRect(rect());//step6: 最后一步啦,画一个圆灯光painter.translate(0,0.5*y);const qreal unit = x / 360.0;QRadialGradient grad(QPointF(mAngle*unit,0),texth);grad.setColorAt(0,bright);grad.setColorAt(1,dim);painter.setBrush(grad);painter.drawEllipse(QPointF(mAngle * unit,0),texth,texth);
}
Radar::Radar(QWidget* parent):LoadingAnimBase(parent){}
void Radar::paintEvent(QPaintEvent*){QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);//step1: 画一个淡色背景,很多简约的界面都需要透明背景,这一步可以删掉painter.setPen(Qt::NoPen);painter.setBrush(QBrush("deepskyblue"));const int x = width();const int y = height();painter.drawRoundedRect(rect(),x/12,x/12);//step2: 画一个雷达painter.translate(x/2,y/2);QConicalGradient gra(QPointF(0,0),45);static const QColor color0("white");static const QColor color1(color0.red(),color0.green(),color0.blue(),100);gra.setColorAt(0,color0);gra.setColorAt(0.2,color1);gra.setColorAt(1,"transparent");painter.setBrush(gra);painter.rotate(mAngle);const auto rect = QRectF(-x/4,-y/4,x/2,y/2);painter.drawPie(rect,45*16,90*16);}

这篇关于Qt QWidget 简约美观的加载动画 第四季的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/750269。

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

上回我们学到创建一个地形和一个人物，今天我们实现一下人物实现移动和跳起，依次点击，我们准备创建一个C#文件 创建好我们点击进去，就会跳转到我们的Vision Studio，然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类，继承自MonoBehaviour{private Rigidbo
阅读更多...
【QT】基础入门学习

【QT】基础入门学习

文章目录 浅析Qt应用程序的主函数使用qDebug()函数常用快捷键Qt 编码风格信号槽连接模型实现方案 信号和槽的工作机制Qt对象树机制 浅析Qt应用程序的主函数 #include "mywindow.h"#include <QApplication>// 程序的入口int main(int argc, char *argv[]){// argc是命令行参数个数，argv是
阅读更多...
Python QT实现A-star寻路算法

Python QT实现A-star寻路算法

目录 1、界面使用方法 2、注意事项 3、补充说明 用Qt5搭建一个图形化测试寻路算法的测试环境。 1、界面使用方法 设定起点： 鼠标左键双击，设定红色的起点。左键双击设定起点，用红色标记。 设定终点： 鼠标右键双击，设定蓝色的终点。右键双击设定终点，用蓝色标记。 设置障碍点： 鼠标左键或者右键按着不放，拖动可以设置黑色的障碍点。按住左键或右键并拖动，设置一系列黑色障碍点
阅读更多...
使用Qt编程QtNetwork无法使用

使用Qt编程QtNetwork无法使用

使用 VS 构建 Qt 项目时 QtNetwork 无法使用的问题 - 摘叶飞镖 - 博客园 (cnblogs.com) 另外,强烈建议在使用QNetworkAccessManager之前看看这篇文章: Qt 之 QNetworkAccessManager踏坑记录-CSDN博客 C++ Qt开发：QNetworkAccessManager网络接口组件 阅读目录 1.1 通用API函数
阅读更多...
Qt多语种开发教程

Qt多语种开发教程

Qt作为跨平台的开发工具，早已应用到各行各业的软件开发中。 今天讲讲，Qt开发的正序怎么做多语言开发。就是说，你设置中文，就中文显示；设置英语就英文显示，设置繁体就繁体显示，设置发育就显示法语等。 开发环境(其实多语种这块根环境没太大关系)：win10，Qt.5.12.10 一.先用QtCreator创建一个简单的桌面程序 1.工程就随便命名“LanguageTest”，其他默认。 2.在设计师
阅读更多...
动画AnimationDrawable、转动

动画AnimationDrawable、转动

现实开发中：很多地方都用到 点击动画的特效； 本案例本人做了三个关于“动” 画 的效果； 先上图： 总体图： A: B: 1：点击图片按钮，效果是：图片闪动； 通过在xml中定义：标签：animation-list来实现点击动画的效果；  是否循环标签：oneshot ;   时间间隔标签：duration ; 要显示的图片标签：drawable ;
阅读更多...
13 transition数组的动画使用

13 transition数组的动画使用

划重点 动画：transitiontransition-group ：数组动画数组的 添加 / 删除 豆腐粉丝汤 清淡又健康 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><me
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2