UI 卡牌翻转效果

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

待优化地方

鼠标快速离开翻转区域,卡牌是反面。

猜你喜欢

转载自blog.csdn.net/weixin_43796392/article/details/123106504
ui