Qt 简约美观的加载动画 文本风格 第八季

今天和大家分享一个文本风格的加载动画, 有两类,其中一个可以设置文本内容和文本颜色,演示了两份. 共三个动画, 效果如下:
在这里插入图片描述

一共三个文件,可以直接编译 , 如果对您有所帮助的话 , 不要忘了点赞呢.

//main.cpp
#include "LoadingAnimWidget.h"
#include <QApplication>
#include <QGridLayout>
int main(int argc, char *argv[])
{QApplication a(argc, argv);QWidget w;w.setWindowTitle("加载动画 第8季");QGridLayout * mainLayout = new QGridLayout;auto* anim1= new TextInBouncingBox("正在加载");mainLayout->addWidget(anim1,0,0);auto* anim2 = new TextInBouncingBox("正在加载中");anim2->setBoxColor("slateblue");anim2->setTextColor("white");mainLayout->addWidget(anim2,0,1);auto* anim3 = new ExpandingScroll;mainLayout->addWidget(anim3,0,2);w.setLayout(mainLayout);w.show();anim1->start();anim2->start();anim3->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 TextInBouncingBox:public LoadingAnimBase{//显示装在上下跳动的盒子里的字符
public:TextInBouncingBox(const QString & str,QWidget* parent = nullptr);void setTextColor(const QColor& color);void setBoxColor(const QColor& color);
protected:void paintEvent(QPaintEvent*);
private:QString mText;QColor mTextColor;QColor mBoxColor;
};
class ExpandingScroll:public LoadingAnimBase{//一个圆环转动两圈之后像卷轴一样展示"正在加载"
public:ExpandingScroll(QWidget* parent = nullptr);
protected:void paintEvent(QPaintEvent*);
};
#endif

//LoadingAnimWidget.cpp
#include "LoadingAnimWidget.h"
#include <QDebug>
#include <QPaintEvent>
#include <QPainter>
#include <QtMath>
#include <QRandomGenerator>
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();
}
TextInBouncingBox::TextInBouncingBox(const QString& str,QWidget* parent ):LoadingAnimBase (parent),mText(str),mBoxColor("darkslategray"),mTextColor("yellow"){setFont(QFont("Microsoft YaHei",16,2));
}
void TextInBouncingBox::setTextColor(const QColor& color){if(mTextColor != color){mTextColor = color;update();}
}
void TextInBouncingBox::setBoxColor(const QColor& color){if(mBoxColor != color){mBoxColor = color;update();}
}void TextInBouncingBox::paintEvent(QPaintEvent*){const int len = mText.size();if(len <= 0) return;QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);QFontMetrics fm(font());const int txtH = fm.height();const int rectH = txtH + 4;const int rectW = fm.horizontalAdvance("w")+4;const qreal x = width();const qreal y = height();painter.translate(0.1*x,0.6*y);painter.setBrush(QBrush(mBoxColor));const qreal amplitude = rectH*0.3;const qreal offset = M_PI / len / 2;for(int i = 0;i < len;++i){QRectF rct( i*rectW,-rectH - amplitude*qSin(-2*M_PI / 360 * mAngle + offset*i) ,rectW,rectH);painter.setPen(Qt::NoPen);painter.drawRect(rct);  //画一个小盒子painter.setPen(mTextColor);painter.drawText(rct,Qt::AlignCenter,QString(mText[i])); //画一个字符}
}ExpandingScroll::ExpandingScroll(QWidget* parent):LoadingAnimBase (parent){setFont(QFont("Microsoft YaHei",16,2));mAnim.setDuration(4000);
}void ExpandingScroll::paintEvent(QPaintEvent*){QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);qreal x = width();qreal y = height();painter.translate(x/2,y/2);painter.setBrush(Qt::NoBrush);QPen pen("black");static const qreal penWidth = 4;pen.setWidthF(penWidth);painter.setPen(pen);x -= 4;y -= 4;const auto ang = mAngle;const int arr[9] = {20,30,60,90,150,180,210,275,345};//9个时间节点,分割下面10个分支if(ang < arr[0]){//中间的竖线转变为半圆弧线const qreal h = 0.25*x;painter.drawLine(0,h/2 - ang/arr[0] * h,0,-h/2);painter.drawArc(QRectF(0,-1.5*h,2*h,2*h),180*16,-180*16*ang/arr[0]);}else if(ang < arr[1]){//半圆弧线转变为四分之一圆弧和右侧的小竖线const qreal h = 0.25*x;const qreal ratio = (ang-arr[0])/(arr[1] - arr[0]);qreal start = 180 - 90*ratio;painter.drawArc(QRectF(0,-1.5*h,2*h,2*h),start*16,-start*16);painter.drawLine(x/2,-h/2,x/2,-h/2+h/2*ratio);}else if(ang < arr[2]){//剩下的上方的四分之一圆弧转为大的下方的八分之一圆弧const qreal h = 0.25*x;const qreal ratio = (ang - arr[1]) / (arr[2] - arr[1]);qreal start = 90 - 90 * ratio;painter.drawArc(QRectF(0,-1.5*h,2*h,2*h),start*16,-start*16);painter.drawLine(x/2,-h/2,x/2,0);painter.drawArc(QRectF(-x/2,-y/2,x,y),0,-45*16*ratio);}else if(ang < arr[3]){//小竖线转为下方的大的八分之一圆弧const qreal h = x/8;qreal ratio = (ang-arr[2]) / (arr[3] - arr[2]);painter.drawLine(x/2,-h*(1-ratio),x/2,0);painter.drawArc(QRectF(-x/2,-y/2,x,y),0,-(45+45*ratio)*16);}else if(ang < arr[4]){//大圆弧转两圈qreal ratio = (ang - arr[3]) / (arr[4] - arr[3]);painter.rotate(720*ratio);painter.drawArc(QRectF(-x/2,-y/2,x,y),0,-90*16);}else if(ang < arr[5]){//大圆弧转为竖线qreal ratio = (ang-arr[4]) / (arr[5] - arr[4]);painter.drawArc(QRectF(-x/2,-y/2,x,y),-90*ratio*16,-90*(1-ratio)*16);painter.drawLine(0,y/2,0,y/2 - 0.625*ratio*y);}else if(ang < arr[6]){//竖线缩小一下qreal ratio = (ang - arr[5]) / (arr[6] - arr[5]);painter.drawLine(0,y/2 - 0.375*y*ratio,0,-0.125*y);}else if(ang < arr[7]){//展开卷轴qreal ratio = (ang - arr[6]) / (arr[7] - arr[6]);QPainterPath pp;pp.addRect(QRectF(-0.375*x*ratio,-0.125*y,0.75*x*ratio,y/4).adjusted(penWidth/-2,penWidth/-2,penWidth/2,penWidth/2));painter.setClipPath(pp);const auto rct = QRectF(-0.375*x,-0.125*y,0.75*x,y/4);painter.setBrush(QBrush("burlywood"));painter.drawRoundedRect(rct,4,4);painter.drawText(rct,Qt::AlignCenter,"正在加载");}else if(ang < arr[8]){//展示一小段时间const auto rct = QRectF(-0.375*x,-0.125*y,0.75*x,y/4);painter.setBrush(QBrush("burlywood"));painter.drawRoundedRect(rct,4,4);painter.drawText(rct,Qt::AlignCenter,"正在加载");}else{//收起卷轴qreal ratio = (ang - arr[8])/(360 - arr[8]);QPainterPath pp;pp.addRect(QRectF(-0.375*x* (1-ratio),-0.125*y,0.75*x*(1-ratio),y/4).adjusted(penWidth/-2,penWidth/-2,penWidth/2,penWidth/2));painter.setClipPath(pp);const auto rct = QRectF(-0.375*x,-0.125*y,0.75*x,y/4);painter.setBrush(QBrush("burlywood"));painter.drawRoundedRect(rct,4,4);painter.drawText(rct,Qt::AlignCenter,"正在加载");}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/716815.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MySQL:开始深入其数据（一）DML

