点击卡片翻转

11 篇文章 0 订阅
3 篇文章 0 订阅

实现点击卡片,卡片翻转到背面,再点击回到正面。
卡片由三部分组成,背景图片,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);
    }
}
  • 8
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值