C#实现炫酷启动图-动态进度条效果_c#动态特效,c#动态加载进度条 - CSDN文库

62 浏览量更新于2023-03-03 评论 2 收藏 345KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

C#实现炫酷启动图实现炫酷启动图-动态进度条效果动态进度条效果

一、简述一、简述

最近接到一个新需求，让做一个动效进度条。

由于我们的产品比较大，在软件启动的时候会消耗比较长的时间，原生的进度条已经不能满足我们的需求，这里我们就需要一个会动的进度条，效果

如下图所示。

光效进度条主要是做了一个进度动画，在已完成的部分上进行快速的迭代渲染，给用户一种直观感受，我们的软件一直努力加载，它还活着。

有了这个进度条之后，当我们的进度从40%到50%这个持续的过程中，界面再也不会出现假死的情况，是不是很完美呢。。。

下面我就来分析下这个动效进度条是怎么做的

二、动效进度条二、动效进度条

如效果图所示，光效进度条不同于一般的进度条，他在基础的任务进度之上还添加了一层光效，主要是想告诉用户我们的软件一直在努力运行，请在

耐心的等待一下下。

我自己在做功能的时候，往往喜欢先做一个测试demo，然后在把做好的功能集成在正式环境，这个功能也不列外，如第一节中展示的效果图，就是

测试demo的样子，虽然很丑，但是基础功能是有的。

现在的很多软件，在进度展示上都有了比较绚丽的效果，比如压缩软件，解压文件的时候都会有动效进度条，用过的同学应该都知道长啥样，而我们

的光效进度条跟这个效果差不多，除此之外我们还提供了另一种动效，延迟动效，他们两个在一定程度上都展示了更友好的进度效果。

在开始分析功能前，首先我们先来考虑下我们的需求：动效进度条，也就是说在原来的进度条基础上需要添加实时动画，让进度条看起来更炫酷一

些，除了光效进度条以外，还有一种延迟到达进度条，也属于动态进度条。

延迟动效、说直白一点儿就是延迟到达，当我们设置了进度从10%到20%时，程序模拟了一个渐进的过程，使用一个时间段走完了这10%的进度。

下面我们分别来介绍这两种进度条的实现下面我们分别来介绍这两种进度条的实现

实现炫酷的进度条我们可以从QWidget自定义开始写，也就是说从头开始写，但通常我们不这样干，因为这样可能会写出无穷无尽的bug，而且现有

的轮子已经很稳定了，为什么还要造呢。

1、光效进度条、光效进度条

光效进度条我们使用了一个小技巧，采用一个简单的办法实现，我们的光效进度条控件继承自Qt原生进度条类QProgressBar，在新类中我们只需要

在Qt绘制完原生进度条之后，补画动效即可。

a、paintEvent函数

paintEvent函数是Qt的绘制函数，当界面刷新的时候，这个接口函数就会被调用，因此我们需要重写这个接口，首先调用父窗口的绘制方法，然后我

们在绘制我们自己的动效，代码如下所示

QProgressBar::paintEvent(event);

drawCache绘制动效

b、drawCache绘制动效

绘制动效的时候，我们需要知道动效的绘制区域，这个地方我们需要主动去解析qss的一些参数，Qt的style()->subElementRect这个接口刚好可以拿

到我们需要的信息

下面简单描述下我们的实现流程下面简单描述下我们的实现流程

•首先我们获取进度条的几何大小和中间进度的几何大小，这样的话我们就可以计算出来各border的数值

•然后根据我们当前的value值就可以计算出进度条已经走过(就是值小于我们设定的区域)的几何大小

•我们的光效将是跑在第二步计算出来的区域上，一直循环迭代

•内存里我们维护一个cacheValue，这个值在每次界面刷新的时候递增，但是不能大于第二步的value值，cacheValue将是我们动效绘制的一个关键

参数，他表示了动效绘制的长度

•构造一个渐变刷子，设置给QPainter

•绘制动效

上下大致描述了下绘制动效的一个流程，下面送上具体代码，由于篇幅原因，代码我进行了部分伪代码处理。

void GMPProgressBar::drawCache()

{

QStyleOptionProgressBarV2 opt;

QRect outerRect = style()->subElementRect(QStyle::SE_ProgressBarGroove, &opt, this);

QRect innerRect = style()->subElementRect(QStyle::SE_ProgressBarContents, &opt, this);

QMargins borders(构造一个QMargins);

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

评论0

weixin_38538381

粉丝: 6
资源: 907

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