local npc = {}
npc.__cname = "XingZhenUI"
npc.cfg = Xz_1
npc.data = {}
local bag_item_type = {
[1] = "碎星石",
[2] = "尘星石",
[3] = "辉星石",
[4] = "耀星石",
[5] = "恒星星石",
}
function npc.main(visible)
GUIUtil:Lua_SubmitForm("星阵", "xing
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-05-24 01:42:32 |
👁️ 阅读: 2
要实现ListView_2组件从下往上淡入滑动并淡出滑动效果，需要修改`bag_item_show`和`colse_bagitem`函数。根据浮生梦老师前端课程内容，可以使用动作序列和位置设置来实现动画效果。
```lua
function npc:bag_item_show(p1, p2)
local ListView_2 = self.ui.ListView_2
-- 先设置初始位置（屏幕下方）
local screenHeight = 640 -- 假设屏幕高度为640
local listHeight = GUI:getContentSize(ListView_2).height or 200
local startY = -listHeight -- 从屏幕下方开始
GUI:setPosition(ListView_2, GUI:getPosition(ListView_2).x, startY)
GUI:setOpacity(ListView_2, 0) -- 初始完全透明
GUI:setVisible(ListView_2, true)
-- 清空之前的内容
GUI:ListView_removeAllItems(ListView_2)
-- 获取背包石头
SL:dump(npc.bag_item)
local pageCount = math.max(math.ceil(#npc.bag_item / 9), 3)
-- 创建分页容器
for i = 1, pageCount do
local item_node = GUI:Clone(item_bg)
GUI:setVisible(item_node, true)
GUI:setName(item_node, "item_node_" .. i)
GUI:ListView_pushBackCustomItem(ListView_2, item_node)
end
-- 填充装备
local operMode = SL:GetMetaValue("CURRENT_OPERMODE")
local ListView_2_ui = GUI:ui_delegate(ListView_2)
for idx, item in ipairs(npc.bag_item) do
local page = math.ceil(idx / 9)
local posInPage = (idx - 1) % 9 + 1
local item_node = ListView_2_ui["item_node_" .. page]
if item_node then
local item_show_bg = GUI:getChildByName(item_node, "item_bg_" .. posInPage)
if item_show_bg then
local itemData = {
index = item.Index,
look = true,
bgVisible = false,
count = item.OverLap or 1,
color = item.Color or 0,
}
local item_show = GUI:ItemShow_Create(item_show_bg, "item_show_" .. posInPage,
operMode == 1 and 13 or 0, operMode == 1 and 13 or 1, itemData)
local item_click = GUI:Layout_Create(item_show_bg, "item_click_" .. posInPage, 0, 0, 60, 60, false)
GUI:setTouchEnabled(item_click, true)
GUI:setSwallowTouches(item_click, false)
GUI:addOnClickEvent(item_click, function()
SL:print(item.Index)
self:colse_bagitem()
self:upde_interface(p1)
end)
end
end
end
-- 执行淡入滑动动画
local targetY = 0 -- 目标位置
local moveAction = GUI:ActionMoveTo(0.3, GUI:getPosition(ListView_2).x, targetY)
local fadeAction = GUI:ActionFadeTo(0.3, 255)
-- 同时执行移动和淡入
local spawnAction = GUI:ActionSpawn(moveAction, fadeAction)
GUI:runAction(ListView_2, spawnAction)
end
function npc:colse_bagitem()
local ListView_2 = self.ui.ListView_2
-- 执行淡出滑动动画
local currentY = GUI:getPosition(ListView_2).y
local listHeight = GUI:getContentSize(ListView_2).height or 200
local endY = -listHeight -- 滑动到屏幕下方
local moveAction = GUI:ActionMoveTo(0.3, GUI:getPosition(ListView_2).x, endY)
local fadeAction = GUI:ActionFadeTo(0.3, 0)
-- 同时执行移动和淡出
local spawnAction = GUI:ActionSpawn(moveAction, fadeAction)
-- 动画完成后隐藏并清空内容
local function hideAndClear()
GUI:setVisible(ListView_2, false)
GUI:ListView_removeAllItems(ListView_2)
end
local sequenceAction = GUI:ActionSequence(spawnAction, GUI:CallFunc(hideAndClear))
GUI:runAction(ListView_2, sequenceAction)
end
```
**修改说明：**
1. **显示动画**（`bag_item_show`函数）：
- 初始设置ListView_2在屏幕下方（`startY = -listHeight`）
- 设置初始透明度为0
- 使用`GUI:ActionMoveTo`实现向上滑动
- 使用`GUI:ActionFadeTo`实现淡入效果
- 通过`GUI:ActionSpawn`让两个动作同时执行
2. **关闭动画**（`colse_bagitem`函数）：
- 使用`GUI:ActionMoveTo`实现向下滑动
- 使用`GUI:ActionFadeTo`实现淡出效果
- 通过`GUI:ActionSequence`确保动画完成后才执行隐藏和清空操作
- 使用`GUI:CallFunc`创建回调函数执行清理工作
**注意：**
- 动画时间设为0.3秒，可根据需要调整
- `GUI:getContentSize`用于获取ListView_2的高度，确保滑动到正确位置
- 淡出动画完成后才隐藏和清空内容，避免动画被中断
这样ListView_2就会在显示时从下往上淡入滑动，关闭时淡出滑动下来，效果更加流畅自然。
← 返回问答库