利用unity的ugui制作了2d卡牌翻轉(zhuǎn)的效果，如果是sprite對(duì)象的話，原理應(yīng)該也是一樣的，以下是效果圖
圖1 卡牌翻轉(zhuǎn)效果
關(guān)于dotween
dotween是一款十分強(qiáng)大且好用的動(dòng)畫(huà)效果插件，有免費(fèi)版和收費(fèi)版，免費(fèi)版就可以滿足大部分需求了，在unity assets store里就可以下載，在本效果里就用了dotween的旋轉(zhuǎn)功能。
設(shè)計(jì)思路
創(chuàng)建一個(gè)空物體，空物體下有兩個(gè)image對(duì)象，一個(gè)是正面，一個(gè)是背面。假設(shè)我們從正面開(kāi)始，則初始狀態(tài)下正面的旋轉(zhuǎn)角度為(0,0,0) (0,0,0)(0,0,0)，讓背面的旋轉(zhuǎn)角度為(0,90,0) (0,90,0)(0,90,0)，這樣背面就看不見(jiàn)了。
觸發(fā)旋轉(zhuǎn)時(shí)，例如讓正面在0.3秒內(nèi)旋轉(zhuǎn)到(0,90,0) (0,90,0)(0,90,0)，這樣正面就看不見(jiàn)了，等旋轉(zhuǎn)完成后再讓背面0.3秒旋轉(zhuǎn)到(0,0,0) (0,0,0)(0,0,0)，這樣背面出現(xiàn)，整個(gè)翻轉(zhuǎn)的過(guò)程就完成了，如果不明白，可以想象一下一張撲克牌從正面慢慢翻轉(zhuǎn)到背面的情況，首先旋轉(zhuǎn)到側(cè)面對(duì)著你，然后再?gòu)膫?cè)面旋轉(zhuǎn)到背面。
使用方法
- 導(dǎo)入dotween插件
- setup插件
- 創(chuàng)建一個(gè)canvas
- 在canvas下創(chuàng)建一個(gè)空物體命名為card
- 在card下創(chuàng)建兩個(gè)image(ui)，分別命名為front和back，大小和位置均相同
- 給back和front附上你選定的圖片，如果沒(méi)有可以用不同顏色替代
- 給card附上cardturnover.cs腳本
- 將front和back對(duì)象拖動(dòng)到腳本的對(duì)應(yīng)位置
- 設(shè)置腳本的card state，意味著從正面開(kāi)始還是背面開(kāi)始
- 設(shè)置腳本的time，即旋轉(zhuǎn)所花費(fèi)的時(shí)間
- 創(chuàng)建兩個(gè)button對(duì)象，增加onclick方法，將card對(duì)象拖進(jìn)去，并分別調(diào)用startback和startfront方法
- 點(diǎn)擊兩個(gè)按鈕就能看到卡牌翻轉(zhuǎn)的效果了，注意只有在正面的時(shí)候才能翻到背面，背面同理。
腳本
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
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) { //如果是從正面開(kāi)始，則將背面旋轉(zhuǎn)90度，這樣就看不見(jiàn)背面了 mfront.transform.eulerangles = vector3.zero; mback.transform.eulerangles = new vector3(0, 90, 0); } else { //從背面開(kāi)始，同理 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; }} |
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/wayway0554/article/details/84554886
