这篇文章主要介绍了c#怎么实现炫酷启动图——动态进度条效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
<强>一、简述
最近接到一个新需求,让做一个动效进度条。
由于我们的产品比较大,在软件启动的时候会消耗比较长的时间,原生的进度条已经不能满足我们的需求,这里我们就需要一个会动的进度条,效果如下图所示。
光效进度条主要是做了一个进度动画,在已完成的部分上进行快速的迭代渲染,给用户一种直观感受,我们的软件一直努力加载,它还活着。
有了这个进度条之后,当我们的进度从40%到50%这个持续的过程中,界面再也不会出现假死的情况,是不是很完美呢…
下面我就来分析下这个动效进度条是怎么做的
<强>二、动效进度条
如效果图所示,光效进度条不同于一般的进度条,他在基础的任务进度之上还添加了一层光效,主要是想告诉用户我们的软件一直在努力运行,请在耐心的等待一下下。
我自己在做功能的时候,往往喜欢先做一个测试演示,然后在把做好的功能集成在正式环境,这个功能也不列外,如第一节中展示的效果图,就是测试演示的样子,虽然很丑,但是基础功能是有的。
现在的很多软件,在进度展示上都有了比较绚丽的效果,比如压缩软件,解压文件的时候都会有动效进度条,用过的同学应该都知道长啥样,而我们的光效进度条跟这个效果差不多,除此之外我们还提供了另一种动效,延迟动效,他们两个在一定程度上都展示了更友好的进度效果。
在开始分析功能前,首先我们先来考虑下我们的需求:动效进度条,也就是说在原来的进度条基础上需要添加实时动画,让进度条看起来更炫酷一些,除了光效进度条以外,还有一种延迟到达进度条,也属于动态进度条。
延迟动效,说直白一点儿就是延迟到达,当我们设置了进度从10%到20%时,程序模拟了一个渐进的过程,使用一个时间段走完了这10%的进度。
<强>下面我们分别来介绍这两种进度条的实现
实现炫酷的进度条我们可以从QWidget自定义开始写,也就是说从头开始写,但通常我们不这样干,因为这样可能会写出无穷无尽的bug,而且现有的轮子已经很稳定了,为什么还要造呢。
<强> 1,光效进度条
光效进度条我们使用了一个小技巧,采用一个简单的办法实现,我们的光效进度条控件继承自Qt原生进度条类QProgressBar,在新类中我们只需要在Qt绘制完原生进度条之后,补画动效即可。
, paintEvent函数
paintEvent函数是Qt的绘制函数,当界面刷新的时候,这个接口函数就会被调用,因此我们需要重写这个接口,首先调用父窗口的绘制方法,然后我们在绘制我们自己的动效,代码如下所示
b, drawCache绘制动效
绘制动效的时候,我们需要知道动效的绘制区域,这个地方我们需要主动去解析工作频率的一些参数,Qt的风格()→subElementRect这个接口刚好可以拿到我们需要的信息
<强>下面简单描述下我们的实现流程
?首先我们获取进度条的几何大小和中间进度的几何大小,这样的话我们就可以计算出来各边界的数值
?然后根据我们当前的价值值就可以计算出进度条已经走过(就是值小于我们设定的区域)的几何大小
?我们的光效将是跑在第二步计算出来的区域上,一直循环迭代
?内存里我们维护一个cacheValue,这个值在每次界面刷新的时候递增,但是不能大于第二步的值值,cacheValue将是我们动效绘制的一个关键参数,他表示了动效绘制的长度
?构造一个渐变刷子,设置给QPainter
?绘制动效
上下大致描述了下绘制动效的一个流程,下面送上具体代码,由于篇幅原因,代码我进行了部分伪代码处理。
,,,QRectF矩形(动效绘制区域),
