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

圖1 卡牌翻轉(zhuǎn)效果
關(guān)于DoTween
DoTween是一款十分強(qiáng)大且好用的動畫效果插件,有免費(fèi)版和收費(fèi)版,免費(fèi)版就可以滿足大部分需求了,在Unity Assets Store里就可以下載,在本效果里就用了DoTween的旋轉(zhuǎn)功能。
設(shè)計(jì)思路
創(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)到背面。
使用方法
腳本
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í)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選