UI card flip effect

UI card flip effect

The mouse enters the reverse side of the display, and the mouse leaves the front side of the display.

script

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);
        };
    }
}

place to be optimized

The mouse quickly leaves the flip area, and the card is reversed.