function npc.main()
-- npc.jj_data = longmaishuju
local parent = GUI:Win_Create(npc.__cname, 0, 0, 0, 0, false, false, true, true, true, 0)
GUI:LoadExport(parent, "UI/XingShiHuFuUI")
npc._parent = parent
npc.ui = {}
npc.ui = G
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-05-30 13:48:33 |
👁️ 阅读: 3
根据浮生梦老师前端课程内容，要实现点击按钮后其他按钮向下滑动的效果，需要调整动画逻辑和布局方式。以下是修改后的代码：
```lua
function npc.main()
-- npc.jj_data = longmaishuju
local parent = GUI:Win_Create(npc.__cname, 0, 0, 0, 0, false, false, true, true, true, 0)
GUI:LoadExport(parent, "UI/XingShiHuFuUI")
npc._parent = parent
npc.ui = {}
npc.ui = GUI:ui_delegate(parent)
ssrSetWidgetPosition(parent, npc.ui.Image_1, 2, 0, 0, true, true)
-- 关闭按钮
GUI:addOnClickEvent(npc.ui.close, function()
npc.Close()
end)
-- 存储当前显示的克隆组件
npc.currentClone = nil
-- 存储当前展开的按钮索引
npc.currentExpandedIndex = nil
-- 获取ListView中的主按钮
local mainButtons = {}
for k, child in ipairs(GUI:ListView_getItems(npc.ui.ListView_1)) do
local name = GUI:getName(child)
SL:print("按钮名称:", name, "索引:", k)
-- 只处理Button_1到Button_4
if name == "Button_1" or name == "Button_2" or name == "Button_3" or name == "Button_4" then
mainButtons[k] = child
-- 为每个主按钮添加点击事件
GUI:addOnClickEvent(child, function()
local itemIndex = GUI:ListView_getItemIndex(npc.ui.ListView_1, child)
-- 如果点击的是当前已展开的按钮，则收起
if npc.currentExpandedIndex == itemIndex then
if npc.currentClone and not GUI:Win_IsNull(npc.currentClone) then
-- 创建收起动画
local collapse = GUI:ActionSequence(
GUI:ActionScaleTo(0.3, 1, 0),
GUI:CallFunc(function()
if npc.currentClone and not GUI:Win_IsNull(npc.currentClone) then
GUI:removeFromParent(npc.currentClone)
npc.currentClone = nil
end
end)
)
GUI:runAction(npc.currentClone, collapse)
end
npc.currentExpandedIndex = nil
return
end
-- 移除之前显示的克隆组件
if npc.currentClone and not GUI:Win_IsNull(npc.currentClone) then
-- 先收起之前的动画
local collapse = GUI:ActionSequence(
GUI:ActionScaleTo(0.3, 1, 0),
GUI:CallFunc(function()
if npc.currentClone and not GUI:Win_IsNull(npc.currentClone) then
GUI:removeFromParent(npc.currentClone)
npc.currentClone = nil
-- 重新创建新的克隆
createNewPanel(itemIndex, child)
end
end)
)
GUI:runAction(npc.currentClone, collapse)
else
-- 直接创建新的克隆
createNewPanel(itemIndex, child)
end
npc.currentExpandedIndex = itemIndex
end)
end
end
-- 创建新面板的函数
local function createNewPanel(itemIndex, child)
-- 克隆新的Panel
local newPanel = GUI:Clone(npc.ui.Panel_1)
GUI:setVisible(newPanel, true)
-- 设置初始状态：从Y轴最高点开始（缩放为0）
GUI:setScaleY(newPanel, 0)
-- 插入到当前按钮后面
GUI:ListView_insertCustomItem(npc.ui.ListView_1, newPanel, itemIndex + 1)
npc.currentClone = newPanel
if GUI:Win_IsNull(newPanel) then
SL:print("容器不存在")
return
end
-- 创建展开动画：从0到1的Y轴缩放
local expand = GUI:ActionScaleTo(0.5, 1, 1)
-- 执行动画
GUI:runAction(newPanel, expand)
SL:print("点击了按钮:", GUI:getName(child), "插入位置:", itemIndex + 1)
end
-- 入场动画
Action_slow_appear(npc._parent, 200, 3, 1)
end
```
主要修改点：
1. **添加了收起功能**：点击已展开的按钮时会收起面板
2. **优化动画流程**：先收起旧面板再展开新面板，避免同时存在多个展开面板
3. **记录当前展开索引**：使用`npc.currentExpandedIndex`记录哪个按钮是展开状态
4. **使用ActionSequence**：将多个动作组合，确保收起动画完成后才移除组件
这样点击Button_1展开面板后，再点击Button_2时，Button_1的面板会先收起，Button_2的面板再展开，实现"慢慢往下滑动"的效果。
← 返回问答库