自定义漂亮进度条的方法

最近晚上闲来无事, 想要仔细研究下怎么美化进度条,又重新学习了下aardio的plus进度条美化教程.

要想实现上面的简单进度条, 在aardio中应该是容易实现的.

只需要两幅图片

一个作为进度条的背景图, 一个作为 进度条值变化完成后的图像.

然后,两个图片的拉伸模式都设置为expend,就ok了

当然记得把进度条的大小调整到和图片一样大小啊

背景是上面那个黑色的, 前景图是哪个黄绿色的图

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=484;bottom=285)
winform.add(
button={cls="button";text="执行一次";left=76;top=157;right=413;bottom=211;font=LOGFONT(h=-21);z=2};
progress={cls="plus";left=72;top=68;right=415;bottom=89;background="\res\demobg.png";foreRepeat="expand";foreground="\res\demoqj.png";z=1}
)
/*}}*/

//设置进度值
winform.progress.setProgressRange(1,100)

winform.button.oncommand = function(id,event){
    winform.progress.progressPos = 0;
	//创建一个定时器演示进度变化
	var tmId = winform.addtimer( 
		100,//间隔100毫秒,也就是0.1秒
		function(hwnd,msg,id,tick){
			//向后移动进度条3格,因为onPosChanged里修改文本会刷新,这里用参数@2禁止一次不必要的刷新
			var finished = winform.progress.stepProgress(3); 
			if( !finished ){
				//winform.progress.text = "已完成 "
				return 0;//进度已到了100%，返回0结束定时器
			}
		} 
	)
}

winform.show();
win.loopMessage();
return winform;

下面我们实现下更复杂的进度条样式试试.O(∩_∩)O~

那么如果进度条头部有个东东, 那么怎么实现呢?

这里同样的, 需要两幅图片, 一个作为背景,一个作为进度移动

这里我测试了下, 发现如果用

winform.progress.setProgressRange(1,100)

那么, 这个进度条并不会向上面那个动态图那样移动, 进度条的头部圈圈会在最后一点才显示出来, 那么上面是怎么实现的呢?

哈, 这里投机 , 利用了

winform.progress.setTrackbarRange(1,100)

这个trackbar是一个拖动条的样式库, 我这里用它来实现那个圈圈的移动.

但是, 进度条是不需要并且不能被拖动的, 所以, 需要设置这个plus禁用状态

步骤:

把图片设置好背景图和前景图, 我们再次设置前景图的前景切图

前景切图, 切的是什么?

把进度条的前景图片的右边的圈圈给切出来了, 这样,这个圈圈就不会被拉伸了.

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=484;bottom=285)
winform.add(
button={cls="button";text="执行一次";left=76;top=157;right=413;bottom=211;font=LOGFONT(h=-21);z=2};
progress={cls="plus";left=72;top=68;right=426;bottom=93;background="\res\dbg.png";disabled=1;foreRepeat="expand";foreRight=23;foreground="\res\dqj.png";z=1}
)
/*}}*/

//设置进度值
winform.progress.setTrackbarRange(1,100)

winform.button.oncommand = function(id,event){
    winform.progress.progressPos = 0;
	//创建一个定时器演示进度变化
	var tmId = winform.addtimer( 
		100,//间隔100毫秒,也就是0.1秒
		function(hwnd,msg,id,tick){
			//向后移动进度条3格,因为onPosChanged里修改文本会刷新,这里用参数@2禁止一次不必要的刷新
			var finished = winform.progress.stepProgress(3); 
			if( !finished ){
				return 0;//进度已到了100%，返回0结束定时器
			}
		} 
	)
}

winform.show();
win.loopMessage();
return winform;

再复杂一点点.

上面动态图看着还不错, 但是事实上这样用还是有点点问题的,

首先进度条的提示框在最左边的时候可以明显看出有图片压缩到头部的痕迹,

还有就是0%的时候还是显示了绿色的进度条, 具体的可以去试试代码就了解下.

用到的图如下:

psd图层格式图片如下:

progress.zip

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=484;bottom=285)
winform.add(
button={cls="button";text="执行一次";left=76;top=157;right=413;bottom=211;font=LOGFONT(h=-21);z=2};
progress={cls="plus";text="0%";left=53;top=66;right=435;bottom=104;align="right";background="\res\yybg.png";color=16777215;font=LOGFONT(h=-11);foreRepeat="expand";foreRight=33;foreground="\res\yyqj.png";textPadding={top=3};valign="top";z=1}
)
/*}}*/

