local n1_chuansong = {}
local list = {
{ name = "比奇城", mapId = "0", lv = 0, equal = { "幽灵项链", "幽灵手套", "龙之戒指", } },
{ name = "盟重省", mapId = "3", lv = 25, equal = { "幽灵项链", "幽灵手套", "龙之戒指", "道士头盔", } },
{ name = "沙巴克城", mapId = "0150", lv =
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-07 12:07:23 |
👁️ 阅读: 0
根据浮生梦老师的前端课程内容，要实现装备展示物品从中间向两侧展开的动画效果，可以使用动作序列和延时动作来创建。
修改你的 `init_main` 函数中的装备展示部分：
```lua
-- 装备展示
local show_count = #list[n1_chuansong.idx].equal
local show_width = show_count * 90
local show_x = (520 - show_width) / 2
-- 清空容器数据
local Panel = self.ui.Panel
if Panel then
GUI:removeAllChildren(Panel)
end
-- 先创建所有物品，但设置初始透明度为0
for k, v in ipairs(list[n1_chuansong.idx].equal) do
-- 创建物品框背景图片
local bgImg = GUI:Image_Create(Panel, "img" .. k, show_x + (k - 1) * 90, 0, "res/public/1900000651_3.png")
GUI:setOpacity(bgImg, 0) -- 初始透明
-- 创建物品框
local setData = {}
setData.index = SL:GetMetaValue("ITEM_INDEX_BY_NAME", v)
setData.look = true
local itemWidget = GUI:ItemShow_Create(Panel, "itemcs" .. k, show_x + (k - 1) * 90 + 19, 18, setData)
GUI:setOpacity(itemWidget, 0) -- 初始透明
end
-- 延迟执行展开动画
SL:ScheduleOnce(function()
-- 计算中间位置索引
local middle_index = math.ceil(show_count / 2)
-- 从中间向两侧展开
for i = 1, show_count do
local distance_from_middle = math.abs(i - middle_index)
local delay_time = distance_from_middle * 0.1 -- 距离越远延迟越长
-- 背景图片动画
local bgImg = GUI:getChildByName(Panel, "img" .. i)
if GUI:Win_IsNotNull(bgImg) then
local fadeIn = GUI:ActionFadeTo(0.3, 255)
local scaleUp = GUI:ActionSequence(
GUI:ActionScaleTo(0.15, 1.2),
GUI:ActionScaleTo(0.15, 1.0)
)
GUI:runAction(bgImg, GUI:ActionSequence(
GUI:DelayTime(delay_time),
GUI:ActionSpawn(fadeIn, scaleUp)
))
end
-- 物品框动画
local itemWidget = GUI:getChildByName(Panel, "itemcs" .. i)
if GUI:Win_IsNotNull(itemWidget) then
local fadeIn = GUI:ActionFadeTo(0.3, 255)
local moveUp = GUI:ActionSequence(
GUI:ActionMoveBy(0.1, 0, -10),
GUI:ActionMoveBy(0.2, 0, 10)
)
GUI:runAction(itemWidget, GUI:ActionSequence(
GUI:DelayTime(delay_time),
GUI:ActionSpawn(fadeIn, moveUp)
))
end
end
end, 0.1)
```
主要修改：
1. 先创建所有物品，但设置初始透明度为0（不可见）
2. 使用 `SL:ScheduleOnce` 延迟执行动画
3. 计算中间位置索引，从中间向两侧依次展开
4. 距离中间越远的物品，延迟时间越长
5. 背景图片使用淡入+缩放动画
6. 物品框使用淡入+上下移动动画
动画效果说明：
- 中间物品先出现，然后向两侧依次展开
- 每个物品都有0.1秒的间隔延迟
- 背景图片有缩放效果
- 物品框有上下浮动效果
注意：`GUI:ActionFadeTo` 是淡入动画函数，需要先设置初始透明度为0才能看到淡入效果。
← 返回问答库