【第007问 Unity中如何进行UV动画？】

【视频讲解】

在Unity中如何进行UV动画

在Unity中UV动画可以通过Shader实现，也可以通过在C#脚本中进行实现；该文主要是针对UV的理解和认识，所以在C#脚本中进行操作；

一、什么是UV动画?

UV动画这个术语需要拆解：
拆解为UV+动画=UV的动画；
这里就明确的说明是UV在动，UV每帧的运动其实就是UV坐标的位置变化；

那么UV是什么呢？
UV其实就是纹理的坐标的映射值，它的取值范围在0-1之间；看如下两幅图：

• 左边纹理坐标和右边的笛卡尔坐标其实是一样的，只是纹理坐标的X用的U表示，Y用V表示；这里为什么不用xy表示纹理坐标呢？ 由于纹理坐标都是需要映射到物体的每个顶点的的坐标上，每个顶点的坐标已经用(x,y,z）表示了；为了便于区分物体顶点坐标和纹理坐标之间的区分，所以就用(U,V)表示纹理坐标了；
• UV的(0,0)点也是在左下角。纹理坐标的取值范围在（0-1）之间；无论贴图大小，都会按照0-1的范围进行处理；所以UV的位置变化其实就是在0-1之间进行变化；

二、实例分析UV动画

• UV坐标中的U从左到右移动,也就是(u,v)中u从左到右移动，v不变，如下动画：
  
  为什么移动纹理坐标的U就会有从左到右的动画效果呢？

• 首先看看该Quad的Mesh效果
  
  上图是Quad在Wireframe模式下查看的的截图；可以看到该Quad由两个三角形组成，并且在图中标记了初始情况下4个顶点坐标和纹理坐标的映射关系，也就是纹理图片完全贴在quad上，如下图：
  
  当UV坐标的U发生从左到右位置变化的时候会得到以下相关的信息：

• 原始UV(0,0)坐标变成UV(a,0),这里的a是动态变化的位置，取值范围是（0-1）

• 虽然UV(0,0)的坐标变成了了UV(a,0),但Quad的坐标本身是没有发生变化的；这里UV坐标和Quad坐标之间发生变化的只是映射关系；由之前的UV(0,0)对应Quad对象的坐标(0,0)变成了UV(a,0)对应对象的坐标(0,0);如下图：
  

• 对象的坐标xy(0,0)是不会发生变化的，但是对应的UV坐标会从(0,0)变化到(a,0)；所以在对象的坐标(0,0)处映射的纹理是会随UV坐标中U的变化而变化；当每帧都在发生变化的时候，对象的坐标（0,0）处就会有有不同的UV坐标采用不用的像素值来进行渲染；我们从视觉上就会看到该对象坐标点在不断的变化；那么整个对象的所有坐标点看起来就是在不断的滚动；

三、多方向移动效果

• 从右到左移动
  
• 从上到下
  可以根据自己的实际情况测试多方向UV动画效果，可以是组合的，也可以是单个的，速度也可以调节；

四、源码

using System.Collections.Generic;
using System.Linq;
using UnityEngine;

public class ValakiUvScrollDemo : MonoBehaviour
{
    enum MoveType
    {
        LeftToRight,
        RightToLeft,
        BottomToTop,
        TopToBottom,
    }

    [SerializeField] private MoveType _moveType;

    [SerializeField] private float speed = 0.1f;
    private Mesh mesh;
    private List<Vector2> uvs = new List<Vector2>();

    // Start is called before the first frame update
    void Start()
    {
        mesh = GetComponent<MeshFilter>().mesh;
        uvs = mesh.uv.ToList();
    }

    // Update is called once per frame

    private void LateUpdate()
    {
        for (int i = 0; i < uvs.Count; i++)
        {
            Vector2 v = mesh.uv[i];
            switch (_moveType)
            {
                case MoveType.LeftToRight:
                    v.x -= Time.deltaTime * speed;
                    break;
                case MoveType.RightToLeft:
                    v.x += Time.deltaTime * speed;
                    break;
                case MoveType.TopToBottom:
                    v.y += Time.deltaTime * speed;
                    break;
                case MoveType.BottomToTop:
                    v.y -= Time.deltaTime * speed;
                    break;
            }

            uvs[i] = v;
        }

        mesh.SetUVs(0, uvs);
    }
}

结语：

只有尝试后才知道行与不行…【valaki】