一个仿手机灵动岛的设计

nanyi 1天前 63

import win.ui; 
import fonts.fontAwesome;
/*DSG{{*/
var mainForm = win.form(text="aardio form";right=371;bottom=469;bgcolor=0x40681A;composited=1)
mainForm.add(
plusBtn={cls="plus";text='\uF054';left=318;top=426;right=351;bottom=454;color=0xF0FBFF;font=LOGFONT(h=-18;name='FontAwesome');notify=1;z=4};
plusDynamicIsland={cls="plus";left=61;top=39;right=313;bottom=78;bgcolor=0x1C2E0B;border={radius=25};z=5};
plusDynamicIslandIcon={cls="plus";text='\uF120';left=94;top=44;right=126;bottom=76;color=0xFFFFFF;font=LOGFONT(h=-27;name='FontAwesome');foreRepeat="stretch";transparent=1;z=2};
plusSyncingProgress={cls="plus";left=81;top=75;right=291;bottom=77;bgcolor=0x2B4811;border={radius=2};forecolor=0x00C024;z=1};
staDynamicIsland={cls="static";text="Hi.";left=149;top=43;right=301;bottom=75;center=1;color=0xFFFFFF;db=1;dr=1;font=LOGFONT(h=-19;name='HarmonyOS Sans');transparent=1;z=3};
staTime={cls="static";left=51;top=146;right=322;bottom=219;align="center";color=0xFFFFFF;font=LOGFONT(h=-32);transparent=1;z=6}
)
/*}}*/

// 定义所有状态 🎨
var dynamicIslandEvents = {
    Default = { icon = '\uF120'; iconColor = 0xFFFFFF; strColor = 0xFFFFFF; str = "Hi." };   //白色
    Syncing = { icon = '\uF01A'; iconColor = 0x23AE5B; strColor = 0xFFFFFF; str = "Syncing" }; //鹦鹉绿
    Speaker={ icon = '\uF027'; iconColor = 0x29B9FB; strColor = 0xFFFFFF; str = "Speaker" };    //鹅掌黄
    Pushing = { icon = '\uF09E'; iconColor = 0xB87721; strColor = 0xFFFFFF; str = "Pushing" };  //虹蓝
    Message= { icon = '\uF0E5'; iconColor = 0x9CAA12; strColor = 0xFFFFFF; str = "Message" };  // 美蝶绿
    Error   = { icon = '\uF05A'; iconColor = 0x1C39F5; strColor = 0xFFFFFF; str = "Error" }  // 铁水红
}

// 封装设置 Dynamic Island 的函数 ✨
setDynamicIsland=function(stateName){
    var state = dynamicIslandEvents[stateName]
    if(!state){
        return false;
    }
    mainForm.plusDynamicIslandIcon.color = state.iconColor
    mainForm.plusDynamicIslandIcon.text   = state.icon
    mainForm.staDynamicIsland.text        = state.str
    mainForm.staDynamicIsland.color       = state.strColor
}

// 🎯 进度条配置参数 - 改为变量以便动态修改
var timerInterval = 10000; // 主定时器间隔(10秒)
var progressUpdateInterval = 50; // 进度条更新间隔(50毫秒)
var maxProgress = 100; // 进度条最大值
var currentProgress = maxProgress; // 当前进度(从100%开始倒计时)
var isNetworkRequesting = false; // 网络请求状态标志
var progressPaused = false; // 进度条暂停标志

// 🚀 **关键修复**:使用毫秒级高精度时间
var cycleStartTime = 0; // 记录每个周期开始时间(毫秒)

// 设置进度条范围
mainForm.plusSyncingProgress.setProgressRange(0, maxProgress);
mainForm.plusSyncingProgress.progressPos = currentProgress;

// 🎬 进度条平滑更新定时器(修复版)
var progressTimerId = mainForm.setInterval(function(){
    if(progressPaused || isNetworkRequesting) {
        return; // 暂停或网络请求中时不更新进度条
    }
    
    if(cycleStartTime > 0) { // 只有在周期开始后才更新进度条
        var currentTime = tonumber(time.tick()); // 获取系统启动后的毫秒数
        var elapsedTime = currentTime - cycleStartTime; // 已经过时间(毫秒)
        var remainingProgress = maxProgress * (1 - elapsedTime / timerInterval);
        if(remainingProgress > 0) {
            currentProgress = remainingProgress;
        } else {
            currentProgress = 0;
        }
        
        // 平滑更新进度条
        mainForm.plusSyncingProgress.progressPos = math.max(0, math.floor(currentProgress));
    }
}, progressUpdateInterval);

getCt = function(){
    import web.rest.jsonClient;
    var http = web.rest.jsonClient();
    http.timeout = 5000; // 设置5秒超时
    var ct, err = http.get("https://f.m.suning.com/api/ct.do");
    if(ct && ct.currentTime) {
        return ct;
    } else {
        return null; // 数据格式错误
    }
    thread.delay(500)
}

// 🔄 重置进度条函数(修复版)
resetProgress = function(){
    cycleStartTime = tonumber(time.tick()); // 🎯 使用毫秒精度时间戳
    currentProgress = maxProgress;
    mainForm.plusSyncingProgress.progressPos = currentProgress;
    progressPaused = false;
}

// 📡 网络数据同步函数(带状态管理)
syncNetworkData = function(){
    if(isNetworkRequesting) {
        return; // 如果正在请求中,跳过
    }
    
    isNetworkRequesting = true;
    // 🚀 **关键修复**:在网络请求开始时重置进度条
    resetProgress();
    
    // 设置同步状态 🔄
    setDynamicIsland("Syncing");
    
    // 网络请求
    var ct = getCt();
    
    if(ct) {
        // 请求成功 ✅
        mainForm.staTime.text = ct.currentTime;
        setDynamicIsland("Default"); // 回到默认状态
        isNetworkRequesting = false;
    } else {
        // 请求失败处理 ❌
        setDynamicIsland("Error");
        progressPaused = true;
        isNetworkRequesting = false;
        
        // 3秒后自动恢复
        mainForm.setTimeout(function(){
            if(progressPaused) { // 确保还在错误状态
                setDynamicIsland("Default");
                progressPaused = false;
            }
        }, 3000);
    }
}

// 🕐 主定时器 - 控制整个同步周期
var mainTimerId = mainForm.setInterval(function(){
    syncNetworkData();
}, timerInterval);

// 🚀 延迟启动,让定时器和进度条完全同步
mainForm.setTimeout(function(){
    syncNetworkData(); // 第一次同步
}, 100);



// 按钮点击演示不同状态切换
mainForm.plusBtn.oncommand = function(id,event){
    setDynamicIsland("Error")
    thread.delay(1000)
    setDynamicIsland("Syncing")
    thread.delay(1000)
    setDynamicIsland("Pushing")
    thread.delay(1000)
    setDynamicIsland("Speaker")
    thread.delay(1000)
    setDynamicIsland("Message")
    thread.delay(1000)
    setDynamicIsland("Default")
}

mainForm.show();
win.loopMessage();

代码使用ai编写,主要应用场景在于一些全屏UI下,带有计划任务的一些需求。使用进度条和不同类型fontAwesome图标,可以让用户了解当前的工作状态。

最新回复 (0)
返回