• 今天我們使用shader來(lái)實(shí)現(xiàn)一個(gè)這樣的動(dòng)畫(huà)

  
  
  SinAnim.gif

• 先說(shuō)下思路，如下圖寬是X軸，高是Z軸。我們以X軸作為sin() 函數(shù)的參數(shù)，隨著X的變大，即可出現(xiàn)曲線。
  然后Z再加上這個(gè)值，這樣就能在Z上看出曲線。 即 z = z + sin(x);
  接著我們?cè)僭趕in()里加上time的變化，既可出現(xiàn)動(dòng)畫(huà)。

坐標(biāo)軸.png

• 準(zhǔn)備工作，創(chuàng)建一個(gè)普通Plane面片,然后創(chuàng)建一個(gè)Unilt Shader,在新創(chuàng)建出來(lái)的shader上直接右鍵，創(chuàng)建一個(gè)材質(zhì)球（材質(zhì)球會(huì)自動(dòng)使用這個(gè)Shader），接著把材質(zhì)球丟給這個(gè)Plane。這樣準(zhǔn)備工作就完成了。

• 接下來(lái)增加下參數(shù)

 Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Speed("Speed",float) = 1 //控制速度
        _XScale("XScale",float) = 1 // 控制波的寬度
        _Amplitude("_Amplitude",float) = 1 //控制幅度       
    }

• 修改頂點(diǎn)函數(shù)

  v2f vert (appdata v)
            {
                v2f o;
                //核心代碼
                v.vertex.z = v.vertex.z + _Amplitude * sin(v.vertex.x * _XScale + _Time.y * _Speed);
                
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);               
                return o;
            }

• 這樣就大功告成了
  可以看到核心代碼和思路是一樣的，只是加了幾個(gè)參數(shù)增加調(diào)控度。
  這里_Speed主要控制動(dòng)畫(huà)速度。 _Amplitude 主要控制動(dòng)畫(huà)的幅度。 XScale控制一個(gè)波的寬度。
• 最后貼下全部代碼

Shader "Unlit/VertexAnim"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Speed("Speed",float) = 1 //控制速度
        _XScale("XScale",float) = 1 //控制波的寬度
        _Amplitude("_Amplitude",float) = 1 //控制幅度       
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _XScale;
            float _Speed;
            float _Amplitude;
            
            v2f vert (appdata v)
            {
                v2f o;
                
                v.vertex.z = v.vertex.z + _Amplitude * sin(v.vertex.x * _XScale + _Time.y * _Speed);
                
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);               
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }
    }
}

• 注意點(diǎn)
  如果你的XScale按默認(rèn)的1.那么你可能會(huì)得到像下圖這樣不太平滑的波

  
  
  不平滑.png
  
  

  這是因?yàn)镻lane的頂點(diǎn)相聚得比較遠(yuǎn)。并不是連續(xù)的，所以就會(huì)出現(xiàn)不平滑?？梢郧袚Q到Wireframe視角，如下圖，可以看到頂點(diǎn)離得還是蠻遠(yuǎn)的。

  
  
  Wireframe.png
  
  這時(shí)候XScale參數(shù)就發(fā)揮作用了，把XScale調(diào)小到0.5。那么相當(dāng)于頂點(diǎn)就離得更密集了，也就越平滑了！
• OK，就這樣了！