MySQL:开始深入其数据（一）DML

在上一章初识MySQL了解了如何定义数据库和数据表&#xff08;DDL&#xff09;&#xff0c;接下来我们开始开始深入其数据,对其数据进行访问&#xff08;DAL&#xff09;、查询DQL&#xff08;&#xff09;和操作(DML)等。 通过DML语句操作管理数据库数据 DML (数据操作语言) …
阅读更多...
计算机网络之传输层 + 应用层

计算机网络之传输层 + 应用层

.1 UDP与TCP IP中的检验和只检验IP数据报的首部, 但UDP的检验和检验 伪首部 首部 数据TCP的交互单位是数据块, 但仍说TCP是面向字节流的, 因为TCP仅把应用层传下来的数据看成无结构的字节流, 根据当时的网络环境组装成大小不一的报文段.10秒内有1秒用于发送端发送数据, 信道…
阅读更多...
【Python】进阶学习：pandas--groupby()用法详解

【Python】进阶学习：pandas--groupby()用法详解

&#x1f4ca;【Python】进阶学习&#xff1a;pandas–groupby()用法详解 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448;…
阅读更多...
Python算法100例-3.5 亲密数

Python算法100例-3.5 亲密数

1.问题描述2.问题分析3.算法设计4.确定程序框架5.完整的程序6.问题拓展 1&#xff0e;问题描述 如果整数A的全部因子&#xff08;包括1&#xff0c;不包括A本身&#xff09;之和等于B&#xff0c;且整数B的全部因子&#xff08;包括1&#xff0c;不包括B本身&#xff09;之和…
阅读更多...
中国电子学会2020年6月份青少年软件编程Sc ratch图形化等级考试试卷四级真题。

