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

By admin at 29 天前 • 0人收藏 • 333人看过

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

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


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

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


这样做有一些好处:

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


发散下思维:

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


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

GIF可不止于进度条哦



screenshots.gif

GIF.gif

GIF.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

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="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图片:

66.gif

3 个回复 | 最后更新于 14 天前
29 天前   #1

仔细想了一下, 貌似理想是丰满的, 现实是骨感的

很多漂亮的动态gif , 一般是有个一直循环运动的地方, 然后显示进度的是根据数值来, 那么利用上面的方式应该实现不了, 因为gif被暂停了, 那就意味着里面不会有一直再动的那部分..........

ok, 此方式放弃. 仅作记录.

24 天前   #2

回复#1 @admin :

思路还是挺值得借鉴的,利用gif可以藏图片的功能,应该可以实现一些其他应用。虽然目前还没想到可以用在哪

14 天前   #3

想请教一下把软件设置gif的默认打开方式之后,怎么实现双击gif打开软件并自动加载gif



回答:

新建winform空白工程那个里面已经写了. 

import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程6";right=959;bottom=591)
mainForm.add(
edit={cls="edit";left=12;top=520;right=949;bottom=579;db=1;dl=1;dr=1;dt=1;edge=1;multiline=1;z=1}
)
/*}}*/
 
import console
console.open()
 
console.dump(_ARGV)
 
if(_ARGV.opt){
    mainForm.edit.print(_ARGV.opt,_ARGV[#_ARGV]);
}
 
mainForm.show();
return win.loopMessage();

比如我在一个图片上右键选择[打开方式...],选择我这个编译好的exe , 然后你就可以在黑窗体里看到这个图片路径, 接下来的操作你懂的......


登录后方可回帖

登 录
信息栏
公告:
个人博客
专注分享
可在分享中适当提问
谢绝纯提问
否则不再提醒一律
删帖
谢谢合作!



本站域名:HtmLayout.Cn
aardio可以快速开发上位机,本站主要记录了学习过程中遇到的问题和解决办法及aardio代码分享

这里主要专注于aardio学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.

Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
本 站 主 站:Stm32cube中文网
Sciter中文在线文档Sciter在线学习文档
空间赞助:才仁机械
Loading...