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 11:56:55 |
👁️ 阅读: 9
看了你的代码，发现你在淡出处理上有个小问题。当 `status` 为 `false`（收起状态）时，你只对 `Panel_1` 的子控件执行了淡出动画，但没有处理 `Panel_1` 自身的淡出和最终的隐藏逻辑。
这会导致动画结束后，界面元素虽然透明了，但节点依然存在，可能影响交互。我们来完善一下：
```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
Top_init()
end
local function telescopic()
if MainLeftTop.status == true then
MainLeftTop.status = false
else
MainLeftTop.status = true
end
Top_init()
end
function Top_init()
SL:Print(MainLeftTop.client[1], MainLeftTop.client[2], MainLeftTop.status, "----------")
local parent = GUI:Attach_LeftTop()
GUI:removeAllChildren(parent)
GUI:LoadExport(parent, "main/main_left_top")
local ui = GUI:ui_delegate(parent)
GUI:addOnClickEvent(ui.Button_2, telescopic)
GUI:addOnClickEvent(ui.Button_1, telescopic)
local obj = GUI:getChildren(ui.Panel_1)
GUI:setPosition(ui.Node_1, MainLeftTop.client[1], MainLeftTop.client[2]) -- 设置坐标
if MainLeftTop.status == true then
-- 展开状态
GUI:setVisible(ui.Panel_1, true)
GUI:setVisible(ui.Button_1, false) -- 设置可见
GUI:setVisible(ui.Button_2, true) -- 设置可见
-- 子控件淡入
for _, v in pairs(obj) do
GUI:setOpacity(v, 0)
GUI:Timeline_FadeIn(v, 0.8, function()
end)
end
-- Panel_1自身淡入
GUI:setOpacity(ui.Panel_1, 0)
GUI:Timeline_FadeIn(ui.Panel_1, 0.8, function()
end)
else
-- 收起状态
GUI:setVisible(ui.Button_1, true) -- 设置可见
GUI:setVisible(ui.Button_2, false) -- 设置可见
-- 先确保Panel_1可见，否则淡出动画无效
GUI:setVisible(ui.Panel_1, true)
GUI:setOpacity(ui.Panel_1, 255) -- 确保完全不透明开始
-- 子控件淡出
local childCount = 0
local finishedCount = 0
for _, v in pairs(obj) do
childCount = childCount + 1
GUI:Timeline_FadeOut(v, 0.8, function()
finishedCount = finishedCount + 1
-- 所有子控件淡出完成后，再淡出Panel_1
if finishedCount >= childCount then
GUI:Timeline_FadeOut(ui.Panel_1, 0.5, function()
-- 淡出完成后隐藏Panel_1
GUI:setVisible(ui.Panel_1, false)
-- 重置透明度，为下次展开做准备
GUI:setOpacity(ui.Panel_1, 255)
end)
end
end)
end
-- 如果没有子控件，直接淡出Panel_1
if childCount == 0 then
GUI:Timeline_FadeOut(ui.Panel_1, 0.8, function()
GUI:setVisible(ui.Panel_1, false)
GUI:setOpacity(ui.Panel_1, 255)
end)
end
end
end
```
**主要改进点：**
1. **淡出顺序**：先让所有子控件淡出，等它们都完成后，再淡出父容器 `Panel_1`
2. **状态重置**：淡出动画完成后，隐藏 `Panel_1` 并重置其透明度，为下次展开做准备
3. **边界处理**：添加了子控件数量的判断，即使没有子控件也能正常执行
4. **可见性保证**：在开始淡出前，确保 `Panel_1` 是可见且不透明的，否则动画无效
这样处理后的效果会更流畅：收起时，内部元素先逐渐消失，然后整个面板淡出，最后完全隐藏。下次展开时会从完全透明开始淡入，视觉上更自然。
注意浮生梦老师课程里强调的：使用 `Timeline_FadeOut` 前，要确保控件是可见的，否则动画不会播放。
← 返回问答库