当光标进入Button的时候，也就是Button得着焦点时，Button出现放大效果，失去焦点的时候，恢复原来的尺寸。
本例仅供学习交流之用
一、效果
按钮得着焦点，放大
按钮失去焦点，恢复
二、给按钮添加动效
得着焦点时，放大到原来的1.3倍，失去焦点后恢复。放大的时间0.3秒，恢复的时间0.3秒
在这里插入图片描述
btn.AddZoomEffect(1.3f,0.3f,0.3f);//得着焦点时，放大到原来的1.3倍，失去焦点后恢复。放大的时间0.3秒，恢复的时间0.3秒
三、给一堆button批量设置动效
四、附录：关键代码
1、核心脚本——包含扩展方法
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using Cysharp.Threading.Tasks; //唯一依赖的第三方包：https://github.com/Cysharp/UniTask
using System.Threading;
using System;
using UnityEngine.EventSystems;
/// <summary>
/// UI添加动效
/// </summary>
namespace UiAnimation
{
/// <summary>
/// 扩展方法 及其 核心方法
/// </summary>
public static class CoreLib
{
/// <summary>
/// 给一个button扩展一个OnPointerEnterAddListener方法：添加一个OnPointerEnter的侦听
/// </summary>
/// <param name="button"></param>
/// <param name="function"></param>
public static void OnPointerEnterAddListener(this Button button, Func<UniTask> function)
{
Action<PointerEventData> unityAction = async (data) => { await function(); };
EventTrigger trigger = button.gameObject.GetComponent<EventTrigger>();
if (!trigger)
{
trigger = button.gameObject.AddComponent<EventTrigger>();
}
EventTrigger.Entry entry = new EventTrigger.Entry();
entry.eventID = EventTriggerType.PointerEnter;
entry.callback.AddListener(data => unityAction.Invoke((PointerEventData)data));
trigger.triggers.Add(entry);
}
/// <summary>
/// 给一个button扩展一个OnPointerEnterAddListener方法：添加一个OnPointerEnter的侦听
/// </summary>
/// <param name="button"></param>
/// <param name="function"></param>
public static void OnPointerEnterAddListener(this Button button, CancellationToken ctk, Func<CancellationToken, UniTask> function)
{
Action<PointerEventData> unityAction = async (data) => { await function(ctk); };
EventTrigger trigger = button.gameObject.GetComponent<EventTrigger>();
if (!trigger)
{
trigger = button.gameObject.AddComponent<EventTrigger>();
}
EventTrigger.Entry entry = new EventTrigger.Entry();
entry.eventID = EventTriggerType.PointerEnter;
entry.callback.AddListener(data => unityAction.Invoke((PointerEventData)data));
trigger.triggers.Add(entry);
}
/// <summary>
/// 给一个button扩展一个OnPointerExitAddListener方法：添加一个OnPointerExit的侦听
/// </summary>
/// <param name="button"></param>
/// <param name="function"></param>
public static void OnPointerExitAddListener(this Button button, Func<UniTask> function)
{
Action<PointerEventData> unityAction = async (data) => { await function(); };
EventTrigger trigger = button.gameObject.GetComponent<EventTrigger>();
if (!trigger)
{
trigger = button.gameObject.AddComponent<EventTrigger>();
}
EventTrigger.Entry entry = new EventTrigger.Entry();
entry.eventID = EventTriggerType.PointerExit;
entry.callback.AddListener(data => unityAction.Invoke((PointerEventData)data));
trigger.triggers.Add(entry);
}
/// <summary>
/// 光标进入的时候，button放大，失去光标的时候，缩小到原来的尺寸
/// ****注意鼠标快速闪进闪出的逻辑处理：用任务控制****
/// </summary>
/// <param name="button"></param>
/// <param name="scaleK">尺寸缩放的比例：在原尺寸的基础上放大或缩小</param>
/// <param name="enterDuration">光标进入的动画时间</param>
/// <param name="exitDuration">光标退出的动画时间</param>
public static void AddZoomEffect(this Button button, float scaleK, float enterDuration, float exitDuration)
{
//初始化工作：异步任务管理，
// 防止鼠标快速掠过或者快速胡乱点击，所以增加任务管理：
// 1、【进入】的时候，把【退出】的任务先取消，
// 2、【退出】的时候，把【进入】的任务先取消
//TODO : ctsList的item超过指定个数的时候，设置item为null，remove多余的个数，也可以改用【队列】
List<CancellationTokenSource> ctsList = new List<CancellationTokenSource>();
var originalScale = button.transform.localScale;
//光标进入的逻辑
button.OnPointerEnterAddListener(async () =>
{
ctsList.ForEach(cts => cts.Cancel());//...需不需要set null 并clear list
var cts = new CancellationTokenSource();
ctsList.Add(cts);
await button.transform.ZoomInAsync(scaleK, enterDuration, cts.Token);
});
//光标退出的逻辑
button.OnPointerExitAddListener(async () =>
{
ctsList.ForEach(cts => cts.Cancel());//...需不需要set null 并clear list
var cts = new CancellationTokenSource();
ctsList.Add(cts);
await button.transform.ZoomOutAsync(originalScale, exitDuration, cts.Token);
});
}
/// <summary>
/// 得着焦点的效果：UI尺寸变大
/// </summary>
/// <param name="transform">button对象</param>
/// <param name="k">scale缩放系数：放大 or 缩小</param>
/// <param name="duration">动画时间</param>
/// <param name="ctk"></param>
/// <returns></returns>
public static async UniTask ZoomInAsync(this Transform transform, float k, float duration, CancellationToken ctk)
{
try
{
Vector3 startScale = transform.localScale;
Vector3 targetScale = Vector3.one * k;
var btn = transform.GetComponent<Button>();
float elapse = 0f;
while ((elapse < duration) && (!ctk.IsCancellationRequested))
{
if (transform == null) return; //场景销毁时，退出
transform.localScale = Vector3.Lerp(startScale, targetScale, elapse / duration);
Debug.Log($"{startScale}, {targetScale}, {Time.deltaTime / duration}");
await UniTask.Yield();
elapse += Time.deltaTime;
}
}
catch (Exception e)
{
//Debug.Log($"\n 抛出一个OperationCanceledException");
throw new OperationCanceledException();
}
}
/// <summary>
/// 失去焦点的效果：尺寸恢复
/// </summary>
/// <param name="transform">button对象</param>
/// <param name="originalScale">原始scale</param>
/// <param name="duration">动画时间</param>
/// <param name="ctk"></param>
/// <returns></returns>
public static async UniTask ZoomOutAsync(this Transform transform, Vector3 originalScale, float duration, CancellationToken ctk)
{
try
{
Vector3 startScale = transform.localScale;
Vector3 targetScale = originalScale;
var btn = transform.GetComponent<Button>();
float elapse = 0f;
while ((elapse < duration) && (!ctk.IsCancellationRequested))
{
if (transform == null) return; //任务没取消，但是场景销毁 ——> 退出
transform.localScale = Vector3.Lerp(startScale, targetScale, elapse / duration);
Debug.Log($"{startScale}, {targetScale}, {Time.deltaTime / duration}");
await UniTask.Yield();
elapse += Time.deltaTime;
}
}
catch (Exception e)
{
//Debug.Log($"\n 抛出一个OperationCanceledException");
throw new OperationCanceledException();
}
}
}
}
2、Demo脚本
给一堆button指定焦点效果
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
namespace UiAnimation
{
public class AddScaleAnimation : MonoBehaviour
{
/// <summary>
/// 要添加动效的按钮
/// </summary>
[Header("要添加动效的按钮")]
public List<Button> MyButtons = new List<Button>();
/// <summary>
/// scale缩放比例：enter时缩放，exit时恢复
/// </summary>
[Header("scale缩放比例")]
public float k = 1.5f;
/// <summary>
/// 光标进入时的动效时间
/// </summary>
[Header("光标进入时的动效时间，单位秒")]
public float enterAnimDuration;
/// <summary>
/// 光标退出时的动效时间
/// </summary>
[Header("光标退出时的动效时间，单位秒")]
public float exitAnimDuration;
// Start is called before the first frame update
void Awake()
{
MyButtons.ForEach(btn =>
{
if (btn != null)
{
//添加缩放效果
btn.AddZoomEffect(k,enterAnimDuration,exitAnimDuration);
}
else
{
Debug.LogWarning($"注意：有面板参数没有提前设置！报错位置：{this.gameObject.name}->AddScaleAnimation");
}
});
}
}
}
五、思考
1、焦点的【进入】和【退出】用的是异步cancellationToken控制
2、你也可以添加其他的动能：旋转、抖动…
3、代码没有经过严格测试，谨慎使用。
