UI 卡牌翻转效果
鼠标进入显示反面,鼠标离开显示正面。
脚本
using UnityEngine;
using DG.Tweening;
using UnityEngine.UI;
using UnityEngine.EventSystems;
/// <summary>
/// 鼠标进入:显示反面;鼠标离开:显示正面
/// </summary>
public class FlipCard : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
public Image front;
public Image back;
public float flipTime = 0.3f;
Vector3 hideAngle = new Vector3(0, 90f, 0);
void Start()
{
front.transform.rotation = Quaternion.Euler(0, 0, 0);
back.transform.rotation = Quaternion.Euler(0, 90, 0);
back.gameObject.SetActive(false);
}
public void OnPointerEnter(PointerEventData eventData)
{
Flip(from: front, to: back, flipTime: flipTime);
}
public void OnPointerExit(PointerEventData eventData)
{
Flip(from: back, to: front, flipTime: flipTime);
}
void Flip(Image from, Image to, float flipTime)
{
if (from.transform.localEulerAngles != Vector3.zero) return;//当前from 处于正面
from.transform.DORotate(hideAngle, flipTime).SetEase(Ease.Linear).onComplete += () =>//form 翻转完成 to开始翻转
{
from.gameObject.SetActive(false);
to.gameObject.SetActive(true);
to.transform.DORotate(Vector3.zero, flipTime).SetEase(Ease.Linear);
};
}
}
待优化地方
鼠标快速离开翻转区域,卡牌是反面。