function MainTop.main()
---创建界面 调整界面所在的位置
local topwin = GUI:Win_Create("NPC_Window", SL.w, SL.h)
local topui = GUI:Node_Create(topwin, "topui", 1, 1)
if not topwin then return end
-- 遍历配置创建按钮
for _, button in ipairs(Topui)
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-12 14:43:10 |
👁️ 阅读: 6
好的，学员！我们来给你的界面添加一个帅气的“登场”和“退场”动画。根据浮生梦老师前端课程内容，我们可以使用 `Timeline` 动画来实现淡入淡出和洗牌（缩放）效果。
首先，我注意到你的代码里有一些函数需要调整，比如 `GUI:onclick` 应该用 `GUI:addOnClickEvent`，并且创建窗口的函数参数不完整。我会先修正基础结构，然后加入动画。
下面是修改后的代码，包含了创建时的延迟淡入缩放效果，以及收起时的淡出缩放效果：
```lua
function MainTop.main()
---创建界面 调整界面所在的位置
-- 注意：GUI:Win_Create 需要完整的参数，这里根据常见用法补齐
local topwin = GUI:Win_Create("NPC_Window", 0, 0, SL.w, SL.h, false, false, true, false, false, false, 1)
if GUI:Win_IsNull(topwin) then
SL:print("创建主窗口失败")
return
end
-- 先创建容器节点，但初始设置为不可见
local topui = GUI:Node_Create(topwin, "topui", 1, 1)
GUI:setVisible(topui, false)
-- 设置初始缩放为0，为放大动画做准备
GUI:setScale(topui, 0)
-- 遍历配置创建按钮
for _, button in ipairs(Topui) do
-- 删除同名子节点（避免重复创建）
GUI:removeChildByName(topui, button.name)
-- 创建按钮
local btn = GUI:Button_Create(topui, button.name, - button.x * SL.w, button.y, button.res)
GUI:setAnchorPoint(btn, 1, 1) -- 设置锚点为右上角（1,1）
-- 绑定点击事件（发送命令到服务器）
GUI:addOnClickEvent(btn, function()
-- 这里添加你的点击逻辑
SL:print("按钮被点击:", button.name)
end)
end
-- 设置折叠按钮
GUI:removeChildByName(topwin, "id8")
local zhedie = GUI:Button_Create(topwin, "id8", -0.2 * SL.w, -85, "res/custom/tops/8.png")
GUI:setTag(zhedie, 1) -- 标签为1表示展开状态
GUI:addOnClickEvent(zhedie, function()
local isExpanded = (GUI:getTag(zhedie) == 1)
if isExpanded then
-- 当前是展开状态，点击后收起
GUI:Button_loadTextureNormal(zhedie, "res/custom/tops/9.png")
GUI:setTag(zhedie, 0)
-- 调用收起特效函数
MainTop.hideWithEffect(topui)
else
-- 当前是收起状态，点击后展开
GUI:Button_loadTextureNormal(zhedie, "res/custom/tops/8.png")
GUI:setTag(zhedie, 1)
-- 调用展开特效函数
MainTop.showWithEffect(topui)
end
end)
-- 界面创建完成后，延迟执行展开动画
SL:ScheduleOnce(function()
MainTop.showWithEffect(topui)
end, 0.5) -- 延迟0.5秒展示
SL:print('主界面创建完成')
end
-- 展开特效函数（淡入 + 放大）
function MainTop.showWithEffect(widget)
if GUI:Win_IsNull(widget) then return end
-- 先确保控件可见
GUI:setVisible(widget, true)
-- 使用Timeline组合动画：同时执行淡入和放大
-- 淡入到不透明度255（完全显示），用时0.3秒
GUI:Timeline_FadeTo(widget, 255, 0.3)
-- 放大到原始大小(100%)，用时0.3秒，使用缓动效果更平滑
GUI:Timeline_ScaleTo(widget, 100, 0.3)
end
-- 收起特效函数（淡出 + 缩小）
function MainTop.hideWithEffect(widget)
if GUI:Win_IsNull(widget) then return end
-- 使用Timeline组合动画：同时执行淡出和缩小
-- 淡出到不透明度0（完全透明），用时0.3秒
GUI:Timeline_FadeTo(widget, 0, 0.3)
-- 缩小到0%，用时0.3秒
GUI:Timeline_ScaleTo(widget, 0, 0.3, function()
-- 动画完成后，隐藏控件
GUI:setVisible(widget, false)
-- 重置缩放，为下次展开做准备
GUI:setScale(widget, 0)
end)
end
-- 启动模块
MainTop.main()
return MainTop
```
**代码说明：**
1. **基础修正**：
* 使用完整的 `GUI:Win_Create` 参数创建窗口。
* 将 `GUI:onclick` 改为 `GUI:addOnClickEvent`。
* 创建 `topui` 容器后立即将其隐藏 (`GUI:setVisible(topui, false)`) 并缩放设为0 (`GUI:setScale(topui, 0)`)，作为动画的起始状态。
2. **延迟创建效果**：
* 使用 `SL:ScheduleOnce` 在界面创建0.5秒后，调用 `MainTop.showWithEffect(topui)` 开始动画。
3. **展开特效 (`showWithEffect`)**：
* **淡入**：`GUI:Timeline_FadeTo(widget, 255, 0.3)` 在0.3秒内将不透明度变为255（完全显示）。
* **放大**：`GUI:Timeline_ScaleTo(widget, 100, 0.3)` 在0.3秒内将缩放变为100%（原始大小）。
* 这两个 `Timeline` 动画会同时播放，形成“洗牌”展开的效果。
4. **收起特效 (`hideWithEffect`)**：
* **淡出**：`GUI:Timeline_FadeTo(widget, 0, 0.3)` 在0.3秒内将不透明度变为0（完全透明）。
* **缩小**：`GUI:Timeline_ScaleTo(widget, 0, 0.3, function() ... end)` 在0.3秒内将缩放变为0%，并在动画完成后执行回调函数。
* 在回调函数中，我们隐藏控件 (`GUI:setVisible(widget, false)`) 并重置缩放，确保下次展开时动画能正确从头开始。
5. **折叠按钮逻辑**：
* 通过 `GUI:getTag(zhedie)` 获取当前状态（1展开，0收起）。
* 根据状态切换按钮图片，并调用对应的特效函数。
这样，你的界面就有了一个平滑的、带有淡入淡出和缩放效果的动态展示过程。如果对 `Timeline` 函数的参数还有疑问，随时可以再问我！
好的，学员！我们来给你的界面添加一个帅气的“登场”和“退场”动画。根据浮生梦老师前端课程内容，我们可以使用 `Timeline` 动画来实现淡入淡出和洗牌（缩放）效果。
首先，我注意到你的代码里有一些函数需要调整，比如 `GUI:onclick` 应该用 `GUI:addOnClickEvent`，并且创建窗口的函数参数不完整。我会先修正基础结构，然后加入动画。
下面是修改后的代码，包含了创建时的延迟淡入缩放效果，以及收起时的淡出缩放效果：
```lua
function MainTop.main()
---创建界面 调整界面所在的位置
-- 注意：GUI:Win_Create 需要完整的参数，这里根据常见用法补齐
local topwin = GUI:Win_Create("NPC_Window", 0, 0, SL.w, SL.h, false, false, true, false, false, false, 1)
if GUI:Win_IsNull(topwin) then
SL:print("创建主窗口失败")
return
end
-- 先创建容器节点，但初始设置为不可见
local topui = GUI:Node_Create(topwin, "topui", 1, 1)
GUI:setVisible(topui, false)
-- 设置初始缩放为0，为放大动画做准备
GUI:setScale(topui, 0)
-- 遍历配置创建按钮
for _, button in ipairs(Topui) do
-- 删除同名子节点（避免重复创建）
GUI:removeChildByName(topui, button.name)
-- 创建按钮
local btn = GUI:Button_Create(topui, button.name, - button.x * SL.w, button.y, button.res)
GUI:setAnchorPoint(btn, 1, 1) -- 设置锚点为右上角（1,1）
-- 绑定点击事件（发送命令到服务器）
GUI:addOnClickEvent(btn, function()
-- 这里添加你的点击逻辑
SL:print("按钮被点击:", button.name)
end)
end
-- 设置折叠按钮
GUI:removeChildByName(topwin, "id8")
local zhedie = GUI:Button_Create(topwin, "id8", -0.2 * SL.w, -85, "res/custom/tops/8.png")
GUI:setTag(zhedie, 1) -- 标签为1表示展开状态
GUI:addOnClickEvent(zhedie, function()
local isExpanded = (GUI:getTag(zhedie) == 1)
if isExpanded then
-- 当前是展开状态，点击后收起
GUI:Button_loadTextureNormal(zhedie, "res/custom/tops/9.png")
GUI:setTag(zhedie, 0)
-- 调用收起特效函数
MainTop.hideWithEffect(topui)
else
-- 当前是收起状态，点击后展开
GUI:Button_loadTextureNormal(zhedie, "res/custom/tops/8.png")
GUI:setTag(zhedie, 1)
-- 调用展开特效函数
MainTop.showWithEffect(topui)
end
end)
-- 界面创建完成后，延迟执行展开动画
SL:ScheduleOnce(function()
MainTop.showWithEffect(topui)
end, 0.5) -- 延迟0.5秒展示
SL:print('主界面创建完成')
end
-- 展开特效函数（淡入 + 放大）
function MainTop.showWithEffect(widget)
if GUI:Win_IsNull(widget) then return end
-- 先确保控件可见
GUI:setVisible(widget, true)
-- 使用Timeline组合动画：同时执行淡入和放大
-- 淡入到不透明度255（完全显示），用时0.3秒
GUI:Timeline_FadeTo(widget, 255, 0.3)
-- 放大到原始大小(100%)，用时0.3秒，使用缓动效果更平滑
GUI:Timeline_ScaleTo(widget, 100, 0.3)
end
-- 收起特效函数（淡出 + 缩小）
function MainTop.hideWithEffect(widget)
if GUI:Win_IsNull(widget) then return end
-- 使用Timeline组合动画：同时执行淡出和缩小
-- 淡出到不透明度0（完全透明），用时0.3秒
GUI:Timeline_FadeTo(widget, 0, 0.3)
-- 缩小到0%，用时0.3秒
GUI:Timeline_ScaleTo(widget, 0, 0.3, function()
-- 动画完成后，隐藏控件
GUI:setVisible(widget, false)
-- 重置缩放，为下次展开做准备
GUI:setScale(widget, 0)
end)
end
-- 启动模块
MainTop.main()
return MainTop
```
**代码说明：**
1. **基础修正**：
* 使用完整的 `GUI:Win_Create` 参数创建窗口。
* 将 `GUI:onclick` 改为 `GUI:addOnClickEvent`。
* 创建 `topui` 容器后立即将其隐藏 (`GUI:setVisible(topui, false)`) 并缩放设为0 (`GUI:setScale(topui, 0)`)，作为动画的起始状态。
2. **延迟创建效果**：
* 使用 `SL:ScheduleOnce` 在界面创建0.5秒后，调用 `MainTop.showWithEffect(topui)` 开始动画。
3. **展开特效 (`showWithEffect`)**：
* **淡入**：`GUI:Timeline_FadeTo(widget, 255, 0.3)` 在0.3秒内将不透明度变为255（完全显示）。
* **放大**：`GUI:Timeline_ScaleTo(widget, 100, 0.3)` 在0.3秒内将缩放变为100%（原始大小）。
* 这两个 `Timeline` 动画会同时播放，形成“洗牌”展开的效果。
4. **收起特效 (`hideWithEffect`)**：
* **淡出**：`GUI:Timeline_FadeTo(widget, 0, 0.3)` 在0.3秒内将不透明度变为0（完全透明）。
* **缩小**：`GUI:Timeline_ScaleTo(widget, 0, 0.3, function() ... end)` 在0.3秒内将缩放变为0%，并在动画完成后执行回调函数。
* 在回调函数中，我们隐藏控件 (`GUI:setVisible(widget, false)`) 并重置缩放，确保下次展开时动画能正确从头开始。
5. **折叠按钮逻辑**：
* 通过 `GUI:getTag(zhedie)` 获取当前状态（1展开，0收起）。
* 根据状态切换按钮图片，并调用对应的特效函数。
这样，你的界面就有了一个平滑的、带有淡入淡出和缩放效果的动态展示过程。如果对 `Timeline` 函数的参数还有疑问，随时可以再问我！
← 返回问答库