SL:print("=========GUI加载成功!")
local GUI = GUI
function GUI:addfunchhhhhhhhhhhhh()
SL:print("打印出的信息")
end
---打开npc界面
function GUI:npcUI(uiname)
local w ,h = SL:GetMetaValue("SCREEN_WIDTH") ,SL:GetMetaValue("SCREEN_HEIGHT")---获取元变量的宽和高
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-03-17 11:38:13 |
👁️ 阅读: 10
根据浮生梦老师前端课程内容，我来帮你完善代码，添加渐显和渐隐效果。
```lua
SL:print("=========GUI加载成功!")
local GUI = GUI
function GUI:addfunchhhhhhhhhhhhh()
SL:print("打印出的信息")
end
---打开npc界面
function GUI:npcUI(uiname)
local w ,h = SL:GetMetaValue("SCREEN_WIDTH") ,SL:GetMetaValue("SCREEN_HEIGHT")---获取元变量的宽和高
local root= GUI:Win_Create("win",w/2,h/2) ---创建界面 调整界面所在的位置
-- 设置初始透明度为0（完全透明）
GUI:setOpacity(root, 0)
GUI:LoadExport(root, "NPC/"..uiname) --加载UI界面 和路径
local ui = GUI:ui_delegate(root) ---获取父节点下的所有组件
if not ui.ImageView then error("你把背景唯一id改成ImageView") end -----如果gui的主图名字 不是bg,那就修改 成bg
if ui.ImageView then
GUI:setTouchEnabled(ui.ImageView, true)--从gui中拿过来的 禁止左键穿透（true） 允许穿透(false):::说明书中的含义是:设置控件是否可以触摸
GUI:Win_SetSwallowRightMouseTouch(ui.ImageView, true) ---鼠标右键吞噬 禁止右键穿透
end
if not ui.guanbi then error("你把关闭按钮唯一id改成guanbi") end -----如果gui的主图名字 不是bg,那就修改 成bg
if ui.guanbi then
GUI:addOnClickEvent(ui.guanbi, function()
-- 关闭时先播放渐隐动画
local fadeOutAction = GUI:Timeline_FadeTo(root, 0, 0.3, function()
-- 动画结束后关闭界面
GUI:Win_Close(root)
end)
GUI:runAction(root, fadeOutAction)
end)
end
-- 打开界面时播放渐显动画到不透明度180
local fadeInAction = GUI:Timeline_FadeTo(root, 180, 0.3)
GUI:runAction(root, fadeInAction)
return ui , root
end
function GUI:onclick(widget, func)
SL:print(tolua.type(widget))---属于cocos的函数 打印组件的类型
GUI:setTouchEnabled(widget, true) ---设置控件是否可以触摸
GUI:addOnClickEvent(widget, func) ---设置控件点击事件
end
--设置锚点
function GUI: maodian(widget, x, y)
GUI: setAnchorPoint(widget, x or 0.5, y or 0.5)
end
return GUI
```
**代码说明：**
1. **打开界面渐显效果**：
- 先设置界面初始透明度为0（完全透明）
- 使用`GUI:Timeline_FadeTo(root, 180, 0.3)`在0.3秒内渐变到不透明度180
- 通过`GUI:runAction()`执行动画
2. **关闭界面渐隐效果**：
- 点击关闭按钮时，先播放渐隐动画
- 使用`GUI:Timeline_FadeTo(root, 0, 0.3, callback)`在0.3秒内渐变到完全透明
- 动画结束后在回调函数中关闭界面
3. **关键函数说明**：
- `GUI:setOpacity(widget, value)`：设置控件不透明度（0-255）
- `GUI:Timeline_FadeTo(widget, value, time, timelineCB)`：动画修改透明度到指定值
- `GUI:runAction(widget, action)`：执行动画动作
这样修改后，你的界面打开和关闭时都会有平滑的透明度过渡效果，不透明度最终会保持在180。
根据浮生梦老师前端课程内容，我来帮你完善代码，添加渐显和渐隐效果。
```lua
SL:print("=========GUI加载成功!")
local GUI = GUI
function GUI:addfunchhhhhhhhhhhhh()
SL:print("打印出的信息")
end
---打开npc界面
function GUI:npcUI(uiname)
local w ,h = SL:GetMetaValue("SCREEN_WIDTH") ,SL:GetMetaValue("SCREEN_HEIGHT")---获取元变量的宽和高
local root= GUI:Win_Create("win",w/2,h/2) ---创建界面 调整界面所在的位置
-- 设置初始透明度为0（完全透明）
GUI:setOpacity(root, 0)
GUI:LoadExport(root, "NPC/"..uiname) --加载UI界面 和路径
local ui = GUI:ui_delegate(root) ---获取父节点下的所有组件
if not ui.ImageView then error("你把背景唯一id改成ImageView") end -----如果gui的主图名字 不是bg,那就修改 成bg
if ui.ImageView then
GUI:setTouchEnabled(ui.ImageView, true)--从gui中拿过来的 禁止左键穿透（true） 允许穿透(false):::说明书中的含义是:设置控件是否可以触摸
GUI:Win_SetSwallowRightMouseTouch(ui.ImageView, true) ---鼠标右键吞噬 禁止右键穿透
end
if not ui.guanbi then error("你把关闭按钮唯一id改成guanbi") end -----如果gui的主图名字 不是bg,那就修改 成bg
if ui.guanbi then
GUI:addOnClickEvent(ui.guanbi, function()
-- 关闭时先播放渐隐动画
local fadeOutAction = GUI:Timeline_FadeTo(root, 0, 0.3, function()
-- 动画结束后关闭界面
GUI:Win_Close(root)
end)
GUI:runAction(root, fadeOutAction)
end)
end
-- 打开界面时播放渐显动画到不透明度180
local fadeInAction = GUI:Timeline_FadeTo(root, 180, 0.3)
GUI:runAction(root, fadeInAction)
return ui , root
end
function GUI:onclick(widget, func)
SL:print(tolua.type(widget))---属于cocos的函数 打印组件的类型
GUI:setTouchEnabled(widget, true) ---设置控件是否可以触摸
GUI:addOnClickEvent(widget, func) ---设置控件点击事件
end
--设置锚点
function GUI: maodian(widget, x, y)
GUI: setAnchorPoint(widget, x or 0.5, y or 0.5)
end
return GUI
```
**代码说明：**
1. **打开界面渐显效果**：
- 先设置界面初始透明度为0（完全透明）
- 使用`GUI:Timeline_FadeTo(root, 180, 0.3)`在0.3秒内渐变到不透明度180
- 通过`GUI:runAction()`执行动画
2. **关闭界面渐隐效果**：
- 点击关闭按钮时，先播放渐隐动画
- 使用`GUI:Timeline_FadeTo(root, 0, 0.3, callback)`在0.3秒内渐变到完全透明
- 动画结束后在回调函数中关闭界面
3. **关键函数说明**：
- `GUI:setOpacity(widget, value)`：设置控件不透明度（0-255）
- `GUI:Timeline_FadeTo(widget, value, time, timelineCB)`：动画修改透明度到指定值
- `GUI:runAction(widget, action)`：执行动画动作
这样修改后，你的界面打开和关闭时都会有平滑的透明度过渡效果，不透明度最终会保持在180。
← 返回问答库