Qt QWidget 简约美观的加载动画 第五季 - 小方块风格

2024-02-27 05:52

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

给大家分享两个小方块风格的加载动画
😊 第五季来啦 😊 效果如下:
在这里插入图片描述

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

//main.cpp
#include "LoadingAnimWidget.h"
#include <QApplication>
#include <QGridLayout>
int main(int argc, char *argv[])
{QApplication a(argc, argv);QWidget w;w.setWindowTitle("加载动画 第5季");QGridLayout * mainLayout = new QGridLayout;auto* anim1= new RhombusShift;mainLayout->addWidget(anim1,0,0);auto* anim2 = new TiltingBricks;mainLayout->addWidget(anim2,0,1);w.setLayout(mainLayout);w.show();anim1->start();anim2->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 RhombusShift:public LoadingAnimBase{//做斜向平移的四个菱形
public:explicit RhombusShift(QWidget* parent = nullptr);
protected:void paintEvent(QPaintEvent*);
};
class TiltingBricks:public LoadingAnimBase{//三个正方形一个接一个倾斜倒向右侧
public:explicit TiltingBricks(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();
}RhombusShift::RhombusShift(QWidget* parent):LoadingAnimBase (parent){mAnim.setDuration(4800);
}
void RhombusShift::paintEvent(QPaintEvent*){QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);painter.setPen(Qt::NoPen);const int x = width();const int y = height();static const int cornerGap = 4;//菱形内部顶点和中心点的距离static const int edgeGap = 2;//菱形顶点和外边框的距离const qreal edgeLen = (x/2 - cornerGap - edgeGap) / 1.42;// 菱形的边长const int halfDiagonalx = (x/2 - edgeGap - cornerGap )/2;//水平方向一半对角线长度const int halfDiagonaly = (y/2 - edgeGap - cornerGap )/2;//垂直方向一半对角线长度const QPointF point1(x/2,edgeGap + halfDiagonaly);          //上方const QPointF point2(x/2 + cornerGap + halfDiagonalx , y/2);//右侧const QPointF point3(x/2, y/2 + cornerGap + halfDiagonaly); //下方const QPointF point4(edgeGap + halfDiagonalx,y/2);          //左侧const QList<QPointF> pointList{point1,point2,point3,point4,point1,point2,point3,point4};QPainterPath pathList[4];for(int i = 0;i < 4; ++i){auto & path = pathList[i];path.moveTo(pointList[i]);path.lineTo(pointList[i+1]);path.lineTo(pointList[i+2]);path.lineTo(pointList[i+3]);path.lineTo(pointList[i+4]);}static const QColor brushList[4] = {"lightblue" , "cadetblue" , "lightblue" , "cadetblue"};static const int staticTime = 15;//每次移动到四个节点上面,要静止一段时间,这个值在0-90之间for(int i = 0;i < 4;++i){qreal proportion = 0;const auto rest = fmod(mAngle,90);//余数const auto quotient = (int)mAngle / 90 * 0.25;//商if(rest > 90 - staticTime) proportion = quotient + 0.25;else proportion = rest / (90 - staticTime) * 0.25 + quotient;const QPointF center = pathList[i].pointAtPercent(proportion);painter.translate(center);painter.rotate(45);painter.setBrush(QBrush(brushList[i]));painter.drawRect(-edgeLen/2,-edgeLen/2,edgeLen,edgeLen);painter.resetTransform();}
}
TiltingBricks::TiltingBricks(QWidget* parent):LoadingAnimBase (parent){mAnim.setDuration(4000);
}
void TiltingBricks::paintEvent(QPaintEvent*){QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);painter.setPen(Qt::NoPen);static const QColor brushList[3] = {"lightcoral" , "lightblue" , "khaki"};const int x = width();const int y = height();painter.translate(x/2,y/2);const int edgeGap = 4;const int cornerGap = 2;const int edgeLen = x/3 - edgeGap - cornerGap;const QRectF point1(-edgeLen-cornerGap,-edgeLen-cornerGap,edgeLen,edgeLen);//左上const QRectF point2(-edgeLen-cornerGap,cornerGap,edgeLen,edgeLen);//左下const QRectF point3(cornerGap,cornerGap,edgeLen,edgeLen);//右下const QRectF point4(cornerGap,-cornerGap-edgeLen,edgeLen,edgeLen);//右上const QList<QRectF> baseRectList{point1,point2,point3};qreal ang = mAngle;int round = (int)ang / 90;if(round >= 4) round = 0;ang = fmod(ang,90);const int rectIdx = (int)ang / 30;ang = fmod(ang,30) * 3;painter.rotate(90*round);for(int i = 0;i < 3;++i){painter.setBrush(QBrush(brushList[i]));if(i == rectIdx){painter.rotate(ang);painter.drawRoundedRect(baseRectList[i],4,4);painter.rotate(-ang);}else{if(i < rectIdx){painter.rotate(90);painter.drawRoundedRect(baseRectList[i],4,4);painter.rotate(-90);}else{painter.drawRoundedRect(baseRectList[i],4,4);}}}
}

这篇关于Qt QWidget 简约美观的加载动画 第五季 - 小方块风格的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/751394

相关文章

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

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

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

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

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

用Unity2D制作一个人物,实现移动、跳起、人物静止和动起来时的动画:中(人物移动、跳起、静止动作)

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

【QT】基础入门学习

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

Python QT实现A-star寻路算法

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

使用Qt编程QtNetwork无法使用

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

Qt多语种开发教程

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

动画AnimationDrawable、转动

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

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