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

卢光庆

已于 2025-02-07 10:31:34 修改

阅读量876

点赞数 26

分类专栏： aardio 文章标签： aardio

于 2025-02-07 09:46:24 首次发布

本文链接：https://blog.youkuaiyun.com/sdlgq/article/details/145488046

版权

aardio 专栏收录该内容

252 篇文章

订阅专栏

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

演示效果一：

演示效果二：

演示代码一：

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();