4.3 完整案例：UV 滚动动画

4.3 完整案例：UV 滚动动画

本节摘要：本案例用 Time 节点驱动 Tiling And Offset 的 Offset 输入，让贴图沿任意方向匀速流动，完成"传送带"与"能量流光"两种形态。案例按骨架版、完整版、调参版三段展开，全文覆盖从需求分析到边缘瑕疵处理的完整过程。

案例背景与需求

场景里有一条矿石传送带，要求贴图匀速向后流动，速度可调；另有一根能量管线，要求流光自下而上循环，颜色可调。两个需求共享同一条技术链：贴图采样加滚动 UV。区别只在滚动方向与贴图内容——这正是做成"一张图、两套参数"的好机会。

先明确验收标准：流动方向可控（含对角线方向）、速度在材质面板可调、循环无缝无跳变、移动端可接受。前三条由节点链保证，第四条由"只用一次采样"的设计保证。

骨架版：五个节点先跑通

新建 Unlit 图，按顺序做五件事：加 Texture2D 属性命名 FlowTex 并拖一张平铺型贴图（砖墙、水纹、电路纹都行）；加 Tiling And Offset 节点，Tiling 保持 (1,1)；加 Time 节点；加 Multiply 节点把 Time 的输出乘一个速度值；加一个 Vector2 属性命名 FlowDirection（默认 (1,0) 表示向右流）。节点链是：Time 乘 Speed 得到累计时间，与 FlowDirection 相乘得到二维偏移量，接进 Offset 输入，采样输出接 Base Color。保存，预览球上的贴图开始流动。

这里必须先停下来讲 Time 节点，因为它是本案例的发动机。它有四个输出：Time（从场景启动开始累计的总秒数）、Sine Time（对总秒数取正弦，输出在负一到一之间摆动）、Cosine Time（同理取余弦）、Delta Time（两帧间隔，动画里极少直接用）。滚动动画用的是第一个——总秒数持续增长，乘上方向后 Offset 持续增大，配合 Repeat 包裹模式就形成了循环流动。而 Sine Time 输出的是往复摆动而非持续增长，用它做滚动会"流过去又流回来"——这是初学者最常见的张冠李戴，记住分工：匀速滚动用 Time，往复脉动用 Sine Time。

图：UV 滚动案例的节点结构与数据流

完整版：方向、速度与两种形态

骨架版跑通后升级为完整版。传送带形态：FlowDirection 保持 (1,0)，Speed 滑条范围设为 0 到 3，贴图选横向连续的传送带纹理；如果传送带在模型上"横着走"而贴图是竖纹，把 Tiling 改成 (1,2) 旋转观感，或在 FlowDirection 里交换分量。流光形态：FlowDirection 改为 (0,1) 自下而上，Speed 降到 0.2 到 0.5 之间——流光要的是缓慢的能量感，太快像跑马灯；贴图换成一条竖向亮纹的图，再叠一层 3.1 节的菲涅尔链让管壁边缘也发光，两路输出用 Add 相加后接 Base Color。

方向属性的巧妙用法：FlowDirection 是 Vector2，填 (0.7, 0.7) 就是对角线流动；填负值就是反向。更进一层，把它暴露给材质面板后，同一个材质实例改一个属性就能改变流向——流水线上的双向往返传送带就是这样做的：脚本在两个方向值之间切换，图完全不动。

调参版与瑕疵处理

跑通后处理三个常见瑕疵。瑕疵一：流动有轻微跳变——检查贴图是否左右（或上下）边缘像素一致：滚动无缝要求贴图首尾相接，通用贴图需在图像软件里做偏移环绕处理，或直接用设计为平铺的贴图。瑕疵二：物体移动时图案跟着世界跑——4.2 节讲过三平面用世界坐标的"滑"现象，普通采样用模型 UV 不存在这个问题，但如果你在 UV 链上混进了 Position 节点就会复现，检查连线。瑕疵三：远处闪烁——远距离下高频贴图摩尔纹明显，把贴图 Mipmap 检查器里的各向异性过滤调高一档即可明显缓解，性能代价极小。

性能上给自己留个账本：本案例片元阶段每像素一次采样加四次乘法加两次加法，属于最便宜的一档效果；即便铺满整个场景，成本大头也是那一次采样而非计算。第 8 章会用统一的口径重新核算。

💡 一个举一反三的变式：把 FlowDirection 属性换成两张不同滚动速度、不同方向的同样贴图叠加采样，输出用 Lerp 混合——两层流水的视差感立刻出现，瀑布和星云的层次就是这么做出来的，节点只多了三个。

变式补充：径向流动

传送带是线性流动，还有一个高频变式是径向流动——能量从中心涌出或吸入（传送阵、漩涡）。做法：把 UV 换成极坐标思路，用径向渐变节点（Radial Shear 或自己拼：坐标减中心点后取长度与角度），角度分量随时间递增就是旋转，长度分量递增就是涌出。骨架版的逻辑完全不变，只是"方向"从常量向量变成了围绕中心的计算。愿意挑战的话，拿这个变式检验第 3 章向量族的功底正合适。

问题：速度属性拉到很大后画面乱闪是 bug 吗？

不是 bug，是采样混叠。Offset 每帧跳过的距离超过一个贴图像素时，GPU 采不到连续的中间值，画面出现随机噪点感。三个缓解手段按代价从低到高：把速度上限用滑条 Max 压住（治本）；给贴图开各向异性过滤（缓解）；接受高速时的模糊感（美术上用运动模糊叙事反而成立）。记住成因，遇到时就知道这是物理限制而非连线错误。

性能备忘与本章收束

本案例的运行时代价核算一遍作为习惯的起点：片元阶段一次采样、四次乘加、一个属性读取，属于第一档成本；顶点阶段零计算。把它做成"每周刷新的效果成本基准"——以后每个新效果都和它比一次：比它贵多少？贵在哪？这笔账在三分钟内能算完，却能拦住绝大多数"做完才发现跑不动"的返工。下一章的描边案例会告诉你，换一条技术路线，成本结构会怎么变。

本节要点回顾

• 匀速用 Time 脉动用 Sine：Time 节点四个输出各有分工，混用是滚动翻车首因。
• 方向即二维向量：FlowDirection 的四个象限值覆盖八个方向，负值即反向。
• 无缝靠贴图本身：Repeat 模式只能保证数学无缝，画面无缝要贴图首尾相接。
• 两层叠加出视差：不同速度的两层采样用 Lerp 混合，瀑布星云的通用手法。

滚动会了，下一章我们把"动"从贴图推进到整张图的材质语义：PBR 输入、卡通描边与全息扫描两个完整案例，把第 3 章的菲涅尔链升级成能进项目的成品。