很多app中使用了H5,为了更好的用户体验,很多app会在加载H5界面的时候显示进度条,类似微信,或者QQ,但是如果只是单纯的使用系统ProgressBar则会发现在加载中progress并不是从0线性涨到100,而是跳跃式的加载,很影响效果,但是如何做到类似微信QQ的网页加载效果呢?
此处是我写的一个demo,代码很简单,百行代码即可实现,首先我们分析一下原理:
此处进度条加载动画总体分为2部分:
第一部分是线性加载动画,可通过刷线程不断增加进度条的宽度
第二部分是加速动画,当指定了进度值的时候,比如50%,此时我们需要将进度条的宽度从0变到(屏幕宽*50%)
核心算法如下:
//计算速度
if(progressWidth < targetWidth){
speed ++;
}else{
speed = 1;
}
//计算进度条宽度
progressWidth += speed;
//计算当前进度
progress = progressWidth / getWidth() *100;
http://download.csdn.net/detail/cc_want/9883367
github地址:
https://github.com/CCwant/WebViewProgressBar