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

2024-03-03 00:12
文章标签 加载 qt 美观 风格 动画 文本 第八 简约

本文主要是介绍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,"正在加载");}
}

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


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

相关文章

【前端学习】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函数
阅读更多...
Level3 — PART 3 — 自然语言处理与文本分析

Level3 — PART 3 — 自然语言处理与文本分析

目录 自然语言处理概要 分词与词性标注 N-Gram 分词 分词及词性标注的难点 法则式分词法 全切分 FMM和BMM Bi-direction MM 优缺点 统计式分词法 N-Gram概率模型 HMM概率模型 词性标注（Part-of-Speech Tagging） HMM 文本挖掘概要 信息检索（Information Retrieval） 全文扫描 关键词
阅读更多...
Qt多语种开发教程

Qt多语种开发教程

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

动画AnimationDrawable、转动

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

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2