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:44:38 |
👁️ 阅读: 12
要实现点击升级时的属性渐变切换效果，需要修改你的 `create_attr_list` 函数。我将在现有基础上添加动画逻辑，实现当前属性渐隐、下一级属性从右向左滑动并渐显的效果。
```lua
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)
-- 存储当前属性控件，用于动画
local cur_attr_widgets = {}
local next_attr_widgets = {}
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)
cur_attr_widgets[index] = cur_att -- 存储当前属性控件
--右侧下级属性
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)
next_attr_widgets[index] = next_att -- 存储下级属性控件
-- 初始设置下级属性不可见
GUI:setVisible(next_att, false)
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)
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
})
-- 添加升级动画函数
function lib:play_upgrade_animation()
for index, cur_att in pairs(cur_attr_widgets) do
local next_att = next_attr_widgets[index]
if cur_att and next_att then
-- 获取当前属性的位置
local cur_pos = GUI:getPosition(cur_att)
-- 第一步：当前属性渐隐
GUI:runAction(cur_att, GUI:ActionSequence(
GUI:ActionFadeTo(0.3, 0), -- 渐隐到透明
GUI:CallFunc(function()
-- 第二步：隐藏当前属性，显示下级属性
GUI:setVisible(cur_att, false)
GUI:setVisible(next_att, true)
-- 设置下级属性初始位置（右侧）
local next_pos = GUI:getPosition(next_att)
GUI:setPosition(next_att, next_pos.x + 100, next_pos.y)
GUI:setOpacity(next_att, 0) -- 初始透明
-- 第三步：下级属性从右向左滑动并渐显
GUI:runAction(next_att, GUI:ActionSequence(
GUI:ActionSpawn( -- 同时执行移动和渐显
GUI:ActionMoveTo(0.4, cur_pos.x, cur_pos.y),
GUI:ActionFadeTo(0.4, 255)
),
GUI:CallFunc(function()
-- 动画完成后的回调
SL:print("第" .. index .. "个属性升级动画完成")
end)
))
end)
))
end
end
end
-- 返回动画函数，供外部调用
return {
play_upgrade_animation = function()
lib:play_upgrade_animation()
end
}
end
```
**使用说明：**
1. **调用方式**：
```lua
local attr_list = lib:create_attr_list(parent, cur_data, next_data, ...)
-- 当点击升级按钮时
attr_list.play_upgrade_animation()
```
2. **动画流程**：
- 当前属性先渐隐（0.3秒）
- 隐藏当前属性，显示下一级属性
- 下一级属性从右侧滑入并渐显（0.4秒）
3. **参数调整**：
- 动画时间：可以修改 `0.3` 和 `0.4` 来调整动画速度
- 滑动距离：可以修改 `100` 来调整从右侧滑入的距离
4. **注意事项**：
- 动画结束后，当前属性会被隐藏，下一级属性会显示在当前位置
- 如果需要循环使用，可以在动画完成后更新数据并重新调用函数
这样封装后，你只需要在点击升级按钮时调用 `play_upgrade_animation()` 方法即可实现完整的属性切换动画效果。
← 返回问答库