Unity3D利用DoTween實現(xiàn)卡牌翻轉(zhuǎn)效果
利用Unity的UGUI制作了2D卡牌翻轉(zhuǎn)的效果,如果是sprite對象的話,原理應(yīng)該也是一樣的,以下是效果圖

圖1 卡牌翻轉(zhuǎn)效果
關(guān)于DoTween
DoTween是一款十分強大且好用的動畫效果插件,有免費版和收費版,免費版就可以滿足大部分需求了,在Unity Assets Store里就可以下載,在本效果里就用了DoTween的旋轉(zhuǎn)功能。
設(shè)計思路
創(chuàng)建一個空物體,空物體下有兩個image對象,一個是正面,一個是背面。假設(shè)我們從正面開始,則初始狀態(tài)下正面的旋轉(zhuǎn)角度為(0,0,0) (0,0,0)(0,0,0),讓背面的旋轉(zhuǎn)角度為(0,90,0) (0,90,0)(0,90,0),這樣背面就看不見了。
觸發(fā)旋轉(zhuǎn)時,例如讓正面在0.3秒內(nèi)旋轉(zhuǎn)到(0,90,0) (0,90,0)(0,90,0),這樣正面就看不見了,等旋轉(zhuǎn)完成后再讓背面0.3秒旋轉(zhuǎn)到(0,0,0) (0,0,0)(0,0,0),這樣背面出現(xiàn),整個翻轉(zhuǎn)的過程就完成了,如果不明白,可以想象一下一張撲克牌從正面慢慢翻轉(zhuǎn)到背面的情況,首先旋轉(zhuǎn)到側(cè)面對著你,然后再從側(cè)面旋轉(zhuǎn)到背面。
使用方法
- 導(dǎo)入DoTween插件
- setup插件
- 創(chuàng)建一個Canvas
- 在Canvas下創(chuàng)建一個空物體命名為Card
- 在Card下創(chuàng)建兩個Image(UI),分別命名為Front和Back,大小和位置均相同
- 給Back和Front附上你選定的圖片,如果沒有可以用不同顏色替代
- 給Card附上CardTurnOver.cs腳本
- 將Front和Back對象拖動到腳本的對應(yīng)位置
- 設(shè)置腳本的card state,意味著從正面開始還是背面開始
- 設(shè)置腳本的time,即旋轉(zhuǎn)所花費的時間
- 創(chuàng)建兩個Button對象,增加OnClick方法,將Card對象拖進(jìn)去,并分別調(diào)用StartBack和StartFront方法
- 點擊兩個按鈕就能看到卡牌翻轉(zhuǎn)的效果了,注意只有在正面的時候才能翻到背面,背面同理。
腳本
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;//卡牌當(dāng)前的狀態(tài),是正面還是背面?
public float mTime = 0.3f;
private bool isActive = false;//true代表正在執(zhí)行翻轉(zhuǎn),不許被打斷
/// <summary>
/// 初始化卡牌角度,根據(jù)mCardState
/// </summary>
public void Init()
{
if(mCardState==CardState.Front)
{
//如果是從正面開始,則將背面旋轉(zhuǎn)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>
/// 留給外界調(diào)用的接口
/// </summary>
public void StartBack()
{
if (isActive)
return;
StartCoroutine(ToBack());
}
/// <summary>
/// 留給外界調(diào)用的接口
/// </summary>
public void StartFront()
{
if (isActive)
return;
StartCoroutine(ToFront());
}
/// <summary>
/// 翻轉(zhuǎn)到背面
/// </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>
/// 翻轉(zhuǎn)到正面
/// </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;
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
C#數(shù)據(jù)結(jié)構(gòu)與算法揭秘二
上文對數(shù)據(jù)結(jié)構(gòu)與算法,有了一個簡單的概述與介紹,這篇文章,我們介紹一中典型數(shù)據(jù)結(jié)構(gòu)——線性結(jié)構(gòu)2012-10-10
C#四舍五入MidpointRounding.AwayFromZero解析
這篇文章主要介紹了C#四舍五入MidpointRounding.AwayFromZero,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05
C#中隱藏TabControl選項卡標(biāo)簽的解決方案
這篇文章主要介紹了C#中隱藏TabControl選項卡標(biāo)簽的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04

