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

By admin at 2022-07-14 • 0人收藏 • 1143人看过

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

这种方法详细的不多说, 请看范例和其他帖子 https://www.chengxu.xyz/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 个回复 | 最后更新于 2022-07-29
2022-07-14   #1

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

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

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

2022-07-19   #2

回复#1 @admin :

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

2022-07-29   #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 , 然后你就可以在黑窗体里看到这个图片路径, 接下来的操作你懂的......


登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...