//设置进度值
//winform.progress.setProgressRange(1,100)
winform.progress.setTrackbarRange(0,1000)

//进度改变时会触发下面的函数,注意前景图的九宫格切图左边界应当指定为显示 1% 的宽度
winform.progress.onPosChanged = function( pos ){
	winform.progress.text =  winform.progress.progressPercentage + "% "
}

winform.button.oncommand = function(id,event){
    winform.progress.progressPos = 0;
	//创建一个定时器演示进度变化
	var tmId = winform.addtimer( 
		30,//间隔30毫秒,也就是0.03秒
		function(hwnd,msg,id,tick){
			//向后移动进度条3格,因为onPosChanged里修改文本会刷新,这里用参数@2禁止一次不必要的刷新
			var finished = winform.progress.stepProgress(3); 
			if( !finished ){
				//winform.progress.text = "已完成 "
				return 0;//进度已到了100%，返回0结束定时器
			}
		} 
	)
}

winform.show();
win.loopMessage();
return winform;

这样的情况是可以解决的.

今天先休息了, 明天有时间继续研究优化

赞#3不错。

暂且放下上面的问题不谈, 我们来设置圆形进度条

这里我们需要圆形素材的背景图和前景完成100%后的图片

和上面直线的不同地方在于,需要设置前景和背景图片的模式为:center

其他的默认即可

素材如下:

这个实现原理应该是,依据图片的圆心,以垂直半径开始顺时针绘制出前景图.

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=469;bottom=407;bgcolor=15780518)
winform.add(
button={cls="button";text="执行一次";left=67;top=336;right=404;bottom=390;font=LOGFONT(h=-21);z=2};
progress={cls="plus";text="50%";left=100;top=28;right=367;bottom=295;background="\res\wbg.png";color=7765899;font=LOGFONT(h=-27;name='方正兰亭超细黑简体';weight=700);foreRepeat="center";foreground="\res\wqj.png";repeat="center";z=1}
)
/*}}*/

//设置进度值
 winform.progress.setPieRange(1,1000);
//进度改变时会触发下面的函数,注意前景图的九宫格切图左边界应当指定为显示 1% 的宽度
winform.progress.onPosChanged = function( pos ){
    winform.progress.text =  winform.progress.progressPercentage + "% "
}
 
winform.button.oncommand = function(id,event){
    winform.progress.progressPos = 1;
    //创建一个定时器演示进度变化
    var tmId = winform.addtimer( 
        30,//间隔100毫秒,也就是0.1秒
        function(hwnd,msg,id,tick){
            //向后移动进度条3格,因为onPosChanged里修改文本会刷新,这里用参数@2禁止一次不必要的刷新
            var finished = winform.progress.stepProgress(3); 
            if( !finished ){
                //winform.progress.text = "已完成 "
                return 0;//进度已到了100%，返回0结束定时器
            }
        } 
    )
}
 
winform.show();
win.loopMessage();
return winform;

再来个简单点的圆形进度条

素材如下:

写到这, 突然想到实现 loading 的旋转动画应该怎么做?

素材图片如下:

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=488;bottom=397)
winform.add(
plus={cls="plus";left=145;top=87;right=233;bottom=169;foreRepeat="scale";foreground="\res\rr.png";notify=1;z=1}
)
/*}}*/

//绘制
winform.plus.onDrawContent = function(graphics,rc,color){ 
	if(owner.animationState) graphics.rotateRect(rc,owner.animationState);
}
//修改状态(旋转角)
winform.plus.onAnimation = function(state){
	state = state + 5;
	return (state<360)?state:1;
}
//开启动画
winform.plus.startAnimation(1,0)


winform.show();
win.loopMessage();
return winform;

如果, 你想要在打开软件显示界面之前显示这个加载动画, 那么可以添加

import win.ui.layered;
win.ui.layered(winform)

分层窗体只能显示plus控件, 所以, 效果就是, 桌面上会有一个透明的旋转动画

好东西啊

好教程，后面好好学习了。！

好教程，谢谢！

更新一个最简单的 忙状态进度条 样式.

gif图片如下,

怎么使用呢?

添加一个plus ,拖出一个长条状 , 背景图设置为上面的图片, 背景模式选择 tile 平铺 , 如果你需要也可以添加个边框 . 

然后效果如下: