虚表 —— 图标高级移动动画效果-虚表专题-Aardio资源网

虚表 —— 图标高级移动动画效果

光庆 13天前 301

快来感受图标高级移动动画带来的震撼效果吧

演示效果一：

演示效果二：

演示代码一：

import win.ui;
import godking.vlistEx;
/*DSG{{*/
var winform = win.form(text="图标矩阵";right=600;bottom=400;bgcolor=16777215)
winform.add(
grid={cls="vlistEx";left=10;top=10;right=590;bottom=390;bgcolor=16777215;db=1;dl=1;dr=1;dt=1;z=1}
)
/*}}*/

// 添加图片
import inet.http
import godking.paint
var imgs = godking.paint.splitImage("https://aardio.online/upload/files/20250124/1737707732.png",5,5,0,0,0,0);
for(i=1;#imgs;1){
	winform.grid.addImg("img"+i/*图片名称*/,imgs[i]/*图片文件*/,false/*是否替换*/);
}

// 定义图标数据
var iconData = {
    { "img1", "img3" },
    { "img5", "img7" },
}

// 定义标签文本
var title = {
    { "图标1-1", "图标1-2"},
    { "图标2-1", "图标2-2"},
}

// 设置数据表
winform.grid.setTable(iconData,null,100,1);

// 隐藏滚动条和表头
winform.grid.hideScroll(true/*隐藏横向滚动条*/,true/*隐藏纵向滚动条*/,true/*禁用滚轮和键盘滚动*/);
winform.grid.setHeaderHeight(0);

// 设置行高与样式
winform.grid.setRowHeight(100);         // 行高100像素
winform.grid.lineWidthV = null;         // 隐藏垂直分隔线
winform.grid.selectedBkColor = null;    // 禁用选中背景色
winform.grid.padding = 0;				// 单元格内边距

// 设置列类型为自绘
winform.grid.setColumnType(, 6/*_vlistEx_ColType_OwnerDraw*/ );

// 定义动画相关属性变量
var list,tos,oldrow,oldcol = {},{};

// 定义动画刷新时钟
import win.timer
var timer = ..win.timer(winform);
timer.onTimer = function(){
	thread.lock("list");
	var rows = {};
	for(k,v in list){
		rows[v[1]] = true;
		list[k][3]++;
		if list[k][3]>5 list[k]=null;			
	}
	for(i=#tos;1;-1){
		tos[i][4]++;
		rows[tos[i][5]] = true;
		rows[tos[i][6]] = true;
		if tos[i][4]>10 ..table.remove(tos,i);
	}
	
	for(k,v in rows){
		winform.grid.redrawRow(k);
	}	
	if !..table.count(list) and !..table.count(tos) owner.disable();
	thread.unlock("list");
}

// 定义单元格内容绘制函数
winform.grid.ownerDraw = function (row,col,hdc,x,y,w,h,param,...){
	var p = godking.paint.fromHdc(hdc);
	var rect = ::RECT(x,y,x+w,y+h-20).inflate(-15,-15);
	thread.lock("list");
	if list[row*1000+col] {
    	var pad = 5-..math.abs(list[row*1000+col][3]);
    	rect.inflate(pad,pad);
	}
	thread.unlock("list");
	p.drawImage(rect /*绘制范围RECT*/,owner.getImg(param)/*图片*/,/*透明度或图片属性*/,true/*保持比例*/);
	var rect = ::RECT(x,y+h-20,x+w,y+h);
	p.drawText(rect /*文本范围RECT*/,title[row][col],owner.font,0/*格式*/,1/*水平*/,1/*垂直*/,false/*截短*/);
	thread.lock("tos");
	for(i=#tos;1;-1){
    	var offsetx = (tos[i][2].left - tos[i][1].left ) * tos[i][4] /10;
    	var offsety = (tos[i][2].top - tos[i][1].top ) * tos[i][4] /10;
    	var op = 1 - tos[i][4] /10;
    	var rect = ..table.clone(tos[i][1]).offset(offsetx,offsety);
    	p.drawImage(rect /*绘制范围RECT*/,owner.getImg(tos[i][3])/*图片*/,op/*透明度或图片属性*/,true/*保持比例*/);
	}
	thread.unlock("tos");
	p.close();
}

// 定义鼠标移动到不同单元格时触发动画时钟
winform.grid.onMouseMove = function (x,y,row,col){
	if oldrow!==row or oldcol!==col {
		if oldrow and oldcol and row and col {
			var rect1 = winform.grid.getCellRect(oldrow,oldcol).inflate(-10,-10);
			var rect2 = winform.grid.getCellRect(row,col).inflate(-10,-10);
			rect1.bottom -= 20;
			rect2.bottom -= 20;
			thread.lock("list1");
			..table.push(tos,{rect1,rect2,iconData[oldrow][oldcol],1,row,oldrow});
			thread.unlock("list1");
		}		
		oldrow = row;
		oldcol = col;
		if row and col {
			thread.lock("list");
			list[row*1000+col] = {row,col,-5};
			thread.unlock("list");
			timer.enable(30);
		}
	}
}

// 鼠标离开
winform.grid.onMouseLeave = function (){
		oldrow = 0;
		oldcol = 0;
}

// 点击事件处理（支持多行多列）
winform.grid.onClick = function(row, col, x, y, buttonIndex) {
	if row and col {
	    win.msgbox("点击了第" + row + "行第" + col + "列：" + title[row][col]);
	}
}

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

演示代码二：

import win.ui;
import godking.vlistEx;
/*DSG{{*/
var winform = win.form(text="图标矩阵";right=600;bottom=400;bgcolor=16777215)
winform.add(
grid={cls="vlistEx";left=10;top=10;right=590;bottom=390;bgcolor=16777215;db=1;dl=1;dr=1;dt=1;z=1}
)
/*}}*/

// 添加图片
import inet.http
import godking.paint
var imgs = godking.paint.splitImage("https://aardio.online/upload/files/20250207/1738894054.png",6,6,0,0,0,0);
for(i=1;#imgs;1){
	winform.grid.addImg("img"+i/*图片名称*/,imgs[i]/*图片文件*/,false/*是否替换*/);
}

// 定义图标数据
var iconData = {
    { "img1","img2","img3","img4","img5","img6","img7","img8"}
}

// 定义标签文本
var title = {
	{ "img1","img2","img3","img4","img5","img6","img7","img8"}
}

// 设置数据表
winform.grid.setTable(iconData,null,70,1);

// 隐藏滚动条和表头
winform.grid.hideScroll(true/*隐藏横向滚动条*/,true/*隐藏纵向滚动条*/,true/*禁用滚轮和键盘滚动*/);
winform.grid.setHeaderHeight(0);

// 设置行高与样式
winform.grid.setRowHeight(80);         // 行高100像素
winform.grid.lineWidthV = null;         // 隐藏垂直分隔线
winform.grid.lineWidthH = null;         // 隐藏水平分隔线
winform.grid.selectedBkColor = null;    // 禁用选中背景色
winform.grid.padding = 0;				// 单元格内边距

// 设置列类型为自绘
winform.grid.setColumnType(, 6/*_vlistEx_ColType_OwnerDraw*/ );

// 定义动画相关属性变量
var list,tos,oldrow,oldcol = {},{};

// 定义动画刷新时钟
import win.timer
var timer = ..win.timer(winform);
timer.onTimer = function(){
	thread.lock("list");
	var rows = {};
	for(k,v in list){
		rows[v[1]] = true;
		list[k][3]++;
		if list[k][3]>5 list[k]=null;			
	}
	for(i=#tos;1;-1){
		tos[i][4]++;
		rows[tos[i][5]] = true;
		rows[tos[i][6]] = true;
		if tos[i][4]>10 ..table.remove(tos,i);
	}
	
	for(k,v in rows){
		winform.grid.redrawRow(k);
	}	
	if !..table.count(list) and !..table.count(tos) owner.disable();
	thread.unlock("list");
}

// 定义单元格内容绘制函数
winform.grid.ownerDraw = function (row,col,hdc,x,y,w,h,param,...){
	var p = godking.paint.fromHdc(hdc);
	var rect = ::RECT(x,y,x+w,y+h-20).inflate(-15,-15);
	thread.lock("list");
	if list[row*1000+col] {
    	var pad = 5-..math.abs(list[row*1000+col][3]);
    	rect.inflate(pad,pad);
	}
	thread.unlock("list");
	p.drawImage(rect /*绘制范围RECT*/,owner.getImg(param)/*图片*/,/*透明度或图片属性*/,true/*保持比例*/);
	var rect = ::RECT(x,y+h-20,x+w,y+h);
	p.drawText(rect /*文本范围RECT*/,title[row][col],owner.font,0/*格式*/,1/*水平*/,1/*垂直*/,false/*截短*/);
	thread.lock("tos");
	for(i=#tos;1;-1){
    	var offsetx = (tos[i][2].left - tos[i][1].left ) * tos[i][4] /10;
    	var offsety = (tos[i][2].top - tos[i][1].top ) * tos[i][4] /10;
    	var op = 1 - tos[i][4] /10;
    	var rect = ..table.clone(tos[i][1]).offset(offsetx,offsety);
    	p.drawImage(rect /*绘制范围RECT*/,owner.getImg(tos[i][3])/*图片*/,op/*透明度或图片属性*/,true/*保持比例*/);
	}
	thread.unlock("tos");
	p.close();
}

// 定义鼠标移动到不同单元格时触发动画时钟
winform.grid.onMouseMove = function (x,y,row,col){
	if oldrow!==row or oldcol!==col {
		if oldrow and oldcol and row and col {
			var rect1 = winform.grid.getCellRect(oldrow,oldcol).inflate(-10,-10);
			var rect2 = winform.grid.getCellRect(row,col).inflate(-10,-10);
			rect1.bottom -= 20;
			rect2.bottom -= 20;
			thread.lock("list1");
			..table.push(tos,{rect1,rect2,iconData[oldrow][oldcol],1,row,oldrow});
			thread.unlock("list1");
		}		
		oldrow = row;
		oldcol = col;
		if row and col {
			thread.lock("list");
			list[row*1000+col] = {row,col,-5};
			thread.unlock("list");
			timer.enable(30);
		}
	}
}

// 鼠标离开
winform.grid.onMouseLeave = function (){
		oldrow = 0;
		oldcol = 0;
}

// 点击事件处理（支持多行多列）
winform.grid.onClick = function(row, col, x, y, buttonIndex) {
	if row and col {
	    win.msgbox("点击了第" + row + "行第" + col + "列：" + title[row][col]);
	}
}

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

最新回复 (3)

xiaobai 13天前

0 引用 2楼

这也太炫了
zhhyit 13天前

0 引用 3楼

炫酷吊炸天
近我者赤 13天前

0 引用 4楼

下面的文字能不能也炫一下啊？？

发新帖

光庆

主题数
199

帖子数
437

精华数
0

注册排名
2

虚表 —— 图标高级移动动画效果

光庆

作者最近主题：