local MainTop = {}
SL:print("=========MainTop加载成功!")
-- 顶部按钮配置数据（示例）
local Topui = {
{ name = "id1", x = 0.64, y = -30, res = "res/custom/tops/1.png", cmd = {1234, 5011} }, -- 首冲
{ name = "id2", x = 0.57, y = -30, res = "res/custom/tops/2
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-12 15:06:54 |
👁️ 阅读: 8
```lua
local MainTop = {}
SL:Print("=========MainTop加载成功!")
-- 顶部按钮配置数据（示例）
local Topui = {
{ name = "id1", x = 0.64, y = -30, res = "res/custom/tops/1.png", cmd = {1234, 5011} }, -- 首冲
{ name = "id2", x = 0.57, y = -30, res = "res/custom/tops/2.png", cmd = {1234, 5012} }, -- VIP特权
{ name = "id3", x = 0.50, y = -30, res = "res/custom/tops/3.png", cmd = {1234, 5013} }, -- 福利礼包
{ name = "id4", x = 0.43, y = -30, res = "res/custom/tops/4.png", cmd = {1234, 5014} }, -- 开服活动
{ name = "id5", x = 0.36, y = -30, res = "res/custom/tops/5.png", cmd = {1234, 5015} }, -- 交易行
{ name = "id6", x = 0.29, y = -30, res = "res/custom/tops/6.png", cmd = {1234, 5016} }, -- 福利活动
{ name = "id7", x = 0.22, y = -30, res = "res/custom/tops/7.png", cmd = {1234, 5017} }, -- 充值
}
function MainTop.main()
-- 获取屏幕宽高
local screenW = SL:GetMetaValue("SCREEN_WIDTH")
local screenH = SL:GetMetaValue("SCREEN_HEIGHT")
-- 创建界面
local topwin = GUI:Win_Create("NPC_Window", screenW, screenH)
if not topwin then
SL:Print("创建主窗口失败")
return
end
-- 创建容器节点，初始不可见
local topui = GUI:Node_Create(topwin, "topui", 1, 1)
GUI:setVisible(topui, false)
GUI:setScale(topui, 0)
-- 遍历配置创建按钮
for _, v in ipairs(Topui) do
-- 删除同名子节点
GUI:removeChildByName(topui, v.name)
-- 创建按钮（保持原有位置计算）
local btn = GUI:Button_Create(topui, v.name, - v.x * screenW, v.y, v.res)
GUI:setAnchorPoint(btn, 1, 1)
-- 绑定点击事件
GUI:addOnClickEvent(btn, function()
SL:Print("按钮被点击:", v.name)
end)
end
-- 设置折叠按钮位置
GUI:removeChildByName(topwin, "id8")
local zhedie = GUI:Button_Create(topwin, "id8", -0.2 * screenW, -85, "res/custom/tops/8.png")
GUI:setTag(zhedie, 1)
-- 获取折叠按钮位置作为缩放中心点
local foldPos = GUI:getPosition(zhedie)
-- 修改容器节点的锚点，使其以折叠按钮位置为中心缩放
GUI:setAnchorPoint(topui, 0.5, 0.5)
-- 重新设置容器位置到折叠按钮处
GUI:setPosition(topui, foldPos.x, foldPos.y)
-- 折叠按钮点击事件
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)
SL:Print('主界面创建完成')
end
-- 展开特效函数
function MainTop.showWithEffect(widget)
if GUI:Win_IsNull(widget) then return end
GUI:setVisible(widget, true)
GUI:setOpacity(widget, 0) -- 先设置透明度为0
-- 使用动作序列实现淡入+放大
local fadeIn = GUI:ActionFadeTo(0.3, 255)
local scaleTo = GUI:ActionScaleTo(0.3, 1)
local seq = GUI:ActionSequence(fadeIn, scaleTo)
GUI:runAction(widget, seq)
end
-- 收起特效函数
function MainTop.hideWithEffect(widget)
if GUI:Win_IsNull(widget) then return end
local fadeOut = GUI:ActionFadeTo(0.3, 0)
local scaleTo = GUI:ActionScaleTo(0.3, 0)
local callback = GUI:CallFunc(function()
GUI:setVisible(widget, false)
GUI:setScale(widget, 0)
end)
local seq = GUI:ActionSequence(fadeOut, scaleTo, callback)
GUI:runAction(widget, seq)
end
-- 启动模块
MainTop.main()
return MainTop
```
**修改说明：**
1. **保持按钮位置不变**：`local btn = GUI:Button_Create(topui, v.name, - v.x * screenW, v.y, v.res)` 这行代码完全保留，按钮的相对位置计算方式不变。
2. **调整容器缩放中心**：
- 获取折叠按钮位置：`local foldPos = GUI:getPosition(zhedie)`
- 设置容器锚点为(0.5,0.5)：`GUI:setAnchorPoint(topui, 0.5, 0.5)`
- 将容器移动到折叠按钮位置：`GUI:setPosition(topui, foldPos.x, foldPos.y)`
3. **效果**：所有图标按钮仍按原有位置排列，但整体缩放时以折叠按钮为中心点进行缩放。
4. **动画调整**：将`Timeline_FadeTo`改为`ActionFadeTo`和`ActionScaleTo`的组合，这是根据浮生梦老师前端课程内容的标准做法。
这样修改后，按钮创建方式不变，但缩放中心移动到了折叠按钮位置。
```lua
local MainTop = {}
SL:Print("=========MainTop加载成功!")
-- 顶部按钮配置数据（示例）
local Topui = {
{ name = "id1", x = 0.64, y = -30, res = "res/custom/tops/1.png", cmd = {1234, 5011} }, -- 首冲
{ name = "id2", x = 0.57, y = -30, res = "res/custom/tops/2.png", cmd = {1234, 5012} }, -- VIP特权
{ name = "id3", x = 0.50, y = -30, res = "res/custom/tops/3.png", cmd = {1234, 5013} }, -- 福利礼包
{ name = "id4", x = 0.43, y = -30, res = "res/custom/tops/4.png", cmd = {1234, 5014} }, -- 开服活动
{ name = "id5", x = 0.36, y = -30, res = "res/custom/tops/5.png", cmd = {1234, 5015} }, -- 交易行
{ name = "id6", x = 0.29, y = -30, res = "res/custom/tops/6.png", cmd = {1234, 5016} }, -- 福利活动
{ name = "id7", x = 0.22, y = -30, res = "res/custom/tops/7.png", cmd = {1234, 5017} }, -- 充值
}
function MainTop.main()
-- 获取屏幕宽高
local screenW = SL:GetMetaValue("SCREEN_WIDTH")
local screenH = SL:GetMetaValue("SCREEN_HEIGHT")
-- 创建界面
local topwin = GUI:Win_Create("NPC_Window", screenW, screenH)
if not topwin then
SL:Print("创建主窗口失败")
return
end
-- 创建容器节点，初始不可见
local topui = GUI:Node_Create(topwin, "topui", 1, 1)
GUI:setVisible(topui, false)
GUI:setScale(topui, 0)
-- 遍历配置创建按钮
for _, v in ipairs(Topui) do
-- 删除同名子节点
GUI:removeChildByName(topui, v.name)
-- 创建按钮（保持原有位置计算）
local btn = GUI:Button_Create(topui, v.name, - v.x * screenW, v.y, v.res)
GUI:setAnchorPoint(btn, 1, 1)
-- 绑定点击事件
GUI:addOnClickEvent(btn, function()
SL:Print("按钮被点击:", v.name)
end)
end
-- 设置折叠按钮位置
GUI:removeChildByName(topwin, "id8")
local zhedie = GUI:Button_Create(topwin, "id8", -0.2 * screenW, -85, "res/custom/tops/8.png")
GUI:setTag(zhedie, 1)
-- 获取折叠按钮位置作为缩放中心点
local foldPos = GUI:getPosition(zhedie)
-- 修改容器节点的锚点，使其以折叠按钮位置为中心缩放
GUI:setAnchorPoint(topui, 0.5, 0.5)
-- 重新设置容器位置到折叠按钮处
GUI:setPosition(topui, foldPos.x, foldPos.y)
-- 折叠按钮点击事件
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)
SL:Print('主界面创建完成')
end
-- 展开特效函数
function MainTop.showWithEffect(widget)
if GUI:Win_IsNull(widget) then return end
GUI:setVisible(widget, true)
GUI:setOpacity(widget, 0) -- 先设置透明度为0
-- 使用动作序列实现淡入+放大
local fadeIn = GUI:ActionFadeTo(0.3, 255)
local scaleTo = GUI:ActionScaleTo(0.3, 1)
local seq = GUI:ActionSequence(fadeIn, scaleTo)
GUI:runAction(widget, seq)
end
-- 收起特效函数
function MainTop.hideWithEffect(widget)
if GUI:Win_IsNull(widget) then return end
local fadeOut = GUI:ActionFadeTo(0.3, 0)
local scaleTo = GUI:ActionScaleTo(0.3, 0)
local callback = GUI:CallFunc(function()
GUI:setVisible(widget, false)
GUI:setScale(widget, 0)
end)
local seq = GUI:ActionSequence(fadeOut, scaleTo, callback)
GUI:runAction(widget, seq)
end
-- 启动模块
MainTop.main()
return MainTop
```
**修改说明：**
1. **保持按钮位置不变**：`local btn = GUI:Button_Create(topui, v.name, - v.x * screenW, v.y, v.res)` 这行代码完全保留，按钮的相对位置计算方式不变。
2. **调整容器缩放中心**：
- 获取折叠按钮位置：`local foldPos = GUI:getPosition(zhedie)`
- 设置容器锚点为(0.5,0.5)：`GUI:setAnchorPoint(topui, 0.5, 0.5)`
- 将容器移动到折叠按钮位置：`GUI:setPosition(topui, foldPos.x, foldPos.y)`
3. **效果**：所有图标按钮仍按原有位置排列，但整体缩放时以折叠按钮为中心点进行缩放。
4. **动画调整**：将`Timeline_FadeTo`改为`ActionFadeTo`和`ActionScaleTo`的组合，这是根据浮生梦老师前端课程内容的标准做法。
这样修改后，按钮创建方式不变，但缩放中心移动到了折叠按钮位置。
← 返回问答库