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:02:19 |
👁️ 阅读: 6
根据你的需求，需要将除了折叠按钮之外的所有图标的缩放中心点（锚点）设置在折叠按钮的位置附近。这需要先获取折叠按钮的坐标，然后计算每个图标相对于折叠按钮的位置偏移。
以下是修改后的代码：
```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 topwin = GUI:Win_Create("NPC_Window", SL.w, SL.h)
if not topwin then return error("创建主窗口失败") end
-- 先创建容器节点，但初始设置为不可见
local topui = GUI:Node_Create(topwin, "topui", 1, 1)
GUI:setVisible(topui, false)
-- 设置初始缩放为0，为放大动画做准备
GUI:setScale(topui, 0)
-- 先创建折叠按钮并获取其位置作为缩放中心点
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表示展开状态
-- 获取折叠按钮的位置
local zhediePos = GUI:getPosition(zhedie)
local centerX = zhediePos.x
local centerY = zhediePos.y
-- 遍历配置创建按钮
for _, v in ipairs(Topui) do
-- 删除同名子节点（避免重复创建）
GUI:removeChildByName(topui, v.name)
-- 计算相对于折叠按钮的位置
local targetX = -v.x * SL.w
local targetY = v.y
-- 创建按钮时使用相对于折叠按钮的位置差
local btn = GUI:Button_Create(topui, v.name, targetX, targetY, v.res)
-- 设置锚点为右上角（1,1）
GUI:setAnchorPoint(btn, 1, 1)
-- 绑定点击事件（发送命令到服务器）
GUI:addOnClickEvent(btn, function()
SL:Print("按钮被点击:", v.name)
end)
end
-- 设置折叠按钮点击事件
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, centerX, centerY)
else
-- 当前是收起状态，点击后展开
GUI:Button_loadTextureNormal(zhedie, "res/custom/tops/8.png")
GUI:setTag(zhedie, 1)
-- 调用展开特效函数
MainTop.showWithEffect(topui, centerX, centerY)
end
end)
-- 界面创建完成后，延迟执行展开动画
SL:ScheduleOnce(function()
MainTop.showWithEffect(topui, centerX, centerY)
end, 0.5) -- 延迟0.5秒展示
SL:Print('主界面创建完成')
end
-- 展开特效函数（淡入 + 放大）
function MainTop.showWithEffect(widget, centerX, centerY)
if GUI:Win_IsNull(widget) then return end
-- 先确保控件可见
GUI:setVisible(widget, true)
-- 设置缩放中心点为折叠按钮位置
GUI:setScaleCenter(widget, centerX, centerY)
-- 使用Timeline组合动画：同时执行淡入和放大
-- 淡入到不透明度255（完全显示），用时0.3秒
GUI:Timeline_FadeTo(widget, 255, 0.3)
-- 放大到原始大小(100%)，用时0.3秒，使用缓动效果更平滑
GUI:Timeline_ScaleTo(widget, 1, 0.3)
end
-- 收起特效函数（淡出 + 缩小）
function MainTop.hideWithEffect(widget, centerX, centerY)
if GUI:Win_IsNull(widget) then return end
-- 设置缩放中心点为折叠按钮位置
GUI:setScaleCenter(widget, centerX, centerY)
-- 使用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. **先创建折叠按钮**：在创建其他图标之前先创建折叠按钮，这样能获取到它的位置
2. **获取折叠按钮坐标**：使用 `GUI:getPosition(zhedie)` 获取折叠按钮的坐标
3. **传递中心点坐标**：将折叠按钮的坐标传递给 `showWithEffect` 和 `hideWithEffect` 函数
4. **设置缩放中心**：使用 `GUI:setScaleCenter(widget, centerX, centerY)` 设置缩放中心点为折叠按钮的位置
这样修改后，所有图标的缩放动画都会以折叠按钮为中心进行缩放，而不是各自以自身为中心缩放。
根据你的需求，需要将除了折叠按钮之外的所有图标的缩放中心点（锚点）设置在折叠按钮的位置附近。这需要先获取折叠按钮的坐标，然后计算每个图标相对于折叠按钮的位置偏移。
以下是修改后的代码：
```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 topwin = GUI:Win_Create("NPC_Window", SL.w, SL.h)
if not topwin then return error("创建主窗口失败") end
-- 先创建容器节点，但初始设置为不可见
local topui = GUI:Node_Create(topwin, "topui", 1, 1)
GUI:setVisible(topui, false)
-- 设置初始缩放为0，为放大动画做准备
GUI:setScale(topui, 0)
-- 先创建折叠按钮并获取其位置作为缩放中心点
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表示展开状态
-- 获取折叠按钮的位置
local zhediePos = GUI:getPosition(zhedie)
local centerX = zhediePos.x
local centerY = zhediePos.y
-- 遍历配置创建按钮
for _, v in ipairs(Topui) do
-- 删除同名子节点（避免重复创建）
GUI:removeChildByName(topui, v.name)
-- 计算相对于折叠按钮的位置
local targetX = -v.x * SL.w
local targetY = v.y
-- 创建按钮时使用相对于折叠按钮的位置差
local btn = GUI:Button_Create(topui, v.name, targetX, targetY, v.res)
-- 设置锚点为右上角（1,1）
GUI:setAnchorPoint(btn, 1, 1)
-- 绑定点击事件（发送命令到服务器）
GUI:addOnClickEvent(btn, function()
SL:Print("按钮被点击:", v.name)
end)
end
-- 设置折叠按钮点击事件
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, centerX, centerY)
else
-- 当前是收起状态，点击后展开
GUI:Button_loadTextureNormal(zhedie, "res/custom/tops/8.png")
GUI:setTag(zhedie, 1)
-- 调用展开特效函数
MainTop.showWithEffect(topui, centerX, centerY)
end
end)
-- 界面创建完成后，延迟执行展开动画
SL:ScheduleOnce(function()
MainTop.showWithEffect(topui, centerX, centerY)
end, 0.5) -- 延迟0.5秒展示
SL:Print('主界面创建完成')
end
-- 展开特效函数（淡入 + 放大）
function MainTop.showWithEffect(widget, centerX, centerY)
if GUI:Win_IsNull(widget) then return end
-- 先确保控件可见
GUI:setVisible(widget, true)
-- 设置缩放中心点为折叠按钮位置
GUI:setScaleCenter(widget, centerX, centerY)
-- 使用Timeline组合动画：同时执行淡入和放大
-- 淡入到不透明度255（完全显示），用时0.3秒
GUI:Timeline_FadeTo(widget, 255, 0.3)
-- 放大到原始大小(100%)，用时0.3秒，使用缓动效果更平滑
GUI:Timeline_ScaleTo(widget, 1, 0.3)
end
-- 收起特效函数（淡出 + 缩小）
function MainTop.hideWithEffect(widget, centerX, centerY)
if GUI:Win_IsNull(widget) then return end
-- 设置缩放中心点为折叠按钮位置
GUI:setScaleCenter(widget, centerX, centerY)
-- 使用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. **先创建折叠按钮**：在创建其他图标之前先创建折叠按钮，这样能获取到它的位置
2. **获取折叠按钮坐标**：使用 `GUI:getPosition(zhedie)` 获取折叠按钮的坐标
3. **传递中心点坐标**：将折叠按钮的坐标传递给 `showWithEffect` 和 `hideWithEffect` 函数
4. **设置缩放中心**：使用 `GUI:setScaleCenter(widget, centerX, centerY)` 设置缩放中心点为折叠按钮的位置
这样修改后，所有图标的缩放动画都会以折叠按钮为中心进行缩放，而不是各自以自身为中心缩放。
← 返回问答库