在做游戏 UI 动效的开发者大概率都接过这样一种需求装备锻造。玩家点击“锻造”按钮炉火升腾进度条走完叮的一声一件新装备弹出来接着是品质闪光、属性飘字最后“确定”按钮出现。需求看起来只有一句话但真正动手做的时候你会发现它远不是“放两段动画”那么简单。锻造结算动效本质上是一个有铺垫、有爆发、有收尾的完整情绪过程。玩家在几秒钟里经历“期待—紧张—结果揭晓”的心理变化动效做得好这枚游戏币就花得值做得粗糙整个锻造玩法的手感都会被拖垮。所以这篇教程想给你一套可落地的思路而不是零散的动画片段。我会从锻造结算动效的构成开始讲清楚时间线怎么设计、序列帧和粒子怎么配合、控制器脚本怎么写、运行结果怎么验证最后再把常见问题和工程规范一并整理出来。读完你就能基于 UGUI 搭建一个完整的锻造结算动效模板并知道怎么在自己的项目里扩展成强化、合成、抽卡结果等同类结算动画。1. 锻造结算动效是什么先分清“动画”和“动效”很多刚接触 UI 特效的开发者会把“动画”和“动效”当成一回事这是第一个认知误区。普通 UI 动画解决的是“元素从 A 到 B 的移动”比如按钮滑入、面板淡入而 UI 动效解决的是“一个交互事件的情绪表达”。锻造结算属于典型的 UI 动效它要同时完成三件事反馈操作结果让玩家明确知道锻造成功还是失败品质是高是低。承接玩法节奏锻造前是漫长的读条等待锻造后是结果面板弹出。结算动效要把“等待的紧张感”转化为“结果的释放感”。强化奖励感知同一把装备普通播放和带闪光、粒子、飘字的播放给玩家的“获得感”完全不同。从这个角度看锻造结算动效不应该只由一个 Animator 动画完成。一个完整的锻造结算流程通常包含这些组成元素组成元素作用常用实现方式背景遮罩隔离前后界面聚焦视线UGUI Image淡入装备/物品图标结果主体Image 配合弹出动画闪光特效品质释放第一视觉冲击序列帧或粒子爆发粒子填充画面氛围Particle System属性/强化值飘字输出数值信息TextMeshPro 文本补间动画确定/继续按钮承接后续交互延迟显示的 Button所以锻造结算动效的技术本质是多个 UI 组件、多种动画手段在一条时间线上协同工作。理解了这一点后面的所有操作都是在拼装这条时间线。2. 常用实现方式对比Animator、序列帧、还是代码控制实现锻造结算动效常见路径有三条。它们并不互斥实际项目往往是组合使用但你需要知道各自的边界。方式一纯 Animator 动画把所有 UI 元素的位移、缩放、透明变化都做成 AnimationClip挂在面板 Canvas 下用 Animator 播放。优点是可视化编辑美术同学方便调曲线。缺点是动效时间线一旦调整你的 AnimationClip 里所有关键帧都要手工移动而且元素多了以后一个状态机里全是跨物体关键帧后期维护非常痛苦。适合“一次成型、很少改动”的动画比如背景遮罩的淡入淡出。方式二序列帧播放器把闪光、爆炸这类表现力强的效果做成序列帧贴图用脚本或 Animator 控制 Sprite 切换。序列帧的好处是效果可控性强美术能按照设计稿画出精确的每一帧坏处是内存占用和包体压力大。一套 512x512 的 30 帧序列帧在未压缩时体积相当可观。所以序列帧只用于关键瞬间比如“出炉闪光”的那 0.3 秒其他持续型效果交给粒子或程序动画。方式三代码控制补间动画用协程、DoTween 或自写插值函数在代码里控制 Image 的 rectTransform 和 CanvasGroup。这是目前 UGUI 动效的主流方式。它的核心优势是时间和数值可控你可以在代码里精确地安排“第 0.2 秒图标弹出第 0.5 秒闪光出现第 0.8 秒粒子爆发”任何一步改动只影响一个方法的几个参数而不是整个动画文件。实际项目中最稳的选型是Animator 负责一次性基础动画序列帧负责高表现力特效协程/补间负责时间线编排。锻造结算里的“时间线控制”一定放到脚本里做。3. 环境准备与工程结构下面进入实操。我默认你使用 UGUI 搭建界面并已经安装好 Unity 与基础 UI 资源包。这里的示例不依赖特定 Unity 版本UGUI 传统组件的方式在 Unity 2019 LTS 以上的版本都能运行如果你现在用的是 URP 项目只要粒子材质使用配套的 URP 粒子 Shader 即可。3.1 推荐工程目录结构特效与 UI 相关的资源一定要分类不要全部塞进 Prefabs 文件夹。这里给一套常见的结构Assets/ ├── Art/ │ ├── UI/ │ │ ├── Forge/ │ │ │ ├── Sprites/ # 装备图标、闪光序列帧、品质底板 │ │ │ ├── Particles/ # 炉火粒子、爆发粒子预设 │ │ │ └── Materials/ # 闪光材质、粒子材质 ├── Scripts/ │ ├── UI/ │ │ ├── Forge/ │ │ │ ├── ForgeResultController.cs │ │ │ ├── SpriteSequencePlayer.cs │ │ │ └── UIEasing.cs └── Prefabs/ └── UI/ └── Forge/ └── ForgeResultPanel.prefab3.2 基础资源清单开始写代码前确认以下资源已经准备到位一张半透明黑色遮罩图用于背景压暗。装备/物品图标建议使用 Sprite方便 Image 直接加载。品质底板图灰色、绿色、紫色等品质对应的底图。闪光序列帧推荐 8 到 12 帧512x512 以内压缩格式用默认即可。粒子预设一个小型爆发粒子控制在 20 个粒子以内方便低端机运行。一个 CanvasGroup 组件挂在结果面板根节点上用于整体淡入淡出和禁用射线检测。3.3 UI 层级规划Canvas 内部建议按以下顺序排列BgMask遮罩置顶 ForgeResultPanel结果面板根节点 ├── QualityBg品质底板 ├── Icon装备图标 ├── FlashFX闪光序列帧 Image ├── BurstFX爆发粒子所在节点 ├── ValueText属性飘字 └── ConfirmButton确定按钮默认隐藏顺序很重要。Image 节点的先后顺序决定了遮挡关系粒子节点要放在 Image 之上否则爆发粒子被图标挡住效果会大打折扣。4. 锻造结算动效的时间线设计动手写代码前先把时间线画出来。下面是一个典型的锻造结算流程时间以锻造完成那一刻为 0 点时间区间阶段动作-1.5s ~ 0s锻造读条阶段炉火持续燃烧进度条走满0s ~ 0.2s出炉定格画面停顿炉火熄灭产生期待感0.2s ~ 0.5s图标弹出装备图标从底部弹出带缩放回弹0.5s ~ 0.8s闪光爆发全屏闪光序列帧播放粒子爆发0.8s ~ 1.2s品质展示品质底板淡入图标微光持续1.2s ~ 1.6s数值飘字属性值或强化等级从下往上飘出1.6s ~按钮出现确定按钮淡入交互可用这套时间线不是唯一标准但它能说明一个关键原则动效里要有“停顿”和“峰值”的对比。出炉前的那 0.2 秒定格看似浪费实际上决定了闪光爆发时玩家的情绪强度。如果你从头到尾都在动动效反而没有重点。另外要注意锻造读条阶段不属于结算面板的代码范围但结算面板播放前游戏逻辑可能已经把锻造结果成功、品质、装备 ID计算好了。所以控制器脚本的入口方法应该接收一个结果对象而不是自己生成结果。5. 核心代码实现锻造结算面板控制器下面是整个动效的中枢脚本。它负责接收锻造结果、编排时间线、调用序列帧和粒子组件。// 文件路径Assets/Scripts/UI/Forge/ForgeResultController.cs using System.Collections; using UnityEngine; using UnityEngine.UI; public class ForgeResultController : MonoBehaviour { [Header(面板节点)] public CanvasGroup panelGroup; public Image bgMask; public Image qualityBg; public Image icon; public Image flashFX; public GameObject burstFX; public TextMeshProUGUI valueText; public Button confirmButton; [Header(时间参数)] public float iconPopDelay 0.2f; public float iconPopDuration 0.3f; public float flashDelay 0.5f; public float valueDelay 1.2f; public float buttonDelay 1.6f; [Header(品质颜色)] public Color normalColor Color.gray; public Color rareColor Color.blue; public Color epicColor new Color(0.8f, 0.3f, 0.9f); private Coroutine playRoutine; // 从外部调用传入锻造结果 public void PlayResult(ForgeResultData result) { if (playRoutine ! null) StopCoroutine(playRoutine); ResetPanel(); ApplyQualityColor(result.quality); icon.sprite result.icon; valueText.text result.extraValue; playRoutine StartCoroutine(PlayTimeline()); } private IEnumerator PlayTimeline() { panelGroup.alpha 0f; panelGroup.blocksRaycasts false; confirmButton.gameObject.SetActive(false); flashFX.gameObject.SetActive(false); burstFX.SetActive(false); // 背景遮罩淡入 yield return StartCoroutine(UIEasing.FadeIn(bgMask, 0.15f)); // 整个面板淡入 yield return StartCoroutine(UIEasing.FadeIn(panelGroup, 0.1f)); // 停顿出炉定格 yield return new WaitForSeconds(0.2f); // 图标回弹弹出 yield return StartCoroutine(UIEasing.PopIn(icon.rectTransform, iconPopDelay, iconPopDuration)); // 闪光序列帧 粒子爆发 flashFX.gameObject.SetActive(true); burstFX.SetActive(true); yield return new WaitForSeconds(0.3f); // 关闭闪光和粒子避免残留 flashFX.gameObject.SetActive(false); burstFX.SetActive(false); // 品质底色淡入 yield return StartCoroutine(UIEasing.FadeIn(qualityBg, 0.2f)); // 数值飘字 yield return StartCoroutine(UIEasing.SlideUp(valueText.rectTransform, valueDelay)); // 允许关闭 panelGroup.blocksRaycasts true; confirmButton.gameObject.SetActive(true); yield return StartCoroutine(UIEasing.FadeIn(confirmButton.GetComponentCanvasGroup(), 0.15f)); } private void ResetPanel() { panelGroup.alpha 0f; bgMask.color new Color(bgMask.color.r, bgMask.color.g, bgMask.color.b, 0f); qualityBg.color new Color(qualityBg.color.r, qualityBg.color.g, qualityBg.color.b, 0f); transform.localScale Vector3.one; } private void ApplyQualityColor(ItemQuality quality) { switch (quality) { case ItemQuality.Normal: qualityBg.color normalColor; break; case ItemQuality.Rare: qualityBg.color rareColor; break; case ItemQuality.Epic: qualityBg.color epicColor; break; } } } // 与玩法逻辑配套的数据体 public enum ItemQuality { Normal, Rare, Epic } public class ForgeResultData { public Sprite icon; public ItemQuality quality; public int extraValue; }这段代码里最值得强调的是PlayTimeline这个协程它是时间线的物理载体。细节一StopCoroutine保证重复播放时不会出现两条时间线叠加。很多动效播放第二次时元素乱动往往就是旧协程没停掉。细节二blocksRaycasts的控制很关键。面板在动画播放期间不能接收点击否则玩家还没看完结果就点掉了按钮节奏就乱了。细节三闪光和粒子是“一次性表现”必须在使用后主动关闭否则粒子系统会一直挂在场景里消耗性能。6. 序列帧与粒子的具体实现时间线脚本只负责“什么时候播”真正把效果播出来的是序列帧播放器和粒子系统。下面分别给出实现要点。6.1 序列帧播放器用一个轻量脚本放在闪光 Image 节点上接收 Sprite 数组按帧率播放// 文件路径Assets/Scripts/UI/Forge/SpriteSequencePlayer.cs using System.Collections; using UnityEngine; using UnityEngine.UI; public class SpriteSequencePlayer : MonoBehaviour { private Image image; private Sprite[] frames; private float fps 24f; private bool loop; public void Init(Image target, Sprite[] spriteFrames, float frameRate, bool isLoop) { image target; frames spriteFrames; fps frameRate; loop isLoop; } public void Play() { StopAllCoroutines(); StartCoroutine(PlayRoutine()); } public void Stop() { StopAllCoroutines(); image.sprite null; } private IEnumerator PlayRoutine() { if (frames null || frames.Length 0) yield break; float interval 1f / fps; int index 0; while (true) { image.sprite frames[index]; index; if (index frames.Length) { if (loop) { index 0; } else { image.sprite null; yield break; } } yield return new WaitForSeconds(interval); } } }使用方式在ForgeResultController里拿到闪光 Image 节点初始化播放器并传入序列帧数组。序列帧的管理建议通过一个静态配置类或 ScriptableObject把“同一套闪光效果的帧数组”集中到一个地方避免界面预制体里拖入大量 Sprite 引用。序列帧播放有几点容易踩坑一是WaitForSeconds受时间缩放影响游戏中如果有全局Time.timeScale 0的暂停逻辑动画会卡住二是帧数组为空时要直接跳过否则协程里第一行就数组越界三是播放结束记得置空 sprite否则最后一帧会一直留在 UI 上。6.2 粒子系统与 UGUI 的配合粒子系统放在 Canvas 下面要能正确显示关键不在粒子参数而在渲染层级。推荐做法是Canvas 使用 Screen Space - Camera 模式把 UI Camera 的 Clear Flags 设为 Solid Color。粒子系统挂在 Canvas 下的独立节点ParticleSystem 的 Renderer Module 中 Sorting Layer 设置为 UISorting Order 设为大于界面的值。这样粒子既能跟随 Canvas 缩放又不会被 UI 元素遮挡。ParticleSystem Renderer 设置建议 - Sorting Layer: UI - Sorting Order: 10高于大多数 UI 元素 - Render Mode: Billboard - Material: 使用 URP/内置管线对应的粒子材质粒子参数不需要一上来调得很大。一套锻造爆发粒子建议发射数量控制在 20 个以内持续 0.3 到 0.5 秒配合闪光序列帧一起播放。粒子的作用不是替代闪光而是填充画面边缘的细节两者叠加才有“炸开”的感觉。7. 运行方式与效果验证代码写完后接下来最关键的一步是在 Unity 编辑器里验证动效节奏和资源表现。7.1 搭建测试场景创建一个空场景按下面的结构搭建测试 UI创建 CanvasRender Mode 设为 Screen Space - Camera指定 UI Camera。使用上面的层级结构创建 ForgeResultPanel 预制体。把控制器脚本挂到面板根节点。在 Inspector 里把各个 Image、粒子对象、按钮拖到对应变量上。在场景中放一个测试按钮点击时调用PlayResult并传入模拟的ForgeResultData。测试用数据需要新建一个简单脚本临时赋值比如// 测试调用示例 public class ForgeTestButton : MonoBehaviour { public ForgeResultController controller; void Start() { var data new ForgeResultData(); data.icon Resources.LoadSprite(Sprites/Forge/sword_icon); data.quality ItemQuality.Epic; data.extraValue 128; controller.PlayResult(data); } }7.2 验证清单运行场景后逐项检查检查项预期结果动效顺序遮罩淡入 → 面板出现 → 图标回弹 → 闪光 → 品质 → 飘字 → 按钮闪光表现序列帧最后一帧被清空不残留粒子表现爆发粒子能正常显示不与 UI 穿插遮挡按钮交互动画播放完成前无法点击按钮重复播放第二次点击锻造时上一次动画被正确重置性能动画中 DrawCall 峰值相对稳定粒子不持续驻留DrawCall 检查可以在 Game 窗口打开 Stats 面板。UGUI 的 Image 变化和粒子系统都会影响 Batches 数值如果动画播放时 Batches 剧烈上涨优先检查是否新增了太多独立的 Image 节点或粒子材质与默认 UI 材质不在同一批次。常见的优化方式是把静态的底板、图标合并进同一张图集减少独立材质切换。8. 常见问题与排查方法下面整理几个锻造结算动效中容易翻车的问题这些场景在各类 UI 特效项目里都非常典型。问题现象可能原因排查方式解决方案粒子在 UI 后面显示不出来Sorting Layer / Order 设置错误或 Canvas 是 Overlay 模式查看 ParticleSystem Renderer 排序设置改 Canvas 为 Screen Space - Camera并设置粒子 Sorting Order第二次播放时元素位置错乱上一次协程未停止两个时间线叠加执行检查 PlayResult 入口是否 StopCoroutine在 PlayResult 开头停止旧协程并 ResetPanel闪光序列帧播放后最后一帧残留播放结束未置空 Sprite单步查看 SpriteSequencePlayer播放结束时 image.sprite null动画播着播着整个面板冻住脚本中有未捕获异常协程提前退出打开 Console 查看异常信息在协程关键步骤加空引用检查确保所有 Image 已赋值低端机掉帧序列帧尺寸过大、粒子数量过多在 Profiler 中查看 UI/粒子耗时序列帧压缩粒子发射数量降到 10~20关闭不必要的 Bloom点了按钮后界面无反应blocksRaycasts 没有打开检查协程最后是否执行到恢复代码在时间线末尾恢复 blocksRaycasts true排查协程问题时最容易用的工具就是 Unity 的 Console 日志。在PlayTimeline的每个阶段加一行Debug.Log能看到每个阶段是否按预期执行。如果某个阶段没有日志输出基本能锁定坍缩点。9. 最佳实践与工程建议锻造结算动效的代码量不算大但一旦接入真实项目就会遇到资源、性能、代码结构各种问题。这里给出几条工程建议能帮你少走很多弯路。9.1 时间线参数不要写死在代码里上面代码中的iconPopDelay、flashDelay都是公共字段已经体现出“参数可调”的思想。实际项目中更推荐把这些参数集中到一个 ScriptableObject 配置里或者挂一个ForgeTimelineConfig组件。美术同学调手感时不需要改代码直接在面板上拖时间轴这一步能明显减少 UI 特效和程序之间的沟通成本。9.2 闪光和粒子的资源管理序列帧不要散落一地统一放进图集或 AssetBundle。一次闪光动效最多保留 8 到 12 帧不要为了“更华丽”硬塞 30 帧。粒子的预设复用也优先于动态创建频繁实例化和销毁粒子系统会造成 GC 与性能波动。9.3 面板关闭时的资源回收玩家在动效播完前点击跳过或者界面被其他系统强制关闭时控制器要提供一个ForceStop方法停止所有协程、关闭粒子、清空残留 Sprite。不做这个处理会出现“面板关了粒子和闪光还在场景里”的脏状态。9.4 音效接入时机锻造结算对音效依赖很高。音效触发点通常有三个出炉定格那一瞬间叮、闪光爆发时重击声、品质结果出现时特定品质音效。音效与视觉的同步偏差不要超过 50 毫秒否则玩家的节奏感会明显失衡。实际项目里音效触发由控制器在时间线对应节点发送事件而不是由音效师在动画轨上手工对帧。9.5 低端机降级方案动效不能一刀切。设备性能偏低时可以关闭粒子系统仅保留序列帧和 Image 动画关闭飘字动画的弹跳细节改为直接显示。通过一个全局的QualityLevel接口判断在PlayResult入口决定是否播粒子。9.6 支持动效跳过手游中锻造结果是需要玩家反复观看的流程。大多数项目会给一个“快速点击跳过”机制点击屏幕直接跳到按钮出现阶段。实现方式是在控制器里写一个FastForward()方法把协程中所有WaitForSeconds替换为即时返回并直接设置各元素最终状态。这属于体验层面的加分项但如果玩法重复频率高最好在一开始就预留。10. 总结与后续学习方向锻造结算动效做好的关键不是某个粒子参数调得多炫而是先把时间线想清楚。你只要理解“铺垫—定格—爆发—展示—交互”这个节奏模型再配合序列帧、粒子、补间脚本三种工具就能应对绝大多数结算类 UI 动效需求。这篇文章里给出的控制器、序列帧播放器和时间线参数可以直接作为项目模板使用。换到强化玩法时把图标换成装备、飘字换成强化等级换到抽卡结果时把“出炉闪光”换成卡片翻转角度。整体结构不需要大改你获得的是一套可复用的 UI 动效编排思路。如果你想继续深入下一步可以重点学两个方向一是 Shader闪光效果如果接入自定义 Shader就能在同一帧里做出扭曲、放射、辉光等更立体的表现视觉上限会高出很多二是资源管理把动效接入 AssetBundle 的按需加载能有效控制包体和内存峰值这对中大型项目非常关键。先跑通上面的模板再去看这两块内容你的 UI 动效水平会在实战里很快拉开差距。 在做游戏 UI 动效的开发者大概率都接过这样一种需求装备锻造。玩家点击“锻造”按钮炉火升腾进度条走完叮的一声一件新装备弹出来接着是品质闪光、属性飘字最后“确定”按钮出现。需求看起来只有一句话但真正动手做的时候你会发现它远不是“放两段动画”那么简单。锻造结算动效本质上是一个有铺垫、有爆发、有收尾的完整情绪过程。玩家在几秒钟里经历“期待—紧张—结果揭晓”的心理变化动效做得好这枚游戏币就花得值做得粗糙整个锻造玩法的手感都会被拖垮。所以这篇教程想给你一套可落地的思路而不是零散的动画片段。我会从锻造结算动效的构成开始讲清楚时间线怎么设计、序列帧和粒子怎么配合、控制器脚本怎么写、运行结果怎么验证最后再把常见问题和工程规范一并整理出来。读完你就能基于 UGUI 搭建一个完整的锻造结算动效模板并知道怎么在自己的项目里扩展成强化、合成、抽卡结果等同类结算动画。1. 锻造结算动效是什么先分清“动画”和“动效”很多刚接触 UI 特效的开发者会把“动画”和“动效”当成一回事这是第一个认知误区。普通 UI 动画解决的是“元素从 A 到 B 的移动”比如按钮滑入、面板淡入而 UI 动效解决的是“一个交互事件的情绪表达”。锻造结算属于典型的 UI 动效它要同时完成三件事反馈操作结果让玩家明确知道锻造成功还是失败品质是高是低。承接玩法节奏锻造前是漫长的读条等待锻造后是结果面板弹出。结算动效要把“等待的紧张感”转化为“结果的释放感”。强化奖励感知同一把装备普通播放和带闪光、粒子、飘字的播放给玩家的“获得感”完全不同。从这个角度看锻造结算动效不应该只由一个 Animator 动画完成。一个完整的锻造结算流程通常包含这些组成元素组成元素作用常用实现方式背景遮罩隔离前后界面聚焦视线UGUI Image淡入装备/物品图标结果主体Image 配合弹出动画闪光特效品质释放第一视觉冲击序列帧或粒子爆发粒子填充画面氛围Particle System属性/强化值飘字输出数值信息TextMeshPro 文本补间动画确定/继续按钮承接后续交互延迟显示的 Button所以锻造结算动效的技术本质是多个 UI 组件、多种动画手段在一条时间线上协同工作。理解了这一点后面的所有操作都是在拼装这条时间线。2. 常用实现方式对比Animator、序列帧、还是代码控制实现锻造结算动效常见路径有三条。它们并不互斥实际项目往往是组合使用但你需要知道各自的边界。方式一纯 Animator 动画把所有 UI 元素的位移、缩放、透明变化都做成 AnimationClip挂在面板 Canvas 下用 Animator 播放。优点是可视化编辑美术同学方便调曲线。缺点是动效时间线一旦调整你的 AnimationClip 里所有关键帧都要手工移动而且元素多了以后一个状态机里全是跨物体关键帧后期维护非常痛苦。适合“一次成型、很少改动”的动画比如背景遮罩的淡入淡出。方式二序列帧播放器把闪光、爆炸这类表现力强的效果做成序列帧贴图用脚本或 Animator 控制 Sprite 切换。序列帧的好处是效果可控性强美术能按照设计稿画出精确的每一帧坏处是内存占用和包体压力大。一套 512x512 的 30 帧序列帧在未压缩时体积相当可观。所以序列帧只用于关键瞬间比如“出炉闪光”的那 0.3 秒其他持续型效果交给粒子或程序动画。方式三代码控制补间动画用协程、DoTween 或自写插值函数在代码里控制 Image 的 rectTransform 和 CanvasGroup。这是目前 UGUI 动效的主流方式。它的核心优势是时间和数值可控你可以在代码里精确地安排“第 0.2 秒图标弹出第 0.5 秒闪光出现第 0.8 秒粒子爆发”任何一步改动只影响一个方法的几个参数而不是整个动画文件。实际项目中最稳的选型是Animator 负责一次性基础动画序列帧负责高表现力特效协程/补间负责时间线编排。锻造结算里的“时间线控制”一定放到脚本里做。3. 环境准备与工程结构下面进入实操。我默认你使用 UGUI 搭建界面并已经安装好 Unity 与基础 UI 资源包。这里的示例不依赖特定 Unity 版本UGUI 传统组件的方式在 Unity 2019 LTS 以上的版本都能运行如果你现在用的是 URP 项目只要粒子材质使用配套的 URP 粒子 Shader 即可。3.1 推荐工程目录结构特效与 UI 相关的资源一定要分类不要全部塞进 Prefabs 文件夹。这里给一套常见的结构Assets/ ├── Art/ │ ├── UI/ │ │ ├── Forge/ │ │ │ ├── Sprites/ # 装备图标、闪光序列帧、品质底板 │ │ │ ├── Particles/ # 炉火粒子、爆发粒子预设 │ │ │ └── Materials/ # 闪光材质、粒子材质 ├── Scripts/ │ ├── UI/ │ │ ├── Forge/ │ │ │ ├── ForgeResultController.cs │ │ │ ├── SpriteSequencePlayer.cs │ │ │ └── UIEasing.cs └── Prefabs/ └── UI/ └── Forge/ └── ForgeResultPanel.prefab3.2 基础资源清单开始写代码前确认以下资源已经准备到位一张半透明黑色遮罩图用于背景压暗。装备/物品图标建议使用 Sprite方便 Image 直接加载。品质底板图灰色、绿色、紫色等品质对应的底图。闪光序列帧推荐 8 到 12 帧512x512 以内压缩格式用默认即可。粒子预设一个小型爆发粒子控制在 20 个粒子以内方便低端机运行。一个 CanvasGroup 组件挂在结果面板根节点上用于整体淡入淡出和禁用射线检测。3.3 UI 层级规划Canvas 内部建议按以下顺序排列BgMask遮罩置顶 ForgeResultPanel结果面板根节点 ├── QualityBg品质底板 ├── Icon装备图标 ├── FlashFX闪光序列帧 Image ├── BurstFX爆发粒子所在节点 ├── ValueText属性飘字 └── ConfirmButton确定按钮默认隐藏顺序很重要。Image 节点的先后顺序决定了遮挡关系粒子节点要放在 Image 之上否则爆发粒子被图标挡住效果会大打折扣。4. 锻造结算动效的时间线设计动手写代码前先把时间线画出来。下面是一个典型的锻造结算流程时间以锻造完成那一刻为 0 点时间区间阶段动作-1.5s ~ 0s锻造读条阶段炉火持续燃烧进度条走满0s ~ 0.2s出炉定格画面停顿炉火熄灭产生期待感0.2s ~ 0.5s图标弹出装备图标从底部弹出带缩放回弹0.5s ~ 0.8s闪光爆发全屏闪光序列帧播放粒子爆发0.8s ~ 1.2s品质展示品质底板淡入图标微光持续1.2s ~ 1.6s数值飘字属性值或强化等级从下往上飘出1.6s ~按钮出现确定按钮淡入交互可用这套时间线不是唯一标准但它能说明一个关键原则动效里要有“停顿”和“峰值”的对比。出炉前的那 0.2 秒定格看似浪费实际上决定了闪光爆发时玩家的情绪强度。如果你从头到尾都在动动效反而没有重点。另外要注意锻造读条阶段不属于结算面板的代码范围但结算面板播放前游戏逻辑可能已经把锻造结果成功、品质、装备 ID计算好了。所以控制器脚本的入口方法应该接收一个结果对象而不是自己生成结果。5. 核心代码实现锻造结算面板控制器下面是整个动效的中枢脚本。它负责接收锻造结果、编排时间线、调用序列帧和粒子组件。// 文件路径Assets/Scripts/UI/Forge/ForgeResultController.cs using System.Collections; using UnityEngine; using UnityEngine.UI; public class ForgeResultController : MonoBehaviour { [Header(面板节点)] public CanvasGroup panelGroup; public Image bgMask; public Image qualityBg; public Image icon; public Image flashFX; public GameObject burstFX; public TextMeshProUGUI valueText; public Button confirmButton; [Header(时间参数)] public float iconPopDelay 0.2f; public float iconPopDuration 0.3f; public float flashDelay 0.5f; public float valueDelay 1.2f; public float buttonDelay 1.6f; [Header(品质颜色)] public Color normalColor Color.gray; public Color rareColor Color.blue; public Color epicColor new Color(0.8f, 0.3f, 0.9f); private Coroutine playRoutine; // 从外部调用传入锻造结果 public void PlayResult(ForgeResultData result) { if (playRoutine ! null) StopCoroutine(playRoutine); ResetPanel(); ApplyQualityColor(result.quality); icon.sprite result.icon; valueText.text result.extraValue; playRoutine StartCoroutine(PlayTimeline()); } private IEnumerator PlayTimeline() { panelGroup.alpha 0f; panelGroup.blocksRaycasts false; confirmButton.gameObject.SetActive(false); flashFX.gameObject.SetActive(false); burstFX.SetActive(false); // 背景遮罩淡入 yield return StartCoroutine(UIEasing.FadeIn(bgMask, 0.15f)); // 整个面板淡入 yield return StartCoroutine(UIEasing.FadeIn(panelGroup, 0.1f)); // 停顿出炉定格 yield return new WaitForSeconds(0.2f); // 图标回弹弹出 yield return StartCoroutine(UIEasing.PopIn(icon.rectTransform, iconPopDelay, iconPopDuration)); // 闪光序列帧 粒子爆发 flashFX.gameObject.SetActive(true); burstFX.SetActive(true); yield return new WaitForSeconds(0.3f); // 关闭闪光和粒子避免残留 flashFX.gameObject.SetActive(false); burstFX.SetActive(false); // 品质底色淡入 yield return StartCoroutine(UIEasing.FadeIn(qualityBg, 0.2f)); // 数值飘字 yield return StartCoroutine(UIEasing.SlideUp(valueText.rectTransform, valueDelay)); // 允许关闭 panelGroup.blocksRaycasts true; confirmButton.gameObject.SetActive(true); yield return StartCoroutine(UIEasing.FadeIn(confirmButton.GetComponentCanvasGroup(), 0.15f)); } private void ResetPanel() { panelGroup.alpha 0f; bgMask.color new Color(bgMask.color.r, bgMask.color.g, bgMask.color.b, 0f); qualityBg.color new Color(qualityBg.color.r, qualityBg.color.g, qualityBg.color.b, 0f); transform.localScale Vector3.one; } private void ApplyQualityColor(ItemQuality quality) { switch (quality) { case ItemQuality.Normal: qualityBg.color normalColor; break; case ItemQuality.Rare: qualityBg.color rareColor; break; case ItemQuality.Epic: qualityBg.color epicColor; break; } } } // 与玩法逻辑配套的数据体 public enum ItemQuality { Normal, Rare, Epic } public class ForgeResultData { public Sprite icon; public ItemQuality quality; public int extraValue; }这段代码里最值得强调的是PlayTimeline这个协程它是时间线的物理载体。细节一StopCoroutine保证重复播放时不会出现两条时间线叠加。很多动效播放第二次时元素乱动往往就是旧协程没停掉。细节二blocksRaycasts的控制很关键。面板在动画播放期间不能接收点击否则玩家还没看完结果就点掉了按钮节奏就乱了。细节三闪光和粒子是“一次性表现”必须在使用后主动关闭否则粒子系统会一直挂在场景里消耗性能。6. 序列帧与粒子的具体实现时间线脚本只负责“什么时候播”真正把效果播出来的是序列帧播放器和粒子系统。下面分别给出实现要点。6.1 序列帧播放器用一个轻量脚本放在闪光 Image 节点上接收 Sprite 数组按帧率播放// 文件路径Assets/Scripts/UI/Forge/SpriteSequencePlayer.cs using System.Collections; using UnityEngine; using UnityEngine.UI; public class SpriteSequencePlayer : MonoBehaviour { private Image image; private Sprite[] frames; private float fps 24f; private bool loop; public void Init(Image target, Sprite[] spriteFrames, float frameRate, bool isLoop) { image target; frames spriteFrames; fps frameRate; loop isLoop; } public void Play() { StopAllCoroutines(); StartCoroutine(PlayRoutine()); } public void Stop() { StopAllCoroutines(); image.sprite null; } private IEnumerator PlayRoutine() { if (frames null || frames.Length 0) yield break; float interval 1f / fps; int index 0; while (true) { image.sprite frames[index]; index; if (index frames.Length) { if (loop) { index 0; } else { image.sprite null; yield break; } } yield return new WaitForSeconds(interval); } } }使用方式在ForgeResultController里拿到闪光 Image 节点初始化播放器并传入序列帧数组。序列帧的管理建议通过一个静态配置类或 ScriptableObject把“同一套闪光效果的帧数组”集中到一个地方避免界面预制体里拖入大量 Sprite 引用。序列帧播放有几点容易踩坑一是WaitForSeconds受时间缩放影响游戏中如果有全局Time.timeScale 0的暂停逻辑动画会卡住二是帧数组为空时要直接跳过否则协程里第一行就数组越界三是播放结束记得置空 sprite否则最后一帧会一直留在 UI 上。6.2 粒子系统与 UGUI 的配合粒子系统放在 Canvas 下面要能正确显示关键不在粒子参数而在渲染层级。推荐做法是Canvas 使用 Screen Space - Camera 模式把 UI Camera 的 Clear Flags 设为 Solid Color。粒子系统挂在 Canvas 下的独立节点ParticleSystem 的 Renderer Module 中 Sorting Layer 设置为 UISorting Order 设为大于界面的值。这样粒子既能跟随 Canvas 缩放又不会被 UI 元素遮挡。ParticleSystem Renderer 设置建议 - Sorting Layer: UI - Sorting Order: 10高于大多数 UI 元素 - Render Mode: Billboard - Material: 使用 URP/内置管线对应的粒子材质粒子参数不需要一上来调得很大。一套锻造爆发粒子建议发射数量控制在 20 个以内持续 0.3 到 0.5 秒配合闪光序列帧一起播放。粒子的作用不是替代闪光而是填充画面边缘的细节两者叠加才有“炸开”的感觉。7. 运行方式与效果验证代码写完后接下来最关键的一步是在 Unity 编辑器里验证动效节奏和资源表现。7.1 搭建测试场景创建一个空场景按下面的结构搭建测试 UI创建 CanvasRender Mode 设为 Screen Space - Camera指定 UI Camera。使用上面的层级结构创建 ForgeResultPanel 预制体。把控制器脚本挂到面板根节点。在 Inspector 里把各个 Image、粒子对象、按钮拖到对应变量上。在场景中放一个测试按钮点击时调用PlayResult并传入模拟的ForgeResultData。测试用数据需要新建一个简单脚本临时赋值比如// 测试调用示例 public class ForgeTestButton : MonoBehaviour { public ForgeResultController controller; void Start() { var data new ForgeResultData(); data.icon Resources.LoadSprite(Sprites/Forge/sword_icon); data.quality ItemQuality.Epic; data.extraValue 128; controller.PlayResult(data); } }7.2 验证清单运行场景后逐项检查检查项预期结果动效顺序遮罩淡入 → 面板出现 → 图标回弹 → 闪光 → 品质 → 飘字 → 按钮闪光表现序列帧最后一帧被清空不残留粒子表现爆发粒子能正常显示不与 UI 穿插遮挡按钮交互动画播放完成前无法点击按钮重复播放第二次点击锻造时上一次动画被正确重置性能动画中 DrawCall 峰值相对稳定粒子不持续驻留DrawCall 检查可以在 Game 窗口打开 Stats 面板。UGUI 的 Image 变化和粒子系统都会影响 Batches 数值如果动画播放时 Batches 剧烈上涨优先检查是否新增了太多独立的 Image 节点或粒子材质与默认 UI 材质不在同一批次。常见的优化方式是把静态的底板、图标合并进同一张图集减少独立材质切换。8. 常见问题与排查方法下面整理几个锻造结算动效中容易翻车的问题这些场景在各类 UI 特效项目里都非常典型。问题现象可能原因排查方式解决方案粒子在 UI 后面显示不出来Sorting Layer / Order 设置错误或 Canvas 是 Overlay 模式查看 ParticleSystem Renderer 排序设置改 Canvas 为 Screen Space - Camera并设置粒子 Sorting Order第二次播放时元素位置错乱上一次协程未停止两个时间线叠加执行检查 PlayResult 入口是否 StopCoroutine在 PlayResult 开头停止旧协程并 ResetPanel闪光序列帧播放后最后一帧残留播放结束未置空 Sprite单步查看 SpriteSequencePlayer播放结束时 image.sprite null动画播着播着整个面板冻住脚本中有未捕获异常协程提前退出打开 Console 查看异常信息在协程关键步骤加空引用检查确保所有 Image 已赋值低端机掉帧序列帧尺寸过大、粒子数量过多在 Profiler 中查看 UI/粒子耗时序列帧压缩粒子发射数量降到 10~20关闭不必要的 Bloom点了按钮后界面无反应blocksRaycasts 没有打开检查协程最后是否执行到恢复代码在时间线末尾恢复 blocksRaycasts true排查协程问题时最容易用的工具就是 Unity 的 Console 日志。在PlayTimeline的每个阶段加一行Debug.Log能看到每个阶段是否按预期执行。如果某个阶段没有日志输出基本能锁定坍缩点。9. 最佳实践与工程建议锻造结算动效的代码量不算大但一旦接入真实项目就会遇到资源、性能、代码结构各种问题。这里给出几条工程建议能帮你少走很多弯路。9.1 时间线参数不要写死在代码里上面代码中的iconPopDelay、flashDelay都是公共字段已经体现出“参数可调”的思想。实际项目中更推荐把这些参数集中到一个 ScriptableObject 配置里或者挂一个ForgeTimelineConfig组件。美术同学调手感时不需要改代码直接在面板上拖时间轴这一步能明显减少 UI 特效和程序之间的沟通成本。9.2 闪光和粒子的资源管理序列帧不要散落一地统一放进图集或 AssetBundle。一次闪光动效最多保留 8 到 12 帧不要为了“更华丽”硬塞 30 帧。粒子的预设复用也优先于动态创建频繁实例化和销毁粒子系统会造成 GC 与性能波动。9.3 面板关闭时的资源回收玩家在动效播完前点击跳过或者界面被其他系统强制关闭时控制器要提供一个ForceStop方法停止所有协程、关闭粒子、清空残留 Sprite。不做这个处理会出现“面板关了粒子和闪光还在场景里”的脏状态。9.4 音效接入时机锻造结算对音效依赖很高。音效触发点通常有三个出炉定格那一瞬间叮、闪光爆发时重击声、品质结果出现时特定品质音效。音效与视觉的同步偏差不要超过 50 毫秒否则玩家的节奏感会明显失衡。实际项目里音效触发由控制器在时间线对应节点发送事件而不是由音效师在动画轨上手工对帧。9.5 低端机降级方案动效不能一刀切。设备性能偏低时可以关闭粒子系统仅保留序列帧和 Image 动画关闭飘字动画的弹跳细节改为直接显示。通过一个全局的QualityLevel接口判断在PlayResult入口决定是否播粒子。9.6 支持动效跳过手游中锻造结果是需要玩家反复观看的流程。大多数项目会给一个“快速点击跳过”机制点击屏幕直接跳到按钮出现阶段。实现方式是在控制器里写一个FastForward()方法把协程中所有WaitForSeconds替换为即时返回并直接设置各元素最终状态。这属于体验层面的加分项但如果玩法重复频率高最好在一开始就预留。10. 总结与后续学习方向锻造结算动效做好的关键不是某个粒子参数调得多炫而是先把时间线想清楚。你只要理解“铺垫—定格—爆发—展示—交互”这个节奏模型再配合序列帧、粒子、补间脚本三种工具就能应对绝大多数结算类 UI 动效需求。这篇文章里给出的控制器、序列帧播放器和时间线参数可以直接作为项目模板使用。换到强化玩法时把图标换成装备、飘字换成强化等级换到抽卡结果时把“出炉闪光”换成卡片翻转角度。整体结构不需要大改你获得的是一套可复用的 UI 动效编排思路。如果你想继续深入下一步可以重点学两个方向一是 Shader闪光效果如果接入自定义 Shader就能在同一帧里做出扭曲、放射、辉光等更立体的表现视觉上限会高出很多二是资源管理把动效接入 AssetBundle 的按需加载能有效控制包体和内存峰值这对中大型项目非常关键。先跑通上面的模板再去看这两块内容你的 UI 动效水平会在实战里很快拉开差距。