Unity3D利用DoTween實現(xiàn)卡牌翻轉效果

更新時間：2019年02月23日 09:08:50 作者：芒果和小貓

這篇文章主要為大家詳細介紹了Unity3D利用DoTween實現(xiàn)卡牌翻轉效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

利用Unity的UGUI制作了2D卡牌翻轉的效果，如果是sprite對象的話，原理應該也是一樣的，以下是效果圖

圖1 卡牌翻轉效果

關于DoTween

DoTween是一款十分強大且好用的動畫效果插件，有免費版和收費版，免費版就可以滿足大部分需求了，在Unity Assets Store里就可以下載，在本效果里就用了DoTween的旋轉功能。

設計思路

創(chuàng)建一個空物體，空物體下有兩個image對象，一個是正面，一個是背面。假設我們從正面開始，則初始狀態(tài)下正面的旋轉角度為(0,0,0) (0,0,0)(0,0,0)，讓背面的旋轉角度為(0,90,0) (0,90,0)(0,90,0)，這樣背面就看不見了。
觸發(fā)旋轉時，例如讓正面在0.3秒內旋轉到(0,90,0) (0,90,0)(0,90,0)，這樣正面就看不見了，等旋轉完成后再讓背面0.3秒旋轉到(0,0,0) (0,0,0)(0,0,0)，這樣背面出現(xiàn)，整個翻轉的過程就完成了，如果不明白，可以想象一下一張撲克牌從正面慢慢翻轉到背面的情況，首先旋轉到側面對著你，然后再從側面旋轉到背面。

使用方法

導入DoTween插件
setup插件
創(chuàng)建一個Canvas
在Canvas下創(chuàng)建一個空物體命名為Card
在Card下創(chuàng)建兩個Image(UI)，分別命名為Front和Back，大小和位置均相同
給Back和Front附上你選定的圖片，如果沒有可以用不同顏色替代
給Card附上CardTurnOver.cs腳本
將Front和Back對象拖動到腳本的對應位置
設置腳本的card state，意味著從正面開始還是背面開始
設置腳本的time，即旋轉所花費的時間
創(chuàng)建兩個Button對象，增加OnClick方法，將Card對象拖進去，并分別調用StartBack和StartFront方法
點擊兩個按鈕就能看到卡牌翻轉的效果了，注意只有在正面的時候才能翻到背面，背面同理。

腳本

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

//卡牌狀態(tài)，正面、背面
public enum CardState
{
 Front,
 Back
}
public class CardTurnOver : MonoBehaviour{
 public GameObject mFront;//卡牌正面
 public GameObject mBack;//卡牌背面
 public CardState mCardState = CardState.Front;//卡牌當前的狀態(tài)，是正面還是背面？
 public float mTime = 0.3f;
 private bool isActive = false;//true代表正在執(zhí)行翻轉，不許被打斷

 /// <summary>
 /// 初始化卡牌角度，根據(jù)mCardState
 /// </summary>
 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();
 }

 /// <summary>
 /// 留給外界調用的接口
 /// </summary>
 public void StartBack()
 {
  if (isActive)
   return;
  StartCoroutine(ToBack());
 }
 /// <summary>
 /// 留給外界調用的接口
 /// </summary>
 public void StartFront()
 {
  if (isActive)
   return;
  StartCoroutine(ToFront());
 }
 /// <summary>
 /// 翻轉到背面
 /// </summary>
 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>
 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;
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: