规【Unity3d】Shader实现UGUI Image的不规则Fade

UGUI的Image可以通过控制图片颜色的alpha来做渐隐渐显动画，也可以通过修改fillamount的值来控制图片的显示和消失。fillamount虽然可以实现不算规则的出现消失动画，但是不够平滑。我们可以通过shader来控制图片的显示范围从来平滑进行不规则的出现消失动画。

新建一个Shader，将下面的代码输入到Shader中：

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "UI/Effect/Fade"
{ 
    Properties
    {
        [PerRendererData]_MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Color", Color) = (1,1,1,1)
        _Offset ("Offset", Range(-0.1,1.5)) = 0
        _InOut ("InOut", Range(0,1)) = 0

        _StencilComp("Stencil Comparison", Float) = 8
        _Stencil("Stencil ID", Float) = 0
        _StencilOp("Stencil Operation", Float) = 0
        _StencilWriteMask("Stencil Write Mask", Float) = 255
        _StencilReadMask("Stencil Read Mask", Float) = 255

        _ColorMask("Color Mask", Float) = 15
    }

    SubShader
    {
        Tags
        {
            "Queue"="Transparent"
            "IgnoreProjector"="true"
            "RenderType"="Transparent"
        }

        Stencil
        {
            Ref[_Stencil]
            Comp[_StencilComp]
            Pass[_StencilOp]
            ReadMask[_StencilReadMask]
            WriteMask[_StencilWriteMask]
        }

        ZWrite Off
        Blend SrcAlpha OneMinusSrcAlpha
        Cull Off

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma fragmentoption ARB_precision_hint_fastest
            #include "UnityCG.cginc"

            struct appdata_t
            {
                float4 vertex   : POSITION;
                float4 color    : COLOR;
                float2 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                half2 texcoord  : TEXCOORD0;
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
            };

            sampler2D _MainTex;
            fixed4 _Color;
            float _Offset;
            float _InOut;

            v2f vert(appdata_t IN)
            {
                v2f OUT;
                OUT.vertex = UnityObjectToClipPos(IN.vertex);
                OUT.texcoord = IN.texcoord;
                OUT.color = IN.color;
                return OUT;
            }

            float4 frag (v2f i) : COLOR
            {
                float2 uv = i.texcoord.xy;
                float4 tex = tex2D(_MainTex, uv) * i.color;
                float alpha = tex.a;
                float2 center = float2(0, 1);
                float dist = 1.0 - smoothstep(_Offset, _Offset + 0.5, length(center - float2(i.texcoord.x, i.texcoord.y - 0.25)));
                float c;
                if (_InOut == 0)
                {
                    c = dist;
                }
                else
                {
                    c= 1-dist;
                }
                tex.a = alpha * c;

                return tex;
            }
            ENDCG
        }
    }
    Fallback "Sprites/Default"
}

新建一个材质，选择我们刚刚写好的Shader：

在代码脚本中修改Offset和InOut的值就可以控制图片的出现和消失了。新建一个ImageFadeEffect脚本，输入以下代码：

using UnityEngine;
using UnityEngine.UI;

public class ImageFadeEffect : MonoBehaviour
{

    public bool inEffect = true;

    private Material material;
    private float tick;
    private int factor;

    void Awake()
    {
        tick = -0.1f;
        factor = 1;
        material = GetComponent<Image>().material;
        if (inEffect)
            material.SetFloat("_InOut", 0);
        else
            material.SetFloat("_InOut", 1);
    }

    void Update()
    {
        tick += Time.deltaTime * factor;
        if (tick >= 1.5f)
        {
            tick = 1.5f;
            factor = -1;
        }
        else if (tick <= -0.1f)
        {
            tick = -0.1f;
            factor = 1;
        }

        material.SetFloat("_Offset", tick);
    }
}

将脚本挂载到Image上，运行即可看到效果：

By：蒋志杰