控制GIF图的显示帧来实现模拟进度条的方法

Plus控件可以直接模拟进度条来实现美化进度显示的功能 , 

这种方法详细的不多说, 请看范例和其他帖子 https://www.chengxu.xyz/t/251

下面要讲的方法是利用了gif动图 , 直接控制gif里的图片帧, 输入相应的帧序号来显示进度或者做其他的事情.

公所周知, gif里是压缩了多个图片通过控制帧率来显示一副完整的动画的, 那么我们如果提取它的每一帧, 是不是就可以随心所欲的控制动画了?

这样做有一些好处:

plus模拟的进度条想要实现一些复杂点样式需要自绘, 并且有一定的审美才行. 而网络上很多gif动图可以使用, 不用费心的去自绘 . 同时也能非常简单的实现一些非常漂亮的进度条外观.

发散下思维:

我们控制的是每一帧显示, 那么就可以不按照gif的顺序来显示, 想要显示哪帧就设置哪个, 那么我们就可以实现一副图片里却能显示很多种类的状态 , 这是不是意味着同时也类似压缩了图像大小 , 用同一幅图也利于管理.

下面是一个简单的进度条演示, 你可以发挥自己的想象实现更多的功能 .

GIF可不止于进度条哦

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=447;bottom=459)
winform.add(
button={cls="button";text="下一帧";left=129;top=358;right=437;bottom=398;db=1;dl=1;dr=1;z=2};
button2={cls="button";text="随机帧";left=9;top=410;right=437;bottom=450;db=1;dl=1;dr=1;z=3};
plus={cls="plus";left=9;top=10;right=439;bottom=349;db=1;dl=1;dr=1;dt=1;edge=1;repeat="center";z=1};
static={cls="static";left=9;top=358;right=66;bottom=398;align="center";center=1;db=1;dl=1;edge=1;font=LOGFONT(h=-21);transparent=1;z=4};
static2={cls="static";left=71;top=358;right=125;bottom=398;align="center";center=1;db=1;dl=1;edge=1;font=LOGFONT(h=-21);transparent=1;z=5}
)
/*}}*/

import gdip;
var img = gdip.bitmap("\loading.gif");

winform.plus.animation = false;
winform.plus.background = img;
winform.static.text = img.totalFrames;

var index = 1;
winform.static2.text = index;
winform.button.oncommand = function(id,event){
	index++;
	if(index>img.totalFrames){
		index = 1;
	}
	
	img.selectActiveFrame(index);
	winform.plus.redraw();
	winform.static2.text = index;
}

winform.button2.oncommand = function(id,event){
	index = math.random(1,img.totalFrames);
	
	img.selectActiveFrame(index);
	winform.plus.redraw();
	winform.static2.text = index;
}

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

演示功能下载:

loading.zip

只是玩, 更新个拖动来控制gif的例子实现trackbar

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=447;bottom=459)
winform.add(
button={cls="button";text="下一帧";left=129;top=358;right=437;bottom=398;db=1;dl=1;dr=1;z=2};
button2={cls="button";text="随机帧";left=9;top=410;right=437;bottom=450;db=1;dl=1;dr=1;z=3};
plus={cls="plus";left=9;top=10;right=439;bottom=349;db=1;dl=1;dr=1;dt=1;edge=1;repeat="scale";z=1};static={cls="static";left=9;top=358;right=66;bottom=398;align="center";center=1;db=1;dl=1;edge=1;font=LOGFONT(h=-21);transparent=1;z=4};
static2={cls="static";left=71;top=358;right=125;bottom=398;align="center";center=1;db=1;dl=1;edge=1;font=LOGFONT(h=-21);transparent=1;z=5}
)
/*}}*/

import gdip;
var img = gdip.bitmap("\66.gif");

winform.plus.animation = false;
winform.plus.background = img;
winform.static.text = img.totalFrames;

var index = 1;
winform.static2.text = index;
winform.button.oncommand = function(id,event){
	index++;
	if(index>img.totalFrames){
		index = 1;
	}
	
	img.selectActiveFrame(index);
	winform.plus.redraw();
	winform.static2.text = index;
}

winform.button2.oncommand = function(id,event){
	index = math.random(1,img.totalFrames);
	
	img.selectActiveFrame(index);
	winform.plus.redraw();
	winform.static2.text = index;
}

winform.plus.setTrackbarRange(1,img.totalFrames);
winform.plus.onPosChanged = function( pos,thumbTrack ){
	if(thumbTrack){  
		img.selectActiveFrame(pos);
		winform.plus.redraw();
		winform.static2.text = pos;
	}
}


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

所用到的gif图片: