自定义漂亮进度条的方法

By admin at 2019-02-16 • 1人收藏 • 2296人看过

首先准备两张大小一样的图片, 一个作为背景图片一个前景图片 , 其中背景图片用完全透明的就可以, 前景图片用进度达到100%之后的样式图片

例如:

窗口拖一个plus控件, 大小和上面的图片大小一致即可.

属性如下:

image.png

界面上添加一个按钮,用来点击产生进度动画

把范例里面的进度条代码复制到程序里:

//设置进度区间,可自动切换到进度条显示模式
winform.plus.setProgressRange(1,50);

winform.button.oncommand = function(id,event){
	winform.button.disabledText = "测试一下"
	winform.plus.startProgress(50); 
	
	win.delay(5000);
	winform.plus.stopProgress();
	winform.button.disabledText = null;
}


aardio对这类直线型进度条实现原理应该是: 展示背景图, 然后根据进度绘制前景图.


简易文字蒙板进度条:

使用方法看二楼:

GIF.gif

素材如下:

可编辑psd文件下载:

222.zip

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=484;bottom=285;bgcolor=12639424)
winform.add(
button={cls="button";text="执行一次";left=76;top=157;right=413;bottom=211;font=LOGFONT(h=-21);z=2};
progress={cls="plus";left=12;top=49;right=472;bottom=118;align="right";background="\res\2bg.png";color=16777215;font=LOGFONT(h=-11);foreRepeat="expand";foreRight=33;foreground="\res\2qj.png";textPadding={top=3};valign="top";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(2); 
			if( !finished ){
				//winform.progress.text = "已完成 "
				return 0;//进度已到了100%,返回0结束定时器
			}
		} 
	)
}

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


7 个回复 | 最后更新于 2020-02-07
2019-11-26   #1

GIF.gif

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

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

只需要两幅图片

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

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

image.png

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

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

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~

2019-11-26   #2

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

GIF.gif

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

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

winform.progress.setProgressRange(1,100)

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

哈, 这里投机 , 利用了

winform.progress.setTrackbarRange(1,100)

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

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


步骤:

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

image.png

前景切图, 切的是什么?

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

image.png

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;


2019-11-26   #3

再复杂一点点.

GIF2.gif

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

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

还有就是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;

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

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

2019-11-27   #4

#3不错。

2019-11-27   #5

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

GIF.gif

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

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

blob.png

其他的默认即可

素材如下:

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

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;


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

GIF.gif

素材如下:


2019-11-27   #6

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

GIF.gif


素材图片如下:

rr.png

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控件, 所以, 效果就是, 桌面上会有一个透明的旋转动画

image.png

2019-12-08   #7

好东西啊

登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...