序列帧动画制作

我想都或多或少听过序列帧动画，属于纹理动画的其中之一，原理跟电影播放一样，代码如下：

Shader "Unlit/AnimationTest" {
    Properties {
        _Color ("Color Tint", Color) = (1, 1, 1, 1)
        _MainTex ("Image Sequence", 2D) = "white" {}
        _HorizontalAmount ("Horizontal Amount", Float) = 4
        _VerticalAmount ("Vertical Amount", Float) = 4
        _Speed ("Speed", Range(1, 100)) = 30
    }
    SubShader {
        Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
        
        Pass {
            Tags { "LightMode"="ForwardBase" }
            
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
            
            CGPROGRAM
            
            #pragma vertex vert  
            #pragma fragment frag
            
            #include "UnityCG.cginc"
            
            fixed4 _Color;
            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _HorizontalAmount;
            float _VerticalAmount;
            float _Speed;
              
            struct a2v {  
                float4 vertex : POSITION; 
                float2 texcoord : TEXCOORD0;
            };  
            
            struct v2f {  
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
            };  
            
            v2f vert (a2v v) {  
                v2f o;  
                o.pos = mul(UNITY_MATRIX_MVP, v.vertex);  
                o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);  
                return o;
            }  
            
            fixed4 frag (v2f i) : SV_Target {
                float time = floor(_Time.y * _Speed);  
                float row = floor(time / _HorizontalAmount);
                float column = time - row * _HorizontalAmount;
                
//              half2 uv = float2(i.uv.x /_HorizontalAmount, i.uv.y / _VerticalAmount);
//              uv.x += column / _HorizontalAmount;
//              uv.y -= row / _VerticalAmount;
                half2 uv = i.uv + half2(column, -row);
                uv.x /=  _HorizontalAmount;
                uv.y /= _VerticalAmount;
                
                fixed4 c = tex2D(_MainTex, uv);
                c.rgb *= _Color;
                
                return c;
            }
            
            ENDCG
        }  
    }
    FallBack "Transparent/VertexLit"
}

序列帧动画的制作主要在于需要每个时刻计算该时刻下应播放的关键帧的位置，并对该关键帧进行纹理采样。
　　在上述代码中，_MainTex是包含了所有关键帧图像的纹理，_HorizontalAmount和_VerticalAmount分别代表了该图像在水平方向和数值方向包含的关键帧个数，_Speed属性用于控制序列帧动画的播放速度。
　　由于序列帧图像通常是透明纹理，需要设置Pass的相关状态，以渲染透明效果。
　　fragment中的代码则是真正计算每个时刻该渲染什么样的纹理。
float time = floor(_Time.y * _Speed); 中，_Time.y是自场景加载后经过的时间，将其和_Speed相乘得到模拟的时间，这其实是用于调整动画播放的快慢，并用CG的floor函数对结果值取整来得到整数时间time，接下来是计算行索引和列索引
　　可以自己在网上找张序列帧图片绑定到一个material中，用上述shader程序，就可以运行调节看到具体效果了。