中国电子学会2020年6月份青少年软件编程Sc ratch图形化等级考试试卷四级真题。

第 1 题 【 单选题 】 1.执行下面程序&#xff0c;输入4和7后&#xff0c;角色说出的内容是&#xff1f; A&#xff1a;4&#xff0c;7 B&#xff1a;7&#xff0c;7 C&#xff1a;7&#xff0c;4 D&#xff1a;4&#xff0c;4 2.执行下面程序&#xff0c;输出是&#xff…
阅读更多...
CVE-2016-5195 复现记录

CVE-2016-5195 复现记录

文章目录 poc前置知识页表与缺页异常/proc/self/mem的写入流程madvise 漏洞点修复 Dirty COW脏牛漏洞是一个非常有名的Linux竞争条件漏洞&#xff0c;虽然早在2016年就已经被修复&#xff0c;但它依然影响着众多古老版本的Linux发行版&#xff0c;如果需要了解Linux的COW&#…
阅读更多...
Redis7 实现持久化的三种方式

Redis7 实现持久化的三种方式

1、概述 1.1、Redis持久化的重要性 数据恢复&#xff1a;Redis是一个内存数据库&#xff0c;如果系统或服务宕机&#xff0c;内存中的数据将会丢失。Redis的持久化机制可以把数据保存到磁盘上&#xff0c;以便在系统重启后恢复数据。这是Redis持久化最基本也是最重要的功能。…
阅读更多...
JCL中IEFBR14和COND

JCL中IEFBR14和COND

JCL中IEFBR14和COND ​ COND CODE&#xff0c;就是反映JCL中STEP运行状态的参数&#xff0c;JCL正常终了的COND CODE 是0000&#xff0c;另外笔者在执行某些工具JCL时候&#xff0c;比方说简单一个COMPARE吧&#xff0c;可能会出现0012、0004或者0016&#xff0c;0001&#xf…
阅读更多...
数据结构：栈和队列的实现附上源代码（C语言版）

数据结构：栈和队列的实现附上源代码（C语言版）

目录 前言 1.栈 1.1 栈的概念及结构 1.2 栈的底层数据结构选择 1.2 数据结构设计代码&#xff08;栈的实现&#xff09; 1.3 接口函数实现代码 &#xff08;1&#xff09;初始化栈 &#xff08;2&#xff09;销毁栈 &#xff08;3&#xff09;压栈 &#xff08;4&…
阅读更多...
金三银四求职攻略：如何在面试中脱颖而出

金三银四求职攻略：如何在面试中脱颖而出

随着春天的脚步渐近&#xff0c;对于众多程序员来说&#xff0c;一年中最繁忙、最重要的时期也随之而来。金三银四&#xff0c;即三月和四月&#xff0c;被广大程序员视为求职的黄金时段。在这段时间里&#xff0c;各大公司纷纷开放招聘&#xff0c;求职者们则通过一场又一场的…
阅读更多...
初阶数据结构之---栈和队列（C语言）

初阶数据结构之---栈和队列（C语言）

引言 在顺序表和链表那篇博客中提到过&#xff0c;栈和队列也属于线性表 线性表&#xff1a; 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构。线性表在逻辑上是线性结构&#xff0c;也就是说是连…
阅读更多...
xxl-job--02--可视化界面各功能详细介绍

xxl-job--02--可视化界面各功能详细介绍

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 可视化界面1 新增执行器2.新增任务**执行器**&#xff1a;**任务描述**&#xff1a;**路由策略**&#xff1a;**Cron**&#xff1a;cron表达式**运行模式**JobHandl…
阅读更多...
java Springboot vue 健身房系统，简单练手项目

java Springboot vue 健身房系统，简单练手项目

该项目主要分为管理员和会员模块 管理员具有&#xff1a;会员管理&#xff0c;器材管理,员工管理&#xff0c;健身课程管理 会员模块&#xff0c;可以在线报名健身课程&#xff0c;查看自己课程 采用VUE前端开发和springboot后端开发&#xff0c;极简代码编写&#xff0c;没…
阅读更多...
ubuntu20.04安装docker及运行

ubuntu20.04安装docker及运行

ubuntu20.04安装docker及运行 ubuntu环境版本 Ubuntu Focal 20.04 (LTS) 查看系统版本 rootubuntu20043:~# cat /proc/version Linux version 5.15.0-78-generic (builddlcy02-amd64-008) (gcc (Ubuntu 11.3.0-1ubuntu1~22.04.1) 11.3.0, GNU ld (GNU Binutils for Ubuntu) …
阅读更多...
Vue(黑马学习笔记)

Vue(黑马学习笔记)

Vue概述 通过我们学习的htmlcssjs已经能够开发美观的页面了&#xff0c;但是开发的效率还有待提高&#xff0c;那么如何提高呢&#xff1f;我们先来分析下页面的组成。一个完整的html页面包括了视图和数据&#xff0c;数据是通过请求从后台获取的那么意味着我们需要将后台获取…
阅读更多...
通过XML调用CAPL脚本进行测试（新手向）

通过XML调用CAPL脚本进行测试（新手向）

目录 0 引言 1 XML简介 2 通过XML调用CAPL脚本 0 引言 纪念一下今天这个特殊日子&#xff0c;四年出现一次的29号。 在CANoe中做自动化测试常用的编程方法有CAPL和XML两种&#xff0c;二者各有各的特色&#xff0c;对于CAPL来说新手肯定是更熟悉一些&#xff0c;因为说到在C…
阅读更多...
Vue开发实例（五）修改项目入口页面布局

Vue开发实例（五）修改项目入口页面布局

修改项目入口 一、创建新入口二、分析代码&#xff0c;修改入口三、搭建项目主页面布局1、Container 布局容器介绍2、创建布局3、布局器铺满屏幕4、创建Header页面5、加入Aside、Main和Footer模块 一、创建新入口 创建新的入口&#xff0c;取消原来的HelloWorld入口 参考代码…
阅读更多...
剑指offer刷题记录Day2 07.数组中重复的数字 ---＞ 11.旋转数组的最小数字

剑指offer刷题记录Day2 07.数组中重复的数字 ---＞ 11.旋转数组的最小数字

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 1、重建二叉树①代码实现&#xff08;带注释&am…
阅读更多...
【重温设计模式】职责链模式及其Java示例

【重温设计模式】职责链模式及其Java示例

职责链模式的介绍 在开发过程中&#xff0c;我们经常会遇到这样的问题&#xff1a;一个请求需要经过多个对象的处理&#xff0c;但是我们并不知道具体由哪个对象来处理&#xff0c;或者说&#xff0c;我们希望由接收到请求的对象自己去决定如何处理或者是将请求传递给下一个对…
阅读更多...
【深度学习笔记】计算机视觉——锚框

【深度学习笔记】计算机视觉——锚框

锚框 目标检测算法通常会在输入图像中采样大量的区域&#xff0c;然后判断这些区域中是否包含我们感兴趣的目标&#xff0c;并调整区域边界从而更准确地预测目标的真实边界框&#xff08;ground-truth bounding box&#xff09;。 不同的模型使用的区域采样方法可能不同。 这里…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023