[Unity3D]利用DoTween制作卡牌翻转的效果

1. 卡牌翻转效果

利用Unity的UGUI制作了2D卡牌翻转的效果，如果是sprite对象的话，原理应该也是一样的，以下是效果图

图1 卡牌翻转效果

2. 关于DoTween

DoTween是一款十分强大且好用的动画效果插件，有免费版和收费版，免费版就可以满足大部分需求了，在Unity Assets Store里就可以下载，在本效果里就用了DoTween的旋转功能。

3. 设计思路

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

4. 使用方法

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

5. 脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;//别忘了引用

//卡牌状态，正面、背面
public enum CardState
{
    Front,
    Back
}
public class CardTurnOver : MonoBehaviour{
    public GameObject mFront;//卡牌正面
    public GameObject mBack;//卡牌背面
    public CardState mCardState = CardState.Front;//卡牌当前的状态，是正面还是背面？
    public float mTime = 0.3f;
    private bool isActive = false;//true代表正在执行翻转，不许被打断

    /// 

    /// 初始化卡牌角度，根据mCardState
    /// 
    public void Init()
    {
        if(mCardState==CardState.Front)
        {
            //如果是从正面开始，则将背面旋转90度，这样就看不见背面了
            mFront.transform.eulerAngles = Vector3.zero;
            mBack.transform.eulerAngles = new Vector3(0, 90, 0);
        }
        else
        {
            //从背面开始，同理
            mFront.transform.eulerAngles = new Vector3(0, 90, 0);
            mBack.transform.eulerAngles = Vector3.zero;
        }
    }
    private void Start()
    {
        Init();
    }

    /// 

    /// 留给外界调用的接口
    /// 
    public void StartBack()
    {
        if (isActive)
            return;
        StartCoroutine(ToBack());
    }
    /// 

    /// 留给外界调用的接口
    /// 
    public void StartFront()
    {
        if (isActive)
            return;
        StartCoroutine(ToFront());
    }
    /// 

    /// 翻转到背面
    /// 
	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;

    }
    /// 

    /// 翻转到正面
    /// 
    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;
    }
}