floaty.window 位置变换动画,写一个完整例子 不要ui实现
第 1 条补充
· 2 个月前
要一个互斥的checkedbox 不要ui实现,写一个demo
第 2 条补充
· 2 个月前
写一个互斥的radio,不要ui实现
回答
文档地址 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 生成,内容仅供参考