做一个伸缩按钮界面,两个 主按钮,每个主按钮下有三个子按钮,当一个主按钮展开,另一个主按钮缩回(要求用平移动画)
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-30 16:35:36 |
👁️ 阅读: 16
根据浮生梦老师前端课程内容，我来帮你实现一个带平移动画的伸缩按钮界面。这个功能需要用到布局管理、动画和触摸事件的配合。
```lua
-- 创建主界面
local mainWindow = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 主按钮数据
local mainButtons = {
{
id = "main_btn_1",
x = 100,
y = 300,
icon = "res/public/1900000612.png",
subButtons = {
{id = "sub_1_1", icon = "res/public/1900000612.png", offsetY = 60},
{id = "sub_1_2", icon = "res/public/1900000612.png", offsetY = 120},
{id = "sub_1_3", icon = "res/public/1900000612.png", offsetY = 180}
}
},
{
id = "main_btn_2",
x = 200,
y = 300,
icon = "res/public/1900000612.png",
subButtons = {
{id = "sub_2_1", icon = "res/public/1900000612.png", offsetY = 60},
{id = "sub_2_2", icon = "res/public/1900000612.png", offsetY = 120},
{id = "sub_2_3", icon = "res/public/1900000612.png", offsetY = 180}
}
}
}
-- 存储按钮状态
local buttonStates = {
currentOpen = nil, -- 当前展开的主按钮ID
subButtons = {} -- 存储子按钮对象
}
-- 创建主按钮
for i, mainBtnData in ipairs(mainButtons) do
local mainBtn = GUI:Button_Create(mainWindow, mainBtnData.id, mainBtnData.x, mainBtnData.y, mainBtnData.icon)
GUI:Button_setTitleText(mainBtn, "主按钮" .. i)
GUI:setContentSize(mainBtn, 80, 80)
GUI:setIgnoreContentAdaptWithSize(mainBtn, false)
GUI:setAnchorPoint(mainBtn, 0.5, 0.5)
GUI:setTouchEnabled(mainBtn, true)
-- 创建子按钮容器
local subContainer = GUI:Layout_Create(mainWindow, mainBtnData.id .. "_container", mainBtnData.x, mainBtnData.y, 80, 80, false)
GUI:setVisible(subContainer, false)
GUI:setTouchEnabled(subContainer, false)
-- 创建子按钮
for j, subBtnData in ipairs(mainBtnData.subButtons) do
local subBtn = GUI:Button_Create(subContainer, subBtnData.id, 0, 0, subBtnData.icon)
GUI:Button_setTitleText(subBtn, "子" .. i .. "-" .. j)
GUI:setContentSize(subBtn, 60, 60)
GUI:setIgnoreContentAdaptWithSize(subBtn, false)
GUI:setAnchorPoint(subBtn, 0.5, 0.5)
GUI:setPosition(subBtn, 0, -subBtnData.offsetY) -- 初始位置在下方
GUI:setOpacity(subBtn, 0) -- 初始透明
GUI:setVisible(subBtn, true)
GUI:setTouchEnabled(subBtn, false)
-- 存储子按钮引用
buttonStates.subButtons[subBtnData.id] = {
widget = subBtn,
targetY = -subBtnData.offsetY,
mainBtnId = mainBtnData.id
}
-- 子按钮点击事件
GUI:addOnClickEvent(subBtn, function()
SL:print("点击了子按钮: " .. subBtnData.id)
end)
end
-- 主按钮点击事件
GUI:addOnClickEvent(mainBtn, function()
toggleMainButton(mainBtnData.id)
end)
end
-- 切换主按钮展开状态
function toggleMainButton(mainBtnId)
-- 如果点击的是当前已展开的按钮，则关闭它
if buttonStates.currentOpen == mainBtnId then
hideSubButtons(mainBtnId)
buttonStates.currentOpen = nil
return
end
-- 如果已经有展开的按钮，先关闭它
if buttonStates.currentOpen then
hideSubButtons(buttonStates.currentOpen)
end
-- 展开新的主按钮
showSubButtons(mainBtnId)
buttonStates.currentOpen = mainBtnId
end
-- 显示子按钮（平移动画）
function showSubButtons(mainBtnId)
for subId, subData in pairs(buttonStates.subButtons) do
if subData.mainBtnId == mainBtnId then
local widget = subData.widget
local parent = GUI:getParent(widget)
if not GUI:Win_IsNull(widget) and not GUI:Win_IsNull(parent) then
GUI:setVisible(parent, true)
GUI:setTouchEnabled(widget, true)
-- 平移动画：从下方移动到目标位置
GUI:runAction(widget,
GUI:ActionSequence(
GUI:ActionFadeTo(0.2, 255), -- 淡入
GUI:ActionMoveTo(0.3, 0, subData.targetY) -- 平移到目标位置
)
)
end
end
end
end
-- 隐藏子按钮（平移动画）
function hideSubButtons(mainBtnId)
for subId, subData in pairs(buttonStates.subButtons) do
if subData.mainBtnId == mainBtnId then
local widget = subData.widget
local parent = GUI:getParent(widget)
if not GUI:Win_IsNull(widget) and not GUI:Win_IsNull(parent) then
-- 平移动画：移回下方并淡出
GUI:runAction(widget,
GUI:ActionSequence(
GUI:ActionMoveTo(0.3, 0, 0), -- 平移回原位
GUI:ActionFadeTo(0.2, 0), -- 淡出
GUI:CallFunc(function()
GUI:setTouchEnabled(widget, false)
GUI:setVisible(parent, false)
end)
)
)
end
end
end
end
-- 测试按钮
local testBtn = GUI:Button_Create(mainWindow, "test_reset", 300, 100, "res/public/1900000612.png")
GUI:Button_setTitleText(testBtn, "重置状态")
GUI:addOnClickEvent(testBtn, function()
if buttonStates.currentOpen then
hideSubButtons(buttonStates.currentOpen)
buttonStates.currentOpen = nil
SL:print("已重置所有按钮状态")
end
end)
SL:print("伸缩按钮界面创建完成！点击主按钮展开/收起子菜单")
```
**功能说明：**
1. **两个主按钮**：每个主按钮点击后会展开/收起自己的子按钮
2. **互斥展开**：当一个主按钮展开时，另一个会自动收起
3. **平移动画**：
- 展开时：子按钮从下方淡入并平移到目标位置
- 收起时：子按钮平移回下方并淡出
4. **触摸控制**：只有展开的子按钮才响应点击
**关键函数说明：**
- `GUI:ActionMoveTo(time, x, y)`：平移动画，在指定时间内移动到目标坐标
- `GUI:ActionFadeTo(time, opacity)`：淡入淡出动画，透明度从当前值渐变到目标值
- `GUI:ActionSequence(...)`：顺序播放多个动作
- `GUI:CallFunc(callback)`：在动画序列中执行回调函数
**使用技巧：**
- 可以调整`subButtons`中的`offsetY`值来改变子按钮的间距
- 动画时间参数（0.2、0.3）可以根据需要调整
- 背景图片可以替换为你自己的资源路径
这样实现的效果比较流畅，符合"一个展开时另一个自动收起"的需求，并且使用了平滑的平移动画！
← 返回问答库