结算弹窗：九宫格、遮罩和入场动画
依据：Cocos Creator 3.8 Sprite、Mask 与节点事件文档。演示为浏览器原理；微信真机未验证。
目标画面
结算面板包含标题、星级、奖励列表和操作按钮，进入时轻微上移并淡入，背景变暗。简单版本只有固定尺寸与少量奖励；复杂版本支持长标题、不同奖励数量、滚动内容和连续奖励演出。两者都需要明确关闭、返回与防重复领取规则。
暗色覆盖层负责让注意力集中，但“暗”不等于“阻挡点击”。输入阻挡应覆盖有效窗口，面板内部操作继续可用。Mask 则是另一种东西：它裁切内容的可见范围，不能把所有遮罩都理解成同一种功能。
一张背景怎样适应内容
圆角和边框应保持形状，中间区域允许拉伸。九宫格将背景拆成角、边和中心：角通常固定，边沿一个方向拉伸，中心双向拉伸。切分线要放在适合延展的区域；把徽章、文字或装饰放在拉伸区域里会造成变形。
打开九宫格与弹窗实验台，把宽度调大，再切换普通缩放。看清圆角和边框如何变化后，调整高度，检查内容留白。九宫格只解决背景伸缩，文字、列表和按钮仍需自己的布局规则。
动画与布局分工
父节点决定居中、安全区与最大尺寸，子节点负责入场偏移、缩放和透明度。这样布局系统不会与动画争夺位置。内容高度先算清，再播放动画；如果异步奖励到达后面板尺寸变化，应有明确的重排策略，避免弹窗突然跳动。
动图来源：本站浏览器示例录制。
复杂版本新增什么成本
奖励行数变化需要动态布局，超长内容需要滚动及裁切，连续开关需要处理动画打断，多个弹窗需要统一层级。大面积半透明背景与发光也增加像素处理，重复嵌套 Mask 可能影响合批。先保持层级清楚，再加入表现。
常见失败：关闭按钮跟着面板拉长
通常是把关闭图标烘焙进背景或把整个面板当一张图片缩放。将图标作为独立控件对齐角落；面板背景使用九宫格，内容用布局处理。另一个失败是弹窗已经关闭，延迟的入场回调又重新激活节点，应让回调检查当前弹窗状态或取消旧演出。
验收时覆盖最短与最长标题、最少和最多奖励、窄屏、连开连关和背景点击。相关知识见 素材与九宫格、屏幕适配。
官方来源与适用范围
资料核查日期：2026-10-30。文中的案例参数与图解用于教学；目标项目应按所用版本及平台重新验证。