三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

Unity Shader Graph实现动态椭圆环UI：GPU驱动的高性能进度条方案

发布时间：2026/8/11 6:28:28 三亩地 编程学习日记
Unity Shader Graph实现动态椭圆环UI：GPU驱动的高性能进度条方案

1. 项目概述：一个“套圈”UI背后的技术拆解

最近在做一个休闲小游戏，里面有个核心玩法是“套圈”——玩家需要控制一个不断缩放的椭圆环，在合适的时机套住移动的目标。为了把这个交互做得既直观又有趣，我花了些时间折腾了一套完整的UI方案。核心就是一个椭圆环，它的缩放、进度填充、颜色变化都需要实时、流畅地反馈给玩家。直接用Sprite序列帧或者Unity的Image组件做缩放，效果生硬且性能开销大，特别是当需要高频更新时。所以，我决定用Shader来驱动整个视觉效果，把计算从CPU转移到GPU，实现丝滑的动态效果。

这个方案的核心，就是标题里提到的“椭圆环 Shader + 动态进度”。它本质上是一个高度定制化的UI Shader，运行在Unity的Canvas渲染体系下。Shader负责绘制一个参数化的椭圆环，并接受脚本控制的参数（如进度、环宽、颜色）来实时改变外观。而C#脚本则负责游戏逻辑，比如计算当前套圈的“完成度”或“能量值”，并将其映射为Shader的进度参数。这样做的好处非常明显：视觉效果极度灵活，一个材质球就能实现无数种状态；性能开销极低，所有图形变换都在GPU端完成；与游戏逻辑解耦，美术和程序可以并行工作。

这个实现不仅适用于套圈游戏，任何需要环形进度条、能量槽、瞄准圈、技能冷却指示器的地方都可以复用。比如，一个带有扭曲效果的能量吸收环，或者一个随着时间收缩的倒计时圈。接下来，我就把这个从Shader编写到UI集成的完整过程，以及中间踩过的坑，详细分享一下。

2. 核心思路与方案选型：为什么是Shader Graph？

当决定用技术方案实现这个动态椭圆环时，摆在我面前的有几条路：传统的UGUI Image组件配合遮罩、使用粒子系统、或者编写Shader。我们来快速分析一下：

方案一：UGUI Image + 遮罩/填充这是最直接的想法。用一个环状Sprite，通过Image组件的Fill Amount属性来控制进度，或者用RectTransform的缩放来模拟环的大小变化。但问题很快暴露：

  1. 锯齿与变形：Fill Amount是沿固定方向（如顺时针）填充，对于椭圆这种非圆形的环，填充的起始点和结束点处理起来很别扭，视觉上不精确。缩放整个Image则会导致环的宽度不均匀，椭圆会变形。
  2. 效果单一：很难实现内外双描边、动态渐变色、扭曲等高级效果。每个新效果都可能需要叠加多个UI元素，Draw Call飙升。
  3. 性能瓶颈：频繁修改UI属性（如缩放、旋转、颜色）是在CPU端进行的，虽然Unity做了优化，但在低端移动设备上，大量UI动画仍是性能杀手。

方案二：粒子系统Unity的Particle System非常强大，可以做出很炫的发光、流动效果。我曾考虑用粒子“拼”出一个环。但它的缺点在于：

  1. 控制精度不足：让粒子严格排列成一个平滑的、参数可调的椭圆环，需要复杂的发射器形状和力场控制，代码复杂。
  2. UI集成度低：粒子系统默认在世界空间渲染，要集成到UI层需要设置Render Mode为Screen Space - Overlay或使用Particle System Renderer的Sorting Layer，管理起来比纯粹的UI组件麻烦。
  3. 过度设计：对于“一个参数化几何图形”这种需求，用粒子系统属于杀鸡用牛刀，不必要的性能开销（Overdraw）会很大。

方案三：自定义Shader（Shader Graph）这是最终选择的方案。使用Unity的Shader Graph可视化工具编写一个Unlit Shader，专门用于在UI上绘制椭圆环。

  1. 极致灵活与性能：所有顶点和片元计算都在GPU上。我们只需要在C#脚本中通过MaterialPropertyBlock或直接修改Material的属性，就能驱动整个环的变化，CPU开销几乎为零。
  2. 效果无限可能：在Shader Graph里，我们可以用数学公式精确控制椭圆的形状、环的宽度、进度填充的算法（支持顺/逆时针、任意起点）、内外描边的颜色与宽度，甚至可以加入噪声图来实现边缘的“能量波动”效果。
  3. 完美UI集成：生成的Shader可以创建一个Material，直接赋给一个Raw Image或Image（需选择正确的Shader）。它完全遵循UI的RectTransform布局、锚点和层级关系，管理起来和普通UI毫无二致。

注意：这里有一个关键选择点。对于UI Shader，通常推荐使用UI/Unlit或Sprites/Default这类模板，因为它们默认处理了UI的Alpha混合和颜色空间。在Shader Graph中创建时，应选择Blank Shader Graph，然后在Graph Inspector里将Graph Settings中的Material设置为Unlit，Surface设置为Transparent。这能确保它在Canvas上正确渲染。

所以，结论很清晰：为了获得高性能、高自由度、且易于集成的动态椭圆环，基于Shader Graph的自定义Shader方案是最优解。它把视觉表现的复杂度封装在材质内部，对外只暴露几个简单的参数接口，完美实现了关注点分离。

3. Shader Graph 核心节点网络详解

确定了方案，我们就进入Shader Graph的具体实现。我不会贴出整个庞大的节点图，而是拆解成几个功能模块来讲解其原理和节点连接。假设你已经创建了一个新的Shader Graph。

3.1 基础椭圆环形状生成

椭圆环的数学本质是：所有到两个焦点距离之和为常数的点的集合。但在Shader里，我们用更简单的距离场方法来近似。一个常见的技巧是利用Ellipse节点，或者用Length节点对缩放后的UV进行计算。

步骤与节点逻辑：

  1. UV坐标归一化：首先，使用Sample Texture 2D节点的UV输入（或者直接用UV节点），但我们需要将其从[0,1]范围映射到[-1,1]的中心对称坐标系。使用Tiling And Offset节点，将Tiling设为2，Offset设为-1，即可实现。我们称这个结果为Centered UV。
  2. 计算椭圆距离场：椭圆的公式是(x/a)² + (y/b)² = 1。在Shader中，我们可以用Length节点来模拟。将Centered UV的x和y分量分别除以椭圆的半长轴RadiusX和半短轴RadiusY（这两个是Vector1类型的属性，暴露给材质），然后用Length节点计算这个缩放后向量的长度。这个长度值dist就是当前像素点到椭圆中心（经过椭圆变形后）的“归一化距离”。
    • 如果dist < 1，像素在椭圆内部。
    • 如果dist = 1，像素在椭圆边界上。
    • 如果dist > 1，像素在椭圆外部。
  3. 生成圆环：我们需要的是一个环，而不仅仅是椭圆轮廓。定义两个属性：InnerRadius（内半径比）和OuterRadius（外半径比），范围在[0,1]。它们决定了环的粗细。例如，InnerRadius=0.7,OuterRadius=1.0表示环占据从中心点距离0.7到1.0的区域。
    • 环的“厚度”thickness = OuterRadius - InnerRadius。
    • 环的“中间线”midRadius = (InnerRadius + OuterRadius) / 2。
  4. 平滑阶梯函数：直接用Step节点对比dist和InnerRadius/OuterRadius会产生锯齿严重的硬边。我们需要Smoothstep函数。节点连接如下：
    • Smoothstep(InnerRadius - fuzz, InnerRadius + fuzz, dist)：这个值在环的内部区域为0，在外部区域为1，在边界处平滑过渡。fuzz是一个很小的平滑因子，比如0.01。
    • Smoothstep(OuterRadius - fuzz, OuterRadius + fuzz, dist)：这个值在环的内部区域为1，在外部区域为0。
    • 将这两个结果相乘，就得到了一个在环体区域为1，在环内外区域为0，且边界平滑的蒙版ringMask。
// 节点运算的伪代码概念 vec2 centeredUV = uv * 2.0 - 1.0; vec2 scaledUV = vec2(centeredUV.x / RadiusX, centeredUV.y / RadiusY); float dist = length(scaledUV); float innerSoft = smoothstep(InnerRadius - Fuzz, InnerRadius + Fuzz, dist); float outerSoft = 1.0 - smoothstep(OuterRadius - Fuzz, OuterRadius + Fuzz, dist); // 注意这里用1减 float ringMask = innerSoft * outerSoft;

这个ringMask就是我们绘制任何效果的基础。白色（值1）代表环所在的像素区域。

3.2 动态进度填充的实现

这是“套圈”感觉的核心。我们需要根据一个Progress属性（0到1），让环的一部分显示，另一部分隐藏。并且要支持顺时针、逆时针，以及从任意角度开始。

步骤与节点逻辑：

  1. 计算像素角度：我们需要知道当前像素（在归一化中心坐标系下）相对于中心点的角度。使用Arctangent节点（atan2函数）。输入是Centered UV.y和Centered UV.x。注意atan2(y, x)的返回值范围是[-π, π]。我们通常将其映射到[0, 1]：(atan2Result / (2 * PI)) + 0.5。得到angle01。
  2. 进度比较：进度填充的本质是，所有角度小于Progress * 360°的像素显示，其余隐藏。但由于起点可能不是0度（比如从顶部开始），我们需要引入一个StartAngle属性（范围0-1）。计算adjustedAngle = frac(angle01 - StartAngle + 1.0)，确保角度差在[0,1]内。
  3. 生成进度蒙版：将adjustedAngle与Progress比较。如果adjustedAngle < Progress，则该像素在进度范围内。使用Step节点即可：progressMask = step(adjustedAngle, Progress)。如果需要平滑的边缘，可以再用Smoothstep。
  4. 方向控制：逆时针怎么办？很简单，将比较反过来，或者用1.0 - adjustedAngle作为角度值。我们可以添加一个Boolean属性Clockwise。节点逻辑可以是一个分支：If Clockwise is True, use step(adjustedAngle, Progress); Else, use step(Progress, adjustedAngle)。更巧妙的做法是：direction = lerp(-1, 1, Clockwise)，然后计算angleForCompare = 0.5 + direction * (adjustedAngle - 0.5)，再与0.5比较，这样可以统一处理。
  5. 最终环蒙版：将基础的ringMask与进度蒙版progressMask相乘，得到最终的finalMask。只有既在环的几何区域内，又在当前进度角度内的像素，才会被最终渲染。

实操心得：这里最容易出问题的是角度的周期性和起点。一定要用frac函数处理角度差，确保它始终在[0,1)范围内，否则在StartAngle不为0时，环上会出现一条难看的接缝。另外，测试时要分别用0、0.5、1等极端进度值，以及切换顺逆时针，观察填充是否正确。

3.3 内外描边与颜色混合

有了finalMask，我们就可以上色了。但一个漂亮的环通常有内外两层描边，以及环体本身的颜色，可能还有渐变。

步骤与节点逻辑：

  1. 分离内外边缘：我们可以利用之前计算的距离场dist。内边缘是dist接近InnerRadius的区域，外边缘是dist接近OuterRadius的区域。用Smoothstep可以分别提取出这两个区域的软蒙版，比如innerEdgeMask和outerEdgeMask。它们的宽度由另一个属性EdgeWidth控制。
  2. 颜色分层混合：
    • 定义颜色属性：InnerEdgeColor,OuterEdgeColor,RingColor。
    • 我们可以采用“从底到上”的混合方式： a. 首先，用finalMask乘以RingColor，作为基底颜色baseColor。 b. 然后，用innerEdgeMask去线性混合InnerEdgeColor到baseColor上。因为边缘蒙版也是基于finalMask区域的，所以不会超出环的范围。混合公式可以是：color = lerp(baseColor, InnerEdgeColor, innerEdgeMask)。 c. 同理，再用outerEdgeMask去混合OuterEdgeColor。由于内外边缘不重叠，顺序影响不大。
  3. 动态颜色与渐变：让颜色随着进度变化会更有动感。可以将Progress或angle01作为输入，连接到Gradient节点，然后用Sample Gradient节点获取颜色。将这个动态颜色与之前混合好的颜色再进行一次混合或相乘。
  4. Alpha通道处理：最终输出的颜色Alpha通道，应该由finalMask决定。但为了更好的抗锯齿，我们可以对finalMask本身做一次轻微的平滑处理，或者直接用它作为Alpha。确保在Shader Graph的Master Stack的Alpha端口，连接的是经过处理的finalMask值。
// 颜色混合的伪代码概念 float4 baseColor = RingColor * finalMask; float4 withInnerEdge = lerp(baseColor, InnerEdgeColor, innerEdgeMask); float4 withBothEdges = lerp(withInnerEdge, OuterEdgeColor, outerEdgeMask); // 可选：添加径向渐变 float radialFactor = dist; // 或 remap(dist, InnerRadius, OuterRadius, 0, 1) float4 gradientColor = SampleGradient(GradientAsset, radialFactor); float4 finalColor = withBothEdges * gradientColor; return float4(finalColor.rgb, smoothstep(0, 0.01, finalMask)); // Alpha平滑

至此，Shader Graph的主体网络就搭建完成了。我们需要将RadiusX,RadiusY,InnerRadius,OuterRadius,Progress,StartAngle,Clockwise, 各种Color，以及EdgeWidth等属性都暴露出来，方便在材质面板中调节，更重要的是，让C#脚本可以动态控制。

4. Unity UI 集成与C#动态控制

Shader写好了，生成材质球。接下来就是把它用起来。

4.1 UI组件设置

  1. 在UI Canvas下创建一个Raw Image组件。为什么不直接用Image？因为Image组件对Sprite有特定的优化和网格生成，而我们的Shader可能需要对整个矩形区域进行像素计算，Raw Image更通用，它只是显示一个纹理（或纯色）。当然，Image也可以，只需在Material设置时注意。
  2. 将创建好的材质球拖拽到Raw Image的Material属性上。此时，你应该能看到椭圆环显示出来。
  3. 调整Raw Image的RectTransform的宽高比。因为我们的Shader里RadiusX和RadiusY是独立参数，为了显示一个正圆环，你可以将RectTransform设为正方形，或者通过调整RadiusX/Y的比例来适配任意矩形区域。我推荐后者，因为它更灵活。例如，你可以将RectTransform的宽高设为200100，然后将RadiusX设为0.4，RadiusY设为0.8，这样就能得到一个充满整个200100矩形的椭圆环。

4.2 C#脚本编写与参数驱动

创建一个脚本EllipseRingController，挂载到Raw Image所在的GameObject上。

using UnityEngine; using UnityEngine.UI; public class EllipseRingController : MonoBehaviour { [Header("环控制参数")] [Range(0f, 1f)] public float progress = 0.0f; [Range(0f, 1f)] public float startAngle = 0.0f; // 0-1对应0-360度 public bool clockwise = true; [Range(0f, 0.5f)] public float innerRadius = 0.7f; [Range(0f, 0.5f)] public float outerRadius = 0.9f; public Color ringColor = Color.cyan; public Color innerEdgeColor = Color.white; public Color outerEdgeColor = Color.blue; [Header("动画设置")] public float progressChangeSpeed = 0.5f; // 进度变化速度 private float targetProgress = 0f; private Material ringMaterial; private int propProgress; private int propStartAngle; private int propClockwise; // ... 其他属性ID void Start() { var image = GetComponent<RawImage>(); if (image != null && image.material != null) { // 重要：为了支持多个UI实例独立控制材质参数，必须实例化材质 ringMaterial = new Material(image.material); image.material = ringMaterial; // 预计算Shader属性ID，提升性能 propProgress = Shader.PropertyToID("_Progress"); propStartAngle = Shader.PropertyToID("_StartAngle"); propClockwise = Shader.PropertyToID("_Clockwise"); propInnerRadius = Shader.PropertyToID("_InnerRadius"); propOuterRadius = Shader.PropertyToID("_OuterRadius"); propRingColor = Shader.PropertyToID("_RingColor"); propInnerEdgeColor = Shader.PropertyToID("_InnerEdgeColor"); propOuterEdgeColor = Shader.PropertyToID("_OuterEdgeColor"); } else { Debug.LogError("EllipseRingController: 未找到Raw Image或Material！"); enabled = false; } } void Update() { // 示例：平滑过渡到目标进度 progress = Mathf.MoveTowards(progress, targetProgress, progressChangeSpeed * Time.deltaTime); UpdateMaterialProperties(); } // 外部调用此方法来改变目标进度 public void SetTargetProgress(float target) { targetProgress = Mathf.Clamp01(target); } void UpdateMaterialProperties() { if (ringMaterial != null) { ringMaterial.SetFloat(propProgress, progress); ringMaterial.SetFloat(propStartAngle, startAngle); ringMaterial.SetFloat(propClockwise, clockwise ? 1.0f : 0.0f); // Shader中Bool通常用Float传递 ringMaterial.SetFloat(propInnerRadius, innerRadius); ringMaterial.SetFloat(propOuterRadius, outerRadius); ringMaterial.SetColor(propRingColor, ringColor); ringMaterial.SetColor(propInnerEdgeColor, innerEdgeColor); ringMaterial.SetColor(propOuterEdgeColor, outerEdgeColor); } } // 在Inspector中修改参数时，实时更新预览 void OnValidate() { // OnValidate在编辑器模式下运行，且可能早于Start // 因此需要安全地获取材质 if (Application.isPlaying && ringMaterial != null) { UpdateMaterialProperties(); } else { // 非运行模式下，直接修改共享材质会影响所有使用该材质的对象，需谨慎 // 通常编辑器预览可以通过其他方式，这里不展开 } } }

关键点解析：

  • 材质实例化：在Start中，我们使用new Material(image.material)创建了材质的一个实例。这是至关重要的一步。如果不实例化，直接修改image.material的属性，将会改变这个材质球资产本身，导致场景中所有使用该材质的UI元素都一起改变。实例化后，每个UI对象都有自己的材质副本，可以独立控制。
  • 属性ID缓存：Shader.PropertyToID将属性名称字符串转换为一个整数ID。在Update中频繁调用SetFloat(“_Progress”, value)会因为字符串查找而带来开销。缓存ID后使用SetFloat(id, value)效率更高。
  • 参数驱动：在Update中，我们可以根据游戏逻辑（比如套圈目标的距离、能量积累的速度）来计算progress，然后调用UpdateMaterialProperties更新Shader。所有的视觉变化都由GPU完成，非常高效。

4.3 在“套圈”游戏中的应用逻辑

在具体的套圈游戏里，这个控制器脚本可以这样工作：

  1. 进度计算：progress可以映射为“套圈的准备程度”或“瞄准精度”。例如，当玩家按住屏幕时，一个椭圆环开始收缩（outerRadius减小），当环的尺寸与目标物尺寸匹配时，progress开始从0向1增长。progress的增长速度可以与匹配的完美程度挂钩。
  2. 视觉反馈：当progress很低时，环的颜色可以是红色（ringColor），随着progress增加，可以通过脚本动态地将颜色插值到绿色。这可以通过在UpdateMaterialProperties中计算并设置颜色来实现，而不是暴露给Inspector。
  3. 成功与失败：当progress达到1时，表示套圈成功，可以触发一个动画，比如让环的innerEdgeColor和outerEdgeColor快速闪烁白色，然后播放一个粒子特效。如果失败（松开按钮时progress未满），可以让环快速抖动（通过小幅随机改变startAngle）并变成灰色。

5. 性能优化与常见问题排查

虽然GPU方案性能很好，但在移动端或大量使用时，仍需注意一些细节。

5.1 性能优化要点

  1. Draw Call与材质实例：每个使用了不同参数的Raw Image（因为材质实例化）都会产生一个独立的Draw Call。如果屏幕上需要同时显示几十个动态环，Draw Call会激增。优化方法：

    • 合并：如果多个环的动画逻辑完全相同或相似，可以考虑将它们合并到一个大的纹理图集（Atlas）中，然后通过修改UV在单个Draw Call内绘制多个环。但这需要更复杂的Shader，将位置、大小、进度等作为每个“实例”的属性传入，通常需要用到UnityEngine.UI的Mesh修改或者URP的Shader Graph的Custom Function节点结合StructuredBuffer，实现难度较高。
    • 简化Shader：检查你的Shader Graph节点是否过于复杂。避免在片元着色器中使用过多的高开销节点，如复杂的噪声纹理采样、多次Sample Gradient、嵌套的Branch节点。尽量将计算移到顶点着色器阶段（如果与UV无关）。
    • 使用MaterialPropertyBlock：对于大量相同材质、仅参数不同的对象，使用MaterialPropertyBlock来设置属性，而不是实例化材质。但请注意，UI系统（Graphic组件）默认不支持MaterialPropertyBlock。你需要编写自定义的Graphic派生类来支持它，或者考虑使用Graphics.DrawMesh直接绘制，但这会脱离UI系统的自动合批和布局管理。

  2. Overdraw：我们的Shader在环之外的区域，Alpha为0，但GPU仍然会处理这些片元。确保Raw Image的矩形区域不要过大，刚好包裹住环即可。可以通过调整RadiusX/Y和RectTransform的大小来最小化透明区域。

  3. 属性更新频率：不要在每一帧更新所有属性。如果某些属性（如颜色、描边宽度）在运行时不变，就在初始化时设置一次。只更新变化中的属性，如progress。

5.2 常见问题与解决方案

问题1：环的边缘有锯齿（Aliasing）。

  • 原因：在Smoothstep的过渡区域太窄，或者屏幕分辨率低。
  • 解决方案：
    • 适当增加Smoothstep的过渡区间（fuzz值），比如从0.01增加到0.02。
    • 在Shader Graph的Master Stack中，开启MSAA（多重采样抗锯齿）支持。确保你的Canvas和项目的抗锯齿设置已打开。
    • 可以考虑在最后对finalMask做一次轻微的模糊处理，但这会增加计算量。

问题2：进度填充的起点（StartAngle）改变时，环上出现一条明显的接缝。

  • 原因：角度计算没有正确处理周期性问题。当adjustedAngle = frac(angle01 - StartAngle + 1.0)中的angle01 - StartAngle接近-1或1时，frac函数可能在0和1边界处产生不连续。
  • 解决方案：这是Shader中处理角度周期性的经典问题。确保你的progressMask计算在边界处是连续的。一个更健壮的方法是，不使用step，而使用比较角度差的绝对值：
    float angleDiff = abs(adjustedAngle - 0.5) * 2.0; // 映射到[0,1]，表示与起点的“距离” float progressMask = 1.0 - smoothstep(Progress - 0.01, Progress + 0.01, angleDiff);
    但这会改变填充方式（从起点向两边扩散）。对于严格的顺时针/逆时针填充，必须处理好frac。一个技巧是在计算adjustedAngle后，如果Progress接近1，则对progressMask在0和1边界处进行特殊混合。

问题3：在编辑器里调节参数有效，但运行时没反应。

  • 原因：最常见的原因是脚本中没有正确实例化材质，导致修改了共享的材质资产，但可能被UI系统或其他机制覆盖。
  • 排查步骤：
    1. 在Start方法中打Debug.Log，确认ringMaterial是否被成功创建且不等于null。
    2. 在UpdateMaterialProperties方法中打Debug.Log，输出你设置的属性值，确认它们被正确调用。
    3. 在Unity编辑器的Game视图，选中你的UI对象，查看其Raw Image组件上的Material是否显示为“(Instance)”。如果不是，说明材质没有被实例化。
    4. 检查Shader中暴露的属性名称是否与C#脚本中Shader.PropertyToID里使用的字符串完全一致，包括大小写和下划线。

问题4：在UI构建或滚动时，环的显示异常（如闪烁、错位）。

  • 原因：UI Canvas的渲染顺序、重叠裁剪（Mask）可能影响了我们的自定义Shader。
  • 解决方案：
    • 确保Shader的渲染队列（Queue）设置正确。对于UI，通常使用Transparent队列（"Queue" = "Transparent"）。
    • 检查是否在带有Mask或RectMask2D的组件内部。我们的Shader可能需要支持模板测试（Stencil Test）。在Shader Graph中，可以在Graph Inspector的Active Targets下找到Stencil选项，根据父级Mask的设置进行配置。一个简单的做法是，继承UI默认Shader的模板设置。
    • 如果环在滚动视图里，确保Raw Image的Raycast Target属性根据需求设置（如果不需要交互，可以取消勾选以减少性能开销）。

问题5：想实现更复杂的动态效果，比如环上的光点流动。

  • 思路：这需要在Shader中引入时间（Time节点）和更复杂的纹理采样。
    • 光点流动：可以添加一个Noise或Gradient纹理，根据angle01 + _Time.y * speed作为UV的U方向进行采样，然后将采样结果与环的颜色相乘或叠加。这样就能得到一个沿着环运动的光带。
    • 环的扭曲：可以在计算距离场dist之前，对Centered UV进行扰动。例如，采样一个噪声图，用其影响RadiusX和RadiusY，产生不规则的椭圆形状。
    • 这些高级效果的关键，在于将效果限制在finalMask定义的区域内，并且确保性能可控。对于移动平台，复杂的噪声纹理采样需要谨慎评估。

这套“椭圆环Shader + 动态进度”的方案，从构思到实现，再到优化和问题排查，基本涵盖了UI特效开发的核心流程。它最大的优势在于将表现层逻辑完全交给了可编程、高性能的Shader，让UI动画摆脱了传统组件的束缚。当你掌握了这套方法后，完全可以举一反三，创造出各种复杂的动态UI元素，比如动态多边形进度条、扭曲的文字标签、具有景深效果的图标等等。

编程学习 学习日记 实战经验
← 返回列表