刘芷宁1. 项目概述与核心价值
在游戏UI设计中，动态边框效果是提升视觉反馈的重要手段。这个RainbowFlowBorder解决方案通过Shader实现了七彩流动的边框动画效果，特别适用于结算界面、成就解锁等需要强视觉表现的场景。相比传统UI动画方案，它具有以下核心优势：
- 纯Shader实现：无需逐帧更新Sprite，性能消耗极低
- 物理尺寸一致性：自动适配不同屏幕比例，保持边框宽度一致
- 高度可定制：流动速度、颜色饱和度、发光强度等参数均可调节
- 完整UI兼容：支持Stencil遮罩、RectMask2D等UGUI标准功能
提示：该效果在移动设备上测试显示，开启后仅增加1个Draw Call，对性能影响可以忽略不计。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 效果参数详解与配置指南
2.1 基础参数配置
在Material Inspector中可以看到以下核心参数：
| 参数 | 类型 | 推荐值 | 作用说明 |
|---|---|---|---|
| 流动速度 | Range(-2,2) | 0.3-0.7 | 正值顺时针流动，负值逆时针 |
| 边框宽度 | Range(0.005,0.15) | 0.02-0.05 | 基于短边的物理宽度比例 |
| 圆角半径 | Range(0,0.2) | 0.05-0.1 | 四角圆滑程度 |
| 发光强度 | Range(0,2) | 0.2-0.5 | 边框外发光效果强度 |
| 饱和度 | Range(0,2) | 1.0-1.5 | 颜色鲜艳程度 |
2.2 宽高比适配方案
为确保不同屏幕比例下边框物理宽度一致，系统提供了两种配置方式：
-
自动适配（推荐）
- 挂载RainbowFlowBorderAspectRatio脚本
- 勾选Use Material Instance选项
- 脚本会自动计算并更新宽高比参数
-
手动设置
- 常见比例参考值：
- 16:9横屏 → 1.778
- 9:16竖屏 → 0.5625
- 1:1正方形 → 1.0
- 常见比例参考值：
3. 技术实现深度解析
3.1 彩虹色生成原理
采用HSV色彩空间实现平滑