美文网首页
UI 背景渐隐渐显

UI 背景渐隐渐显

作者: 泱千澈 | 来源:发表于2019-10-15 18:08 被阅读0次
    • ImageFadeEffect.cs
    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);
        }
    }
    
    • Fade.shader
    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;
                        float2 center = float2(0, 1);
                        float dist = smoothstep(_Offset, _Offset + 0.5, length(center - float2(i.texcoord.x, i.texcoord.y - 0.25)));
                        float c = lerp(dist, 1-dist, step(_InOut, 0));
                        tex.a *= c;
    
                        return tex;
                    }
                    ENDCG
                }
            }
                Fallback "Sprites/Default"
    }
    

    Shader中最重要的是frag中的这三行
    float2 center = float2(0, 1);
    float dist = smoothstep(_Offset, _Offset + 0.5, length(center - float2(i.texcoord.x, i.texcoord.y - 0.25)));
    float c = lerp(dist, 1-dist, step(_InOut, 0));
    这里的float2(i.texcoord.x, i.texcoord.y - 0.25)为什么要减去0.25呢,主要是为了与中心center有一个偏移值,0.25只是个经验值。

    • Inspector面板

    • 运行截图

    相关文章

      网友评论

          本文标题:UI 背景渐隐渐显

          本文链接:https://www.haomeiwen.com/subject/rzqyyctx.html