UI动效 03

2024-05-24
作者 uni_shiki
~3.27K 字

1. 按钮UI动效——流光按钮

按钮UI动效——流光按钮

效果图：
效果演示视频：视频
彩色贴图：
来自网站：https://www.colorzilla.com/gradient-editor/#_
说明：比较简单的UV流动效果，一个坑点在于鼠标经过控制流速，不能用C#控制shader中的_speed变量控制uv.x += _Time.x * _speed，这样会重置uv的偏移量，所以这里使用了_OffsetX变量

源代码：

Shader：

Shader "Unlit/SliderShader01"
{
    Properties
    {
        _MaskTex ("MaskTexture", 2D) = "white" {}
        _ColorTex ("ColorTexture", 2D) = "white" {}
        _ColorStrength ("ColorStrength", Range(1, 1.2)) = 1.0
        _UVScale ("UVScale", Range(0, 1)) = 0.25
        [hideInInspector] _OffsetX ("OffsetX", Float) = 0
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue"="Transparent"}
        Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float2 uv1 : TEXCOORD1;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MaskTex;
            float4 _MaskTex_ST;
            sampler2D _ColorTex;
            float4 _ColorTex_ST;
            float _ColorStrength;
            float _UVScale;
            float _OffsetX;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _ColorTex);
                o.uv1 = TRANSFORM_TEX(v.uv, _MaskTex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                i.uv *= _UVScale;
                i.uv.x = i.uv.x + _OffsetX;

                fixed4 col = tex2D(_ColorTex, i.uv);
                fixed4 shape = tex2D(_MaskTex, i.uv1);
                col.a = shape.a;
                return col * _ColorStrength;
            }
            ENDCG
        }
    }
}

C#：

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class Btn2Control : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
    private Material mat;
    [SerializeField] private float speed = .3f;
    private float offsetValue;
    private bool flag;

    private void Start()
    {
        GetComponent<Image>().material = new Material(GetComponent<Image>().material);
        mat = GetComponent<Image>().material;
        offsetValue = 0;
        flag = false;
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
        flag = true;
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        flag = false;
    }

    private void Update()
    {
        if (flag)
            offsetValue += Time.deltaTime * speed;
        mat.SetFloat("_OffsetX", offsetValue);
    }
}

uni_shiki

按钮UI动效——流光按钮

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可