Qt 简约美观的加载动画 小沙漏风格 第六季

这次和大家分享一个沙漏风格的加载动画
效果如下:
在这里插入图片描述

这是本系列的第六季了, 本次内容的关键在于cubicTo函数的使用, 在这里分享一个非常好用的网站https://www.desmos.com/calculator/cahqdxeshd
在这上面可以手动拖动贝塞尔曲线的控制点, 并且显示了起终点和两个控制点的精确坐标, 这样来使用qt的cubicTo函数就非常方便了.

一共三个文件,可以直接编译运行

//main.cpp
#include "LoadingAnimWidget.h"
#include <QApplication>
#include <QGridLayout>
int main(int argc, char *argv[])
{QApplication a(argc, argv);QWidget w;w.setWindowTitle("加载动画 第6季");QGridLayout * mainLayout = new QGridLayout;auto* anim1= new FillGlassBead;mainLayout->addWidget(anim1,0,0);auto* anim2 = new FillGlassBead;anim2->setWaveType(FillGlassBead::WaveType::SwayingWater);mainLayout->addWidget(anim2,0,1);auto* anim3 = new Hourglass;mainLayout->addWidget(anim3,1,0);auto* anim4 = new Hourglass;anim4->setColumnVisibility(true);anim4->setSandColor("seagreen");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 FillGlassBead:public LoadingAnimBase{
public:FillGlassBead(QWidget* parent = nullptr);//一颗玻璃珠,内部逐渐充满液体enum class WaveType{PeacefulWater /*平静的水面*/ , SwayingWater /*左右晃动的水面*/};void setWaveType(WaveType t);
protected:void paintEvent(QPaintEvent*);
private:WaveType mWaveType;
};
class Hourglass:public LoadingAnimBase{
public:Hourglass(QWidget* parent = nullptr);//沙漏void setSandColor(const QColor& color);//设置沙子颜色void setColumnVisibility(bool vis);//设置柱子可见性
protected:void paintEvent(QPaintEvent*);
private:QColor mSandColor;bool mColumnVisible;
};
#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();
}
FillGlassBead::FillGlassBead(QWidget* parent):LoadingAnimBase (parent){mAnim.setDuration(3600);mWaveType = WaveType::PeacefulWater;
}
void FillGlassBead::setWaveType(WaveType t){if(mWaveType != t){mWaveType = t;update();}
}
void FillGlassBead::paintEvent(QPaintEvent* e){QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);const int x = width();const int y = height();static const QColor color("lightseagreen");if(mAngle < 90){//只要画一个坠落的小球painter.translate(x/2,0);painter.setPen(Qt::NoPen);painter.setBrush(QBrush(color));qreal posY = y/4.0 * mAngle / 90;//坠落的小球最低点是高度的四分之一painter.drawEllipse(QPointF(0,posY),5,5);}else{painter.translate(x/2,0.625*y);QPen pen(color);pen.setWidth(4);painter.setPen(pen);painter.setBrush(Qt::NoBrush);const qreal r = 0.375*y;if(mAngle < 225){//画一个包裹玻璃珠的圆环//最高点起点角度是90,弧长是0,最低点起点角度是-90,弧长是360qreal proportion = (mAngle - 90) / 135.0;painter.drawArc(QRectF(-r,-r,2*r,2*r), 16*(90-180*proportion),16*360*proportion);}else{//画一个退去的包裹圆环//最开始起点角度是-90,最后起点角度是90qreal proportion = (mAngle - 225) / 135.0;painter.drawArc(QRectF(-r,-r,2*r,2*r),16*(-90+180*proportion),16*(360 - proportion*360));//再画一个上涨的水波QPainterPath pp;const qreal startx = -x/2;const qreal starty = 0.375*y - 0.75*y*proportion;if(mWaveType == WaveType::PeacefulWater){pp.addRect(QRectF(startx,starty,x,y));}else{QPointF start(startx,starty);QPointF end(start.x() + x,start.y());const qreal h = qSin(4*M_PI * proportion) *x * 0.3;QPointF c1( start.x() + 0.25*x, start.y() + h);QPointF c2( start.x() + 0.75*x, start.y() - h);pp.moveTo(start);pp.cubicTo(c1,c2,end);pp.lineTo(end.x(),999);//999没有具体含义,大一点就行了pp.lineTo(startx,999);pp.closeSubpath();}painter.setClipPath(pp);painter.setPen(Qt::NoPen);painter.setBrush(QBrush(color));const qreal r2 = r - 4;painter.drawEllipse(QRectF(-r2,-r2,2*r2,2*r2));}}
}
Hourglass::Hourglass(QWidget* parent):LoadingAnimBase (parent),mSandColor("lime"),mColumnVisible(false){ }
void Hourglass::setSandColor(const QColor& color){if(mSandColor != color){mSandColor = color;update();}
}
void Hourglass::setColumnVisibility(bool vis){if(vis != mColumnVisible){mColumnVisible = vis;update();}
}
void Hourglass::paintEvent(QPaintEvent*){QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);const qreal x = width();const qreal y = height();//step1: 先画上下两个瓶盖qreal ang = (mAngle - 320)/40;//到320度的时候要旋转瓶子if(ang > 1) ang = 1;if(ang < 0) ang = 0;ang *= 180;QPen pen("lightslategray");//岩灰色的瓶身,就像我冰冷的内心pen.setWidth(16);pen.setCapStyle(Qt::RoundCap);painter.setBrush(Qt::NoBrush);painter.setPen(pen);painter.translate(x/2,y/2);painter.rotate(ang);painter.drawLine(-x/4,-0.375*y,x/4,-0.375*y);//上方瓶盖painter.drawLine(-x/4,0.375*y,x/4,0.375*y);//  下方瓶盖//step2: 画一个瓶身QPainterPath pp;const int gap1 = 8;//瓶身距离四分之一水平位置的间距,这个值越大,沙漏越瘦QPointF start(-x/4 + gap1 , -0.375*y);QPointF end(-x/32 , 0);QPointF c1(start.x(),end.y());QPointF c2(end.x(),end.y() + 0.4 * (start.y() - end.y()));pp.moveTo(start);pp.cubicTo(c1,c2,end);const qreal penWidth = 6;pen.setWidthF(penWidth);painter.setPen(pen);painter.drawPath(pp);//瓶身轮廓左上部分painter.rotate(180);painter.drawPath(pp);//右下painter.rotate(-180);painter.scale(1,-1);painter.drawPath(pp);//右上painter.rotate(180);painter.drawPath(pp);//左下//step3: 画两根小柱子(可选)if(mColumnVisible){pen.setWidthF(4);painter.setPen(pen);painter.drawLine(-x/4,start.y(),-x/4,-start.y());painter.drawLine(x/4,start.y(),x/4,-start.y());}painter.resetTransform();painter.translate(x/2,y/2);painter.setPen(Qt::NoPen);painter.setBrush(QBrush(mSandColor));if(mAngle < 320){ //step4: 画动态的沙子//画上面的沙子QPainterPath sand;start.setX(start.x() + penWidth/2);//沙子区域要瘦一点,免得盖住了瓶身end.setX(end.x() + penWidth/2);    //沙子区域要瘦一点,免得盖住了瓶身c1.setX(c1.x() + penWidth/2);      //沙子区域要瘦一点,免得盖住了瓶身c2.setX(c2.x() + penWidth/2);      //沙子区域要瘦一点,免得盖住了瓶身sand.moveTo(start);sand.cubicTo(c1,c2,end);sand.lineTo(0,(0.33-0.2*mAngle/320)*y);sand.lineTo(QPointF(end.x()*-1,end.y()));sand.cubicTo(QPointF(-c2.x(),c2.y()),QPointF(-c1.x(),c1.y()),QPointF(-start.x(),start.y()));sand.lineTo(start);painter.setClipPath(sand);painter.drawRect(QRectF(-x/2,-y/4+mAngle/320 * y *0.38,x,x));//画下面的沙子, 一个等腰三角形QPointF a(start.x() * mAngle/320,0.33*y);QPointF top(0,(0.33 - mAngle/320 * 0.2) * y);QPointF b(-a.x(),a.y());sand.moveTo(a);sand.lineTo(top);sand.lineTo(b);sand.closeSubpath();painter.setClipPath(sand);painter.drawRect(-x/2,top.y(),x,x);//这个高度不能太随意,否则会把上面的沙子也画出来}else{//旋转沙子QPainterPath pp;pp.moveTo(QPointF(start.x() + penWidth/2,0.33*y));pp.lineTo(0,0.13*y);pp.lineTo(QPointF(-start.x()-penWidth/2,0.33*y));pp.closeSubpath();QTransform bottoleTrans;bottoleTrans.rotate(ang);painter.setClipPath(bottoleTrans.map(pp));painter.drawRect(QRectF(-x/2,-x/2,x,x));}
}

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

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

相关文章

Linux中如何在创建子线程的时候设置为分离属性

Linux中如何在创建子线程的时候设置为分离属性

#include<stdio.h> #include<stdlib.h> #include<string.h> #include<sys/types.h> #include<unistd.h> #include <pthread.h> void *mythread(void *arg) {printf("id[%ld]\n",pthread_self()); } int main() { //定义pthread_…
阅读更多...
ulimit命令

ulimit命令

ulimit命令 ulimit 命令用于查看和设置 shell 运行时的资源限制。它可以控制各种资源&#xff0c;如文件打开数量、堆栈大小、CPU 时间等。ulimit 命令通常用于限制 shell 启动的进程的资源使用量&#xff0c;以防止系统资源被耗尽。ulimit命令的主要作用是提高系统的性能和稳…
阅读更多...
智能水表预付费管理系统

智能水表预付费管理系统

智能水表预付费管理系统是当前智能水表技术的重要应用之一&#xff0c;结合了智能化管理和预付费功能&#xff0c;为水务公司和用户提供了便捷、高效的用水管理解决方案。该系统利用先进的科技手段&#xff0c;实现了水表抄表、计费和管理的自动化&#xff0c;为用户带来更便捷…
阅读更多...
Unicode/ASCII/UTF的关系（模板字面量、模板字符串、占位符）

Unicode/ASCII/UTF的关系（模板字面量、模板字符串、占位符）

字符串&#xff1a;编程时最重要的数据类型之一。 正则表达式&#xff1a;赋予开发者更多操作字符串的能力。 1、 Unicode和ASCII 1.1 概述 Unicode是ASCII字符编码的一个扩展&#xff0c;只不过在Windows中&#xff0c;用两个字节对其进行编码&#xff0c;也称为宽字符集&…
阅读更多...
golang的channel探索

golang的channel探索

1、channel是什么&#xff1f; 管道或者是通道。字面意思也就是说是传输的通道或者是管道。 在 Go 语言中&#xff0c;channel 的关键字为 chan&#xff0c;数据流向的表现方式为 <- 分为两种模式&#xff1a; 双向– 表现形式为&#xff1a;chan T&#xff0c;即双向通道。…
阅读更多...
nodejs使用axios获取url的图片信息并转换为base64

nodejs使用axios获取url的图片信息并转换为base64

推荐一款AI网站&#xff0c; AI写作与AI绘画智能创作平台 - 海鲸AI | 智能AI助手&#xff0c;支持GPT4设计稿转代码 要使用axios库在Node.js中获取URL的图片信息并将其转换为Base64编码&#xff0c;首先需要安装axios。如果你还没有安装&#xff0c;可以使用以下命令来安装它&…
阅读更多...
Docker安装mysql、redis、rabbitmq

Docker安装mysql、redis、rabbitmq

【docker 安装mysql】 docker pull mysql:latest docker imagesdocker run -p 3306:3306 --name mysql --restartalways --privilegedtrue \ -v /usr/local/mysql/log:/var/log/mysql \ -v /usr/local/mysql/data:/var/lib/mysql \ -v /usr/local/mysql/conf:/etc/mysql \ -v …
阅读更多...
取消退出流程控制方法

取消退出流程控制方法

在自动化设备动作流程中&#xff0c;人为任意想取消当前动作&#xff0c;常见方法是使用全局变量&#xff0c;实时检测变量决定退出。这里介绍一个System.Threading空间下的 CancellationTokenSource类&#xff0c;他可以设置超时&#xff0c;设置信息等封装 基本使用超时和手…
阅读更多...
反向传播和前向传播什么意思

反向传播和前向传播什么意思

在神经网络训练的上下文中&#xff0c;前向传播和反向传播是两个基本且关键的概念。 前向传播&#xff08;Forward Propagation&#xff09; 前向传播是神经网络中数据流向的第一步。在这个过程中&#xff0c;输入数据从输入层开始&#xff0c;逐层经过隐藏层&#xff0c;直至…
阅读更多...
【粉丝福利第一期】小 明

【粉丝福利第一期】小 明

Q1 - 能否自我介绍下&#xff1f; 嗨&#xff0c;大家好&#xff0c;我是 小 明 &#xff08;小明java问道之路&#xff09;&#xff0c;互联网大厂后端研发专家&#xff0c;2022博客之星TOP3/博客专家/CSDN后端内容合伙人、InfoQ(极客时间)签约作者、阿里云签约博主、全网5万…
阅读更多...
GO单元测试的使用

GO单元测试的使用

Go语言中的测试依赖go test命令,go test命令是一个按照一定约定和组织的测试代码的驱动程序。在包目录内&#xff0c;所有以_test.go为后缀名的源代码文件都是go test测试的一部分&#xff0c;不会被go build编译到最终的可执行文件中。每个测试函数必须导入testing包,测试函数…
阅读更多...
PBM学习——从基础到精通！！！

PBM学习——从基础到精通！！！

本专栏着重讲解PBM学习所得，学习笔记、心得，并附有视频素材资料，视频详细目录如下： PBM相关参数解释1 PBM相关参数解释2 PBM相关案例实践1 PBM相关案例实践2 PBM相关案例实践2 PBM相关案例实践3 PBM多相流中次相界面设置1 PBM多相流中次相界面设置2 欧拉多相流曳力1 欧拉多…
阅读更多...
make/makefile

make/makefile

首先什么是make和makefile呢&#xff1f;先简单说&#xff0c;make是一条命令&#xff0c;makefile是一个文件&#xff0c;这个文件中存的是依赖关系和依赖方法&#xff0c;那么为什么会有这两个东西呢&#xff1f; 首先我们知道在VS2019中&#xff0c;我们可以直接创建一个工程…
阅读更多...
474 一零和

474 一零和

题目 给你一个二进制字符串数组 strs 和两个整数 m 和 n 。请你找出并返回 strs 的最大子集的长度&#xff0c;该子集中 最多 有 m 个 0 和 n 个 1 。如果 x 的所有元素也是 y 的元素&#xff0c;集合 x 是集合 y 的 子集 。示例 1&#xff1a;输入&#xff1a;strs ["1…
阅读更多...
Linux系统中make/Makefile的介绍

Linux系统中make/Makefile的介绍

文章目录 前言一、make命令二、makefile功能介绍1.makefile文件的编写格式2.hello.c文件内容3.makefile文件4.安装make命令 总结 前言 在linux系统中&#xff0c;我们对项目文件进行处理的时候会不方便&#xff0c;因此我们需要对文件的编译进行自动化处理。 下面就是在Linux系…
阅读更多...
1、docker 基础命令

1、docker 基础命令

1、docker 运行镜像 docker run image tag 2、创建dockerfile&#xff08;构建容器的相关命令&#xff09; vim DockerFile 3、docker 构建容器镜像 docker build -t <image_name> . 4、docker 分层 5、查看镜像 docker images 6、docker 执行 docker run --name &…
阅读更多...
web组态（BY组态）接入流程

web组态（BY组态）接入流程

技术文档 官网网站&#xff1a;www.hcy-soft.com 体验地址&#xff1a; www.byzt.net:60/sm 一、数据流向图及嵌入原理 数据流向 嵌入原理 二、编辑器调用业务流程图 三、集成前需要了解的 1、后台Websocket端往前台监控画面端传输数据规则 后台websocket向客户端监控画面…
阅读更多...
模型优化_XGBOOST学习曲线及改进，泛化误差

模型优化_XGBOOST学习曲线及改进，泛化误差

代码 from xgboost import XGBRegressor as XGBR from sklearn.ensemble import RandomForestRegressor as RFR from sklearn.linear_model import LinearRegression as LR from sklearn.datasets import load_boston from sklearn.model_selection import train_test_split,c…
阅读更多...
Linux： GDB 调试工具

Linux： GDB 调试工具

概念&#xff1a; Linux GDB&#xff08;GNU Debugger&#xff09;是一个功能强大的调试工具&#xff0c;用于调试C、C等编程语言的程序。它可以帮助开发人员定位和修复程序中的错误。 GDB 的使用 &#xff1a; 激活和进入工作模式&#xff1a; gdb 需要调试的文件 进入 …
阅读更多...
【Java设计模式】三、

【Java设计模式】三、

文章目录 0、案例&#xff1a;咖啡屋1、简单工厂模式 静态工厂&#xff08;不属于23种之列&#xff09;2、工厂方法模式3、抽象工厂模式4、建造者模式5、原型设计模式 0、案例&#xff1a;咖啡屋 模拟咖啡店点餐。咖啡有多种&#xff0c;抽象类&#xff0c;子类为各种咖啡。咖…
阅读更多...
最新文章

Copyright @ 2022~2023