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

你的代码是一个创建属性对比列表的封装函数，需要实现动画效果：当前属性渐隐，下一级属性从右向左滑动变为当前属性，然后再渐显出新的下一级属性。 根据浮生梦老师前端课程内容，我们需要在现有函数基础上添加动画逻辑，同时保持函数接口不变。这里使用 `GUI:ActionSequence` 和 `GUI:ActionFadeTo` 等动作来实现。 ```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) 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 -- 设置初始透明度为0（用于渐入动画） GUI:setOpacity(attr_bg, 0) --属性值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) GUI:setOpacity(attr_name, 0) -- 初始透明 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) GUI:setOpacity(next_img, 0) -- 初始透明 --计算左侧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) GUI:setOpacity(cur_att, 0) -- 初始透明 --右侧下级属性（初始位置在右侧屏幕外） 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 local next_att = nil 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) next_att = GUI:Text_Create(attr_bg, "cur_attr_" .. index .. "_2", next_x_pos + 200, -- 初始位置在右侧屏幕外 attr_bg_size.height / 2, 14, next_color, next_attr_val) GUI:setAnchorPoint(next_att, 0.5, 0.5) GUI:setOpacity(next_att, 0) -- 初始透明 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) GUI:setOpacity(frames, 0) -- 初始透明 -- 创建动画序列 local function playAnimation() -- 第一步：渐入显示当前属性 local fadeInActions = GUI:ActionSequence( GUI:ActionFadeTo(0.3, 255), -- 背景渐入 GUI:ActionFadeTo(0.3, 255), -- 属性名渐入 GUI:ActionFadeTo(0.3, 255), -- 当前属性渐入 GUI:ActionFadeTo(0.3, 255), -- 箭头渐入 GUI:ActionFadeTo(0.3, 255) -- 序列帧箭头渐入 ) GUI:runAction(attr_bg, fadeInActions) if attr_name then GUI:runAction(attr_name, GUI:ActionFadeTo(0.3, 255)) end GUI:runAction(cur_att, GUI:ActionFadeTo(0.3, 255)) GUI:runAction(next_img, GUI:ActionFadeTo(0.3, 255)) GUI:runAction(frames, GUI:ActionFadeTo(0.3, 255)) -- 第二步：当前属性渐隐，下一级属性从右向左滑动 if next_att then -- 延迟0.5秒后开始切换 local switchActions = GUI:ActionSequence( GUI:DelayTime(0.5), GUI:ActionSpawn( GUI:ActionSequence( -- 当前属性渐隐 GUI:ActionFadeTo(0.3, 0), GUI:CallFunc(function() -- 渐隐后更新当前属性值 local new_cur_attr_val = next_attr_val if type(new_cur_attr_val) == "number" and has_simple then new_cur_attr_val = SL:GetSimpleNumber(new_cur_attr_val, 2) end GUI:Text_setString(cur_att, new_cur_attr_val) end) ), GUI:ActionSequence( -- 下一级属性向左滑动并渐隐 GUI:ActionSpawn( GUI:ActionMoveTo(0.3, cur_x_pos, attr_bg_size.height / 2), GUI:ActionFadeTo(0.3, 255) ), GUI:CallFunc(function() -- 滑动到位置后变成当前属性，然后渐隐 if next_att then GUI:removeFromParent(next_att) end end), GUI:ActionFadeTo(0.3, 0) ) ), GUI:CallFunc(function() -- 第三步：渐入显示更新后的当前属性 GUI:runAction(cur_att, GUI:ActionSequence( GUI:ActionFadeTo(0.3, 255), GUI:CallFunc(function() -- 动画完成回调 SL:print("属性切换动画完成 index:" .. index) end) )) end) ) -- 运行下一级属性的滑动动画 GUI:runAction(next_att, switchActions) end end -- 延迟执行动画，实现依次播放效果 SL:ScheduleOnce(function() playAnimation() end, 0.1 * index) -- 每个属性间隔0.1秒 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 ``` **主要改动说明：** 1. **初始状态设置**：所有元素初始透明度为0（`GUI:setOpacity(widget, 0)`），下一级属性初始位置在右侧屏幕外。 2. **动画流程**： - **第一步**：所有元素渐入显示（`GUI:ActionFadeTo(0.3, 255)`） - **第二步**：当前属性渐隐，同时下一级属性从右向左滑动到当前位置 - **第三步**：更新当前属性值并渐入显示 3. **动画控制**： - 使用 `GUI:ActionSequence` 组合多个动作 - 使用 `GUI:ActionSpawn` 让多个动作同时执行 - 使用 `GUI:DelayTime` 控制动画延迟 - 使用 `GUI:CallFunc` 在动画关键帧执行回调函数 4. **调用方式**：完全保持原有函数接口，直接调用即可看到动画效果。 **注意**：动画中使用了 `SL:ScheduleOnce` 来实现属性依次播放效果，每个属性间隔0.1秒。如果你需要更快的动画速度，可以调整时间参数。 这样修改后，你调用这个函数时就会自动播放属性切换动画，不需要额外传递参数或修改调用方式。