floaty.window 位置变换动画,写一个完整例子 不要ui实现

已存档
兔如花
9
· 2 个月前
第 1 条补充
·
2 个月前

要一个互斥的checkedbox 不要ui实现,写一个demo

第 2 条补充
·
2 个月前

写一个互斥的radio,不要ui实现

回答

Hamibot AI
1
· 2 个月前

文档地址 https://docs.hamibot.com/

// 创建悬浮窗
var window = floaty.window(
    <frame>
        <text id="text" bg="#FF0000" text="动画文本" />
    </frame>
);

// 设置初始位置
window.setPosition(100, 500);

// 定义动画函数
function animatePosition(targetX, targetY, duration) {
    var startX = window.getX();
    var startY = window.getY();
    var startTime = new Date().getTime();

    setInterval(function () {
        var now = new Date().getTime();
        var elapsed = now - startTime;
        var progress = Math.min(elapsed / duration, 1);

        // 线性插值计算新位置
        var newX = startX + (targetX - startX) * progress;
        var newY = startY + (targetY - startY) * progress;
        window.setPosition(newX, newY);

        if (progress === 1) {
            clearInterval(this);
        }
    }, 16); // 每帧间隔时间,约每秒60帧
}

// 执行动画:移动到 (300, 200),持续2秒
animatePosition(300, 200, 2000);

// 5秒后关闭悬浮窗
setTimeout(function () {
    window.close();
}, 5000);

补充回答 1

文档地址 https://docs.hamibot.com/

// 创建一个包含两个互斥单选框的悬浮窗
var window = floaty.window(
    <vertical>
        <checkbox id="option1" text="选项 A" checkedChangeListener={changeListener} />
        <checkbox id="option2" text="选项 B" checkedChangeListener={changeListener} />
    </vertical>
);

// 设置悬浮窗位置并显示
window.setPosition(100, 500);
window.setSize(300, -1); // 宽度300像素,高度自适应

function changeListener(comp, checked) {
    if (comp.id === "option1" && checked) {
        // 如果选项A被选中,则取消选项B的选中状态
        window.option2.setChecked(false);
    } else if (comp.id === "option2" && checked) {
        // 如果选项B被选中,则取消选项A的选中状态
        window.option1.setChecked(false);
    }
}

// 提供一个关闭悬浮窗的定时器,例如5秒后关闭
setTimeout(function () {
    window.close();
}, 5000);

补充回答 2

文档地址 https://docs.hamibot.com/

// 创建包含两个 RadioButton 的悬浮窗
var window = floaty.window(
    <vertical>
        <radiobutton id="radio1" text="选项 A" checkedChangeListener={radioListener} />
        <radiobutton id="radio2" text="选项 B" checkedChangeListener={radioListener} />
    </vertical>
);

// 设置悬浮窗位置和大小
window.setPosition(100, 500);
window.setSize(300, -1); // 高度自适应

// 单选逻辑处理
function radioListener(comp, checked) {
    if (comp.id === "radio1" && checked) {
        window.radio2.setChecked(false);
    } else if (comp.id === "radio2" && checked) {
        window.radio1.setChecked(false);
    }
}

// 5秒后关闭悬浮窗
setTimeout(function () {
    window.close();
}, 5000);
ℹ️ 本回答由 AI 生成,内容仅供参考