在本文，筆者將教你如何使用 UGUI 和 Shader 實(shí)現(xiàn) Window10 日歷中鼠標(biāo)懸停時(shí)的效果杏愤。
預(yù)覽
實(shí)現(xiàn)
1. Shader 實(shí)現(xiàn)
這種動(dòng)效的核心思路是將鼠標(biāo)光標(biāo)的位置傳遞到 shader 中媒区，根據(jù)當(dāng)前像素到光標(biāo)的距離處理該像素的顏色值驼仪，這個(gè)動(dòng)作需要拆分分為背景 + 邊框兩部分使用 2 個(gè) Pass 處理掸犬。
1.1 Background Pass
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
float dis = distance(_MousePos.xy, i.vertex.xy);
float4 addColor = _Color;
addColor.a = saturate(smoothstep(_ColorRadius, 0, dis) - _ColorOffset * sign(col.a-0.1));
addColor.a = addColor.a * col.a * _ColorPow;
return addColor;
}
1.2 Border Pass
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_BorderTex, i.uvBorder);
float dis = distance(_MousePos.xy, i.vertexBorder.xy);
col = col + sign(col.a) * smoothstep(_ColorRadius, 0, dis) * _Color * _BorderPow;
return col;
}
1.3 完整 Shader 代碼
詳見(jiàn)倉(cāng)庫(kù)
2. 腳本實(shí)現(xiàn)
腳本實(shí)現(xiàn)就相當(dāng)?shù)暮?jiǎn)單了袜漩，直接實(shí)時(shí)的將鼠標(biāo)位置傳遞到 shader 中即可，當(dāng)然點(diǎn)擊按鈕時(shí)光斑暈開(kāi)的效果也著實(shí)增添了不少代碼量湾碎。
using System;
using System.Collections;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class UIHoverLight : MonoBehaviour, IPointerDownHandler, IPointerUpHandler
{
private Material material;
private void Start()
{
var image = GetComponent<Image>();
//create a new one as we need change color offset later but should not change the others
material = new(image.material);
image.material = material;
}
private void Update() => material.SetVector("_MousePos", Input.mousePosition);
Coroutine coroutine;
void IPointerDownHandler.OnPointerDown(PointerEventData eventData)
{
if (null != coroutine)
{
StopCoroutine(coroutine);
}
if (null != coroutine_hide)
{
StopCoroutine(coroutine_hide);
}
coroutine = StartCoroutine(ChangeInnerColorStateAsync(0.3f, true));
}
// 當(dāng) _ColorOffset = 0 顯示內(nèi)部顏色
private IEnumerator ChangeInnerColorStateAsync(float duration, bool show)
{
#region Ease
static float inCubic(float t) => t * t * t;
static float outCubic(float t) => inCubic(t - 1f) + 1f;
#endregion
float time = 0;
float start = material.GetFloat("_ColorOffset");
float end = show ? 0 : 0.98f;
Func<float, float> ease = show ? outCubic : inCubic;
while (time < duration)
{
time += Time.deltaTime;
var p = ease(time / duration);
material.SetFloat("_ColorOffset", Mathf.Lerp(start, end, p));
yield return null;
}
}
Coroutine coroutine_hide;
void IPointerUpHandler.OnPointerUp(PointerEventData eventData)
{
if (null != coroutine_hide)
{
StopCoroutine(coroutine_hide);
}
coroutine_hide = StartCoroutine(HideInnerColorAsync());
}
private IEnumerator HideInnerColorAsync()
{
//等待ShowInnerColorAsync結(jié)束
if (null != coroutine)
{
yield return coroutine;
}
coroutine_hide = StartCoroutine(ChangeInnerColorStateAsync(0.1f, false));
}
}
3. 后期特效
為了更好的實(shí)現(xiàn) UI 的輝光效果宙攻，我們需要以下 3 個(gè)核心要素：
- 首先 Canvas 渲染模式使用：Screen Space - Camera 的渲染模式
- 其次使用
ColorUsageAttribute聲明了 color 字段用于提供 HDR 設(shè)定。
[SerializeField, ColorUsage(true, true)]
private Color color = Color.white;
- 最后介褥，安裝 PostProcessing 并啟用 Bloom 效果就好啦~~
結(jié)語(yǔ)
本文也是本著做小抄的目的撰寫座掘，靈感甚至源碼都源自于這里递惋，歡迎在留言區(qū)交流~
本文地址：https://github.com/Bian-Sh/UGUI-Hover-Light-Effect
