当前位置: 首页 > news >正文

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_OBJECT
    Q_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 forever
    mAnim.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 cornerGap = 2;
    const int edgeLen = x/3;//小方块边长
    const QRectF rct1(-edgeLen-cornerGap,-edgeLen-cornerGap,edgeLen,edgeLen);//左上
    const QRectF rct2(-edgeLen-cornerGap,cornerGap,edgeLen,edgeLen);//左下
    const QRectF rct3(cornerGap,cornerGap,edgeLen,edgeLen);//右下

    const QRectF baseRectList[3] = {rct1,rct2,rct3};
    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);
            }
        }
    }
}

相关文章:

  • Linux——进程控制
  • 设计模式浅析(九) ·模板方法模式
  • Python中的异常处理详解及try-except语句的工作原理
  • C++ 网络编程学习二
  • 2/22作业
  • 【leetcode每日一题】【滑动窗口长度固定】案例
  • 【ArcGIS】基于DEM/LUCC等数据统计得到各集水区流域特征
  • MapInfo格式到ArcGIS格式的转换方法
  • js之数组遍历
  • 性能优化——canvas 加载海量图
  • Open CASCADE学习|视图
  • Python零基础安装教程(包含各种安装方案)以及PyCharm安装步骤
  • 第七章 正则表达式
  • 机器人内部传感器阅读笔记及心得-位置传感器-旋转变压器、激光干涉式编码器
  • C++多态
  • 理想滤波器、巴特沃斯滤波器、高斯滤波器实现(包含低通与高通,代码实现与分析)
  • opengl播放3d pose 原地舞蹈脚来回飘动
  • C++拿几道题练练手吧
  • java面试题之mybatis篇
  • 浅谈 TCP 三次握手
  • 监狱法修订草案提请全国人大常委会会议审议
  • 学校食堂饭菜有蛆?举报人遭值班人员辱骂?四川苍溪县教育局回应
  • 伊朗港口爆炸已造成25人死亡,灭火行动已近尾声
  • 六朝文物草连空——丹阳句容南朝石刻考察纪
  • 对外投资增长、消费市场持续升温,中国经济砥砺前行
  • 中国天主教组织发唁电对教皇去世表示哀悼