Unity制作卡牌翻转的效果

1、设计思路

    创建一个空物体,空物体下有两个image对象,一个是正面,一个是背面。假设我们从正面开始,则初始状态下正面的旋转角度为(0,0,0) ,让背面的旋转角度为(0,90,0) ,这样背面就看不见了。
触发旋转时,例如让正面在0.3秒内旋转到(0,90,0) ,这样正面就看不见了,等旋转完成后再让背面0.3秒旋转到(0,0,0),这样背面出现,整个翻转的过程就完成了,如果不明白,可以想象一下一张扑克牌从正面慢慢翻转到背面的情况,首先旋转到侧面对着你,然后再从侧面旋转到背面。

2、使用方法

    1、导入DoTween插件
    2、创建一个Canvas
    3、在Canvas下创建一个空物体命名为Card
    4、在Card下创建两个Image(UI),分别命名为Front和Back,大小和位置均相同
    5、给Back和Front附上你选定的图片
    6、给Card附上CardTurnOver.cs脚本
    7、将Front和Back对象拖动到脚本的对应位置
    8、设置脚本的card state,意味着从正面开始还是背面开始
    9、设置脚本的time,即旋转所花费的时间
    10、创建两个Button对象,增加OnClick方法,将Card对象拖进去,并分别调用StartBack和StartFront方法
    11、点击两个按钮就能看到卡牌翻转的效果了,注意只有在正面的时候才能翻到背面,背面同理

3、脚本

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

//卡牌的状态,正面、背面
public enum CardState {
    Front,
    Back
}

public class CardTunOver : MonoBehaviour {

    public GameObject mFront;       //卡牌正面
    public GameObject mBack;        //卡牌的背面
    public CardState mCardState = CardState.Front;  //卡牌当前的状态,是正面还是背面
    public float mTime = 0.3f;
    public bool isActive = false;       //true代表正在执行翻转,不许被打断

    /// <summary>
    /// 初始化卡牌角度,根据mCardState
    /// </summary>
    public void Init() {
        if (mCardState == CardState.Front)
        {
            mFront.transform.eulerAngles = Vector3.zero;
            mBack.transform.eulerAngles = new Vector3(0, 90, 0);
        }
        else
        {
            mBack.transform.eulerAngles = Vector3.zero;
            mFront.transform.eulerAngles = new Vector3(0, 90, 0);
        }
    }

	void Start () {
        Init();
	}

    //开始向后转
    public void StartBack()
    {
        if (isActive)
        {
            return;
        }
        StartCoroutine(ToBack());
    }

    //开始前转
    public void StartFront()
    {
        if (isActive)
        {
            return;
        }
        StartCoroutine(ToFront());
    }

    /// <summary>
    /// 翻转到背面
    /// </summary>
    /// <returns></returns>
    IEnumerator ToBack()
    {
        isActive = true;
        mFront.transform.DORotate(new Vector3(0, 90, 0), mTime);
        for (float i = mTime; i >= 0; i-=Time.deltaTime)
        {
            yield return 0;
        }
        mBack.transform.DORotate(new Vector3(0, 0, 0), mTime);
        isActive = false;
    }

    /// <summary>
    /// 翻转到正面
    /// </summary>
    /// <returns></returns>
    IEnumerator ToFront()
    {
        isActive = true;
        mBack.transform.DORotate(new Vector3(0, 90, 0), mTime);
        for (float i = mTime ; i >= 0; i-= Time.deltaTime)
        {
            yield return 0;
        }
        mFront.transform.DORotate(new Vector3(0, 0, 0), mTime);
        isActive = false;
    }

}

转发自:https://blog.csdn.net/wayway0554/article/details/84554886

  • 8
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值