美文网首页
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