实现点击卡片,卡片翻转到背面,再点击回到正面。
卡片由三部分组成,背景图片,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);
}
}