利用unity的ugui制作了2d卡牌翻转的效果，如果是sprite对象的话，原理应该也是一样的，以下是效果图
图1 卡牌翻转效果
关于dotween
dotween是一款十分强大且好用的动画效果插件，有免费版和收费版，免费版就可以满足大部分需求了，在unity assets store里就可以下载，在本效果里就用了dotween的旋转功能。
设计思路
创建一个空物体，空物体下有两个image对象，一个是正面，一个是背面。假设我们从正面开始，则初始状态下正面的旋转角度为(0,0,0) (0,0,0)(0,0,0)，让背面的旋转角度为(0,90,0) (0,90,0)(0,90,0)，这样背面就看不见了。
触发旋转时，例如让正面在0.3秒内旋转到(0,90,0) (0,90,0)(0,90,0)，这样正面就看不见了，等旋转完成后再让背面0.3秒旋转到(0,0,0) (0,0,0)(0,0,0)，这样背面出现，整个翻转的过程就完成了，如果不明白，可以想象一下一张扑克牌从正面慢慢翻转到背面的情况，首先旋转到侧面对着你，然后再从侧面旋转到背面。
使用方法
- 导入dotween插件
- setup插件
- 创建一个canvas
- 在canvas下创建一个空物体命名为card
- 在card下创建两个image(ui)，分别命名为front和back，大小和位置均相同
- 给back和front附上你选定的图片，如果没有可以用不同颜色替代
- 给card附上cardturnover.cs脚本
- 将front和back对象拖动到脚本的对应位置
- 设置脚本的card state，意味着从正面开始还是背面开始
- 设置脚本的time，即旋转所花费的时间
- 创建两个button对象，增加onclick方法，将card对象拖进去，并分别调用startback和startfront方法
- 点击两个按钮就能看到卡牌翻转的效果了，注意只有在正面的时候才能翻到背面，背面同理。
脚本
|
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;//别忘了引用//卡牌状态，正面、背面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代表正在执行翻转，不许被打断 /// <summary> /// 初始化卡牌角度，根据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; }} |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/wayway0554/article/details/84554886
