点击卡片翻转

实现点击卡片,卡片翻转到背面,再点击回到正面。
卡片由三部分组成,背景图片,Toggle,Icon。
Toggle覆盖整个卡片,当点击卡片时触发。Toggle组件只保留Background,并将Background设置为和卡片一样大,不透明度设置为0。toggle放在Icon下面,不然会被Icon挡住射线检测。
Icon包括图片,名字和描述。当卡片正面的时候显示图片和名字,反面显示描述。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;
using TMPro;

public class CardDesView : MonoBehaviour
{
    private Transform icon;
    private Transform des;
    private Transform pic;
    private Transform name;
    //卡片正反面标识
    private bool isBack;

    protected override void OnAwake()
    {
        icon = transform.Find("Icon");
        pic = transform.Find("Icon/Picture");
        name = transform.Find("Icon/Name");
        des = transform.Find("Icon/Des");
        Find<Toggle>("Toggle").onValueChanged.AddListener(OnTurn);
    }

    //翻转卡片
    private void OnTurn(bool front)
    {
        //Debug.Log("翻转");
        Flip(0.1f);
    }

    //翻转面板
    private void Flip(float duration)  //翻转时间,
    {  
        if(icon==null)
        {
            return;
        }
        //翻转的角度,先转到90度,如果要转到正面再转到0度,如果要转到反面则转到180度  
        float flipAngle = 90;
        float targetAngle = isBack ? 0:180;

        //使用detween Sequence 实现翻转效果
        //先旋转到90度,再将之前的内容隐藏,将要显示的内容激活。再旋转到最终角度。
        //因为背面图片是被翻转的,需要将背面描述的字体设置为rotate.y设置为180
        Sequence sequence = DOTween.Sequence();
        //DOLocalRotate(vector3 rot,float duration) 目标rotate 旋转时间  
        //花duratime秒将对象rotate旋转到rot
        //SetEase设置缓动效果
        sequence.Append(icon.DOLocalRotate(new Vector3(0,flipAngle,0),duration/2f)).SetEase(Ease.Linear);
        sequence.AppendCallback(delegate()
        {
            if(isBack == true)
            {
                des.gameObject.SetActive(false);
                levelName.gameObject.SetActive(true);
                pic.gameObject.SetActive(true);
                isBack = false;
            }
            else
            {
                des.gameObject.SetActive(true);
                levelName.gameObject.SetActive(false);
                pic.gameObject.SetActive(false);
                isBack = true;
            }
        });
        sequence.Append(icon.DOLocalRotate(new Vector3(0,targetAngle,0),duration/2f)).SetEase(Ease.Linear);
    }
}

你可能感兴趣的:(功能实现,Unity,游戏开发,unity,c#)