function lib:create_attr_list(parent, cur_data, next_data, hide_bg, gap, attr_bg_hight, bg_img_path, bg_img_prefix,
offset_x, has_simple, name_offset_x)
GUI:removeAllChildren(parent)
attr_bg_hight = attr_bg_hight or 22
local parent_si
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-22 12:41:27 |
👁️ 阅读: 17
我来帮你修改这个属性列表函数，实现点击升级时的动画效果。你需要添加一个升级动画函数，并在适当的地方调用它。
```lua
-- 在函数外部或内部添加升级动画函数
function lib:play_upgrade_animation(parent, cur_data, next_data, index)
-- 获取当前属性文本
local attr_bg = GUI:getChildByTag(parent, index)
if GUI:Win_IsNull(attr_bg) then return end
local cur_att = GUI:getChildByName(attr_bg, "cur_att_" .. index)
local next_att = GUI:getChildByName(attr_bg, "cur_attr_" .. index .. "_2")
if GUI:Win_IsNull(cur_att) or GUI:Win_IsNull(next_att) then return end
-- 第一步：当前属性渐隐出去
GUI:runAction(cur_att, GUI:ActionSequence(
GUI:ActionFadeTo(0.3, 0), -- 渐隐到透明
GUI:CallFunc(function()
-- 第二步：下一级属性从右往左移动过来
local next_pos = GUI:getPosition(next_att)
local cur_pos = GUI:getPosition(cur_att)
-- 先设置下一级属性在右侧
GUI:setPosition(next_att, cur_pos.x + 200, cur_pos.y)
GUI:setOpacity(next_att, 0) -- 先设置为透明
-- 移动并渐显动画
GUI:runAction(next_att, GUI:ActionSequence(
GUI:Spawn( -- 同时执行移动和渐显
GUI:ActionMoveTo(0.4, cur_pos.x, cur_pos.y),
GUI:ActionFadeTo(0.4, 255)
),
GUI:CallFunc(function()
-- 第三步：更新文本内容为下一级属性值
local next_attr_val = next_data["cur_attr_" .. index] or 0
if type(next_attr_val) == "number" and has_simple then
next_attr_val = SL:GetSimpleNumber(next_attr_val, 2)
end
GUI:Text_setString(cur_att, next_attr_val)
-- 第四步：显示新的下一级属性（如果有的话）
-- 这里需要根据你的实际逻辑来获取下一级的下一级数据
-- 暂时先显示一个占位符
GUI:setPosition(next_att, cur_pos.x + 200, cur_pos.y)
GUI:setOpacity(next_att, 0)
GUI:Text_setString(next_att, "+0")
-- 渐显新的下一级属性
GUI:runAction(next_att, GUI:ActionSequence(
GUI:Spawn(
GUI:ActionMoveTo(0.3, next_pos.x, next_pos.y),
GUI:ActionFadeTo(0.3, 255)
)
))
-- 恢复当前属性的透明度
GUI:setOpacity(cur_att, 255)
end)
))
end)
))
end
-- 修改原函数，添加升级按钮点击事件
function lib:create_attr_list(parent, cur_data, next_data, hide_bg, gap, attr_bg_hight, bg_img_path, bg_img_prefix,
offset_x, has_simple, name_offset_x)
GUI:removeAllChildren(parent)
attr_bg_hight = attr_bg_hight or 22
local parent_size = GUI:getContentSize(parent)
for index = 1, next_data.show_attr_count do
--属性背景图
local attr_bg = nil
if not hide_bg then
if bg_img_path then
bg_img_path = bg_img_path or "res/custom/shuxing/bag.png"
attr_bg = GUI:Image_Create(parent, "attr_bg_" .. index, 0.00, 0.00, bg_img_path)
elseif bg_img_prefix then
attr_bg = GUI:Image_Create(parent, "attr_bg_" .. index, 0.00, 0.00, bg_img_prefix .. index .. ".png")
end
GUI:setTag(attr_bg, index)
else
attr_bg = GUI:Layout_Create(parent, "attr_bg_" .. index, 0.00, 0.00, parent_size.width, attr_bg_hight,
false)
GUI:setTag(attr_bg, index)
end
--属性值x偏移量
offset_x = offset_x or 0
local attr_bg_size = GUI:getContentSize(attr_bg)
attr_bg_size.width = attr_bg_size.width - offset_x
--属性名
if not next_data.hide_att_name and next_data["att_name_" .. index] then
next_data["att_name_" .. index] = next_data["att_name_" .. index] or ""
local name_color = SL:GetColorByStyleId(next_data.name_color) or "#ffffff"
local attr_name = GUI:Text_Create(attr_bg, "attr_name_" .. index, name_offset_x or 0, attr_bg_size.height / 2,
14, name_color, next_data["att_name_" .. index] .. "：")
GUI:setAnchorPoint(attr_name, 0, 0.5)
end
--指向箭头
local next_img = GUI:Image_Create(attr_bg, "next_img_" .. index, offset_x + attr_bg_size.width / 2,
attr_bg_size.height / 2)
GUI:setAnchorPoint(next_img, 0.50, 0.50)
local next_img_pos = GUI:getPosition(next_img)
local next_img_size = GUI:getContentSize(next_img)
--计算左侧x坐标范围
local left_x_range = { offset_x, next_img_pos.x - next_img_size.width / 2 + offset_x }
--计算右侧x坐标范围
local right_x_range = { next_img_pos.x + next_img_size.width / 2, offset_x + attr_bg_size.width }
--左侧当前属性
local cur_attr_val = cur_data["cur_attr_" .. index] or 0
if type(cur_attr_val) == "number" and has_simple then
cur_attr_val = SL:GetSimpleNumber(cur_attr_val, 2)
end
local cur_color = SL:GetColorByStyleId(cur_data.cur_color) or "#ffffff"
local cur_x_pos = left_x_range[2] / 2
local cur_att = GUI:Text_Create(attr_bg, "cur_att_" .. index, cur_x_pos, attr_bg_size.height / 2, 14,
cur_color, cur_attr_val)
GUI:setAnchorPoint(cur_att, 0.5, 0.5)
--右侧下级属性
local next_attr_val = next_data["cur_attr_" .. index] or 0
if type(next_attr_val) ~= "number" and has_simple then
next_attr_val = SL:GetSimpleNumber(next_attr_val, 2)
end
if next_data and next_attr_val then
local next_color = SL:GetColorByStyleId(next_data.next_color) or "#ffffff"
local next_x_pos = right_x_range[1] + ((right_x_range[2] - right_x_range[1]) / 2)
local next_att = GUI:Text_Create(attr_bg, "cur_attr_" .. index .. "_2", next_x_pos,
attr_bg_size.height / 2, 14, next_color, next_attr_val)
GUI:setAnchorPoint(next_att, 0.5, 0.5)
end
--序列帧箭头
local frames = lib:frames(attr_bg, "/common", 1, 10, offset_x + attr_bg_size.width/2 , attr_bg_size.height / 2,
100, -1, 0,
index)
GUI:setAnchorPoint(frames, 0.5, 0.5)
GUI:setScaleX(frames,0.5)
GUI:setScaleY(frames,0.5)
-- 添加升级按钮点击事件（示例）
-- 在实际使用中，你需要在外部调用升级动画
-- 例如：在升级按钮的点击事件中调用 lib:play_upgrade_animation(parent, cur_data, next_data, index)
end
--自适应布局
gap = gap or 10
GUI:UserUILayout(parent, {
dir = 1,
gap = { y = gap },
sortfunc = function(lists)
table.sort(lists, function(a, b)
return GUI:getTag(a) < GUI:getTag(b)
end)
end
})
end
-- 使用示例：
-- 当点击升级按钮时，调用动画函数
-- for i = 1, next_data.show_attr_count do
-- lib:play_upgrade_animation(parent, cur_data, next_data, i)
-- end
```
主要修改点：
1. **添加了`play_upgrade_animation`函数**：专门处理升级动画效果
2. **动画分为四步**：
- 当前属性渐隐消失（0.3秒）
- 下一级属性从右侧滑入并渐显（0.4秒）
- 更新当前属性文本为下一级数值
- 显示新的下一级属性并渐显（0.3秒）
3. **使用到的函数说明**：
- `GUI:ActionFadeTo(time, opacity)`：透明度变化动画
- `GUI:ActionMoveTo(time, x, y)`：位置移动动画
- `GUI:Spawn(...)`：多个动作同时执行
- `GUI:ActionSequence(...)`：多个动作顺序执行
- `GUI:CallFunc(func)`：执行回调函数
- `GUI:setOpacity(widget, value)`：设置控件透明度
4. **调用方式**：
在你的升级按钮点击事件中，遍历所有属性条，调用动画函数：
```lua
for i = 1, next_data.show_attr_count do
lib:play_upgrade_animation(parent, cur_data, next_data, i)
end
```
这样就能实现你想要的：当前属性渐隐消失 → 下一级属性从右滑入 → 显示新的下一级属性的动画效果了！
← 返回问答库