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:50:46 |
👁️ 阅读: 14
要实现点击升级时的属性渐隐渐出动画效果，我们可以直接在 `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 attr_items = {}
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)
-- 存储当前属性项用于动画
attr_items[index] = {
bg = attr_bg,
cur_att = cur_att,
next_att = next_att,
cur_x = cur_x_pos,
next_x = next_x_pos
}
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
})
-- 添加动画函数
self.animate_attr_upgrade = function()
for index, item in ipairs(attr_items) do
if item.cur_att and item.next_att then
-- 第一步：当前属性渐隐
GUI:setOpacity(item.cur_att, 255) -- 确保初始不透明
local fadeOut = GUI:ActionFadeTo(0.3, 0)
-- 第二步：下一级属性从右侧滑入并渐显
-- 先设置到右侧起始位置
local nextPos = GUI:getPosition(item.next_att)
GUI:setPosition(item.next_att, nextPos.x + 100, nextPos.y) -- 从右侧100像素外开始
GUI:setOpacity(item.next_att, 0) -- 初始透明
-- 组合动画：移动+渐显
local moveIn = GUI:ActionMoveTo(0.4, nextPos.x, nextPos.y)
local fadeIn = GUI:ActionFadeTo(0.4, 255)
local spawn = GUI:ActionSpawn(moveIn, fadeIn)
-- 执行动画序列
GUI:runAction(item.cur_att, fadeOut)
GUI:runAction(item.next_att, spawn)
-- 第三步：更新文本内容（将下一级属性变为当前属性）
SL:ScheduleOnce(function()
-- 获取下一级属性的文本和颜色
local next_text = GUI:Text_getString(item.next_att)
local next_color = SL:GetColorByStyleId(next_data.next_color) or "#ffffff"
-- 更新当前属性显示
GUI:Text_setString(item.cur_att, next_text)
GUI:Text_setColor(item.cur_att, next_color)
GUI:setOpacity(item.cur_att, 255) -- 恢复不透明
-- 重置下一级属性位置和透明度
GUI:setPosition(item.next_att, nextPos.x, nextPos.y)
GUI:setOpacity(item.next_att, 255)
-- 可以在这里更新下一级属性的值（如果需要显示新的下一级属性）
-- GUI:Text_setString(item.next_att, "新的下一级值")
end, 0.7) -- 延迟0.7秒执行，等动画完成
end
end
end
end
```
**使用方式：**
```lua
-- 创建属性列表后，需要升级时调用动画函数
if lib.animate_attr_upgrade then
lib:animate_attr_upgrade()
end
```
**动画说明：**
1. **当前属性渐隐**：透明度从255降到0，持续0.3秒
2. **下一级属性滑入**：从右侧100像素外滑入到原位置，同时透明度从0升到255，持续0.4秒
3. **属性更新**：动画完成后，将下一级属性的值更新到当前属性位置
4. **重置状态**：恢复下一级属性的位置和透明度，为下次升级做准备
**注意事项：**
- 动画使用了`GUI:ActionFadeTo`、`GUI:ActionMoveTo`、`GUI:ActionSpawn`等动作函数
- 使用`SL:ScheduleOnce`确保动画完成后再更新文本
- 所有动画都是异步执行，不会阻塞主线程
- 保持原有封装接口不变，只需在需要时调用`animate_attr_upgrade`函数即可
← 返回问答库