MainLeftTop = {}
function MainLeftTop.main()
local bool = SL:GetMetaValue("IS_PC_PLAY_MODE")
if bool then
SL:Print("PC端")
MainLeftTop.client = {831, -5}
MainLeftTop.status = false
else
SL:Print("手机端")
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-05-08 12:55:00 |
👁️ 阅读: 7
看了你的代码，主要想实现一个可展开/收起的侧边栏功能。代码逻辑是清晰的，但确实可以简化。主要问题是动画处理有些复杂，特别是子控件和Panel_1的动画协调。
根据浮生梦老师前端课程内容，这里有几个优化点：
1. **简化动画逻辑**：不需要分别处理子控件和父容器的淡入淡出，直接控制父容器即可
2. **避免多层嵌套回调**：使用更简洁的动画完成处理
3. **状态管理优化**：直接切换状态，减少重复代码
这是简化后的版本：
```lua
MainLeftTop = {}
function MainLeftTop.main()
local bool = SL:GetMetaValue("IS_PC_PLAY_MODE")
if bool then
SL:Print("PC端")
MainLeftTop.client = {831, -5}
MainLeftTop.status = false
else
SL:Print("手机端")
MainLeftTop.client = {831, -35}
MainLeftTop.status = true
end
MainLeftTop.createUI()
end
local function toggleExpand()
-- 切换状态
MainLeftTop.status = not MainLeftTop.status
MainLeftTop.updateUI()
end
function MainLeftTop.createUI()
local parent = GUI:Attach_LeftTop()
GUI:removeAllChildren(parent)
GUI:LoadExport(parent, "main/main_left_top")
local ui = GUI:ui_delegate(parent)
MainLeftTop.ui = ui
-- 绑定点击事件
GUI:addOnClickEvent(ui.Button_2, toggleExpand)
GUI:addOnClickEvent(ui.Button_1, toggleExpand)
-- 设置初始位置
GUI:setPosition(ui.Node_1, MainLeftTop.client[1], MainLeftTop.client[2])
-- 初始化UI状态
MainLeftTop.updateUI()
end
function MainLeftTop.updateUI()
local ui = MainLeftTop.ui
if not ui then return end
SL:Print("状态:", MainLeftTop.status, "坐标:", MainLeftTop.client[1], MainLeftTop.client[2])
if MainLeftTop.status then
-- 展开状态
GUI:setVisible(ui.Panel_1, true)
GUI:setVisible(ui.Button_1, false)
GUI:setVisible(ui.Button_2, true)
-- 淡入动画
GUI:setOpacity(ui.Panel_1, 0)
GUI:Timeline_FadeIn(ui.Panel_1, 0.5)
else
-- 收起状态
GUI:setVisible(ui.Button_1, true)
GUI:setVisible(ui.Button_2, false)
-- 淡出动画
GUI:Timeline_FadeOut(ui.Panel_1, 0.5, function()
GUI:setVisible(ui.Panel_1, false)
GUI:setOpacity(ui.Panel_1, 255) -- 重置透明度
end)
end
end
```
**主要改进：**
1. **移除了Top_init函数**，拆分为`createUI`和`updateUI`两个函数
2. **简化了动画逻辑**：只对Panel_1做淡入淡出，子控件会自动跟随父容器
3. **减少回调嵌套**：收起时只有一个动画回调
4. **状态管理更清晰**：使用`MainLeftTop.ui`保存UI引用
**关键函数说明：**
- `GUI:Timeline_FadeIn(widget, time, callback)` - 淡入动画
- `GUI:Timeline_FadeOut(widget, time, callback)` - 淡出动画
- `GUI:setOpacity(widget, value)` - 设置透明度（0-255）
- `GUI:setVisible(widget, bool)` - 设置可见性
这样代码更简洁，逻辑也更清晰，减少了不必要的复杂动画协调。记得在淡出动画完成后重置透明度，这样下次展开时才能正常显示。
← 返回问答库