本文實例為大家分享了unity3d ugui實現縮放循環拖動卡牌展示的具體代碼，供大家參考，具體內容如下
需求：游戲中展示卡牌這種效果也是蠻酷炫并且使用的一種常見效果，下面我們就來實現以下這個效果是如何實現。
思考:第一看看到這個效果，我們首先會想到ugui里面的scrollrect，當然也可以用scrollrect來實現縮短contentsize的width來自動實現重疊效果，然后中間左右的卡牌通過計算來顯示縮放，這里我并沒有用這種思路來實現，我提供另外一種思路，就是自己去計算當前每個卡牌的位置和縮放值，不用ugui的內置組件。
code:
1.卡牌拖動組件:
|
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
using unityengine;using unityengine.eventsystems;using unityengine.ui; public enum dragposition{ left, right, up, down,} [requirecomponent(typeof(image))]public class cdragoncard : monobehaviour, ibegindraghandler, idraghandler, ienddraghandler{ public bool dragonsurfaces = true; public scrollrect m_scrollrect = null; public cfixgridrect m_fixgridrect = null; private recttransform m_draggingplane; public bool isvertical = false; private bool isself = false; private dragposition m_dragposition = dragposition.left; public system.action<dragposition> dragcallback = null; public void onbegindrag(pointereventdata eventdata) { vector2 touchdeltaposition = vector2.zero;#if unity_editor float delta_x = input.getaxis("mouse x"); float delta_y = input.getaxis("mouse y"); touchdeltaposition = new vector2(delta_x, delta_y); #elif unity_android || unity_iphone touchdeltaposition = input.gettouch(0).deltaposition; #endif if (isvertical) { if(touchdeltaposition.y > 0) { unityengine.debug.log("上拖"); m_dragposition = dragposition.up; } else { unityengine.debug.log("下拖"); m_dragposition = dragposition.down; } if (mathf.abs(touchdeltaposition.x) > mathf.abs(touchdeltaposition.y)) { isself = true; var canvas = findinparents<canvas>(gameobject); if (canvas == null) return; if (dragonsurfaces) m_draggingplane = transform as recttransform; else m_draggingplane = canvas.transform as recttransform; } else { isself = false; if (m_scrollrect != null) m_scrollrect.onbegindrag(eventdata); } } else //水平 { if (touchdeltaposition.x > 0) { unityengine.debug.log("右移"); m_dragposition = dragposition.right; } else { unityengine.debug.log("左移"); m_dragposition = dragposition.left; } if (mathf.abs(touchdeltaposition.x) < mathf.abs(touchdeltaposition.y)) { isself = true; var canvas = findinparents<canvas>(gameobject); if (canvas == null) return; if (dragonsurfaces) m_draggingplane = transform as recttransform; else m_draggingplane = canvas.transform as recttransform; } else { isself = false; if (m_scrollrect != null) m_scrollrect.onbegindrag(eventdata); } } } public void ondrag(pointereventdata data) { if (isself) { } else { if (m_scrollrect != null) m_scrollrect.ondrag(data); } } public void onenddrag(pointereventdata eventdata) { if (isself) { } else { if (m_scrollrect != null) m_scrollrect.onenddrag(eventdata); if (m_fixgridrect != null) m_fixgridrect.onenddrag(eventdata); } if (dragcallback != null) dragcallback(m_dragposition); } static public t findinparents<t>(gameobject go) where t : component { if (go == null) return null; var comp = go.getcomponent<t>(); if (comp != null) return comp; transform t = go.transform.parent; while (t != null && comp == null) { comp = t.gameobject.getcomponent<t>(); t = t.parent; } return comp; }} |
2.卡牌組件
|
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
|
using unityengine;using system.collections;using unityengine.ui; public class enhanceitem : monobehaviour{ // 在scrollviewitem中的索引 // 定位當前的位置和縮放 public int scrollviewitemindex = 0; public bool inrightarea = false; private vector3 targetpos = vector3.one; private vector3 targetscale = vector3.one; private transform mtrs; private image mimage; private int index = 1; public void init(int cardindex = 1) { index = cardindex; mtrs = this.transform; mimage = this.getcomponent<image>(); mimage.sprite = resources.load<sprite>(string.format("texture/card_bg_big_{0}", cardindex % 6 + 1)); this.gameobject.getcomponent<button>().onclick.addlistener(delegate () { onclickscrollviewitem(); }); } // 當點擊item，將該item移動到中間位置 private void onclickscrollviewitem() { debug.logerror("點擊" + index); enhancelscrollview.getinstance().sethorizontaltargetitemindex(scrollviewitemindex); } /// <summary> /// 更新該item的縮放和位移 /// </summary> public void updatescrollviewitems(float xvalue, float yvalue, float scalevalue) { targetpos.x = xvalue; targetpos.y = yvalue; targetscale.x = targetscale.y = scalevalue; mtrs.localposition = targetpos; mtrs.localscale = targetscale; } public void setselectcolor(bool iscenter) { if (mimage == null) mimage = this.getcomponent<image>(); if (iscenter) mimage.color = color.white; else mimage.color = color.gray; }} |
3.自定義的scrollview組件
|
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
|
using unityengine;using system.collections;using system.collections.generic;using unityengine.ui; public class enhancelscrollview : monobehaviour{ public animationcurve scalecurve; public animationcurve positioncurve; public float poscurvefactor = 500.0f; public float ypositionvalue = 46.0f; public list<enhanceitem> scrollviewitems = new list<enhanceitem>(); private list<image> imagetargets = new list<image>(); private enhanceitem centeritem; private enhanceitem precenteritem; private bool canchangeitem = true; public float dfactor = 0.2f; private float[] movehorizontalvalues; private float[] dhorizontalvalues; public float horizontalvalue = 0.0f; public float horizontaltargetvalue = 0.1f; private float originhorizontalvalue = 0.1f; public float duration = 0.2f; private float currentduration = 0.0f; private static enhancelscrollview instance; private bool isinit = false; public static enhancelscrollview getinstance() { return instance; } void awake() { instance = this; } public void init() { if ((scrollviewitems.count % 2) == 0) { debug.logerror("item count is invaild,please set odd count! just support odd count."); } if (movehorizontalvalues == null) movehorizontalvalues = new float[scrollviewitems.count]; if (dhorizontalvalues == null) dhorizontalvalues = new float[scrollviewitems.count]; if (imagetargets == null) imagetargets = new list<image>(); int centerindex = scrollviewitems.count / 2; for (int i = 0; i < scrollviewitems.count; i++) { scrollviewitems[i].scrollviewitemindex = i; image tempimage = scrollviewitems[i].gameobject.getcomponent<image>(); imagetargets.add(tempimage); dhorizontalvalues[i] = dfactor * (centerindex - i); dhorizontalvalues[centerindex] = 0.0f; movehorizontalvalues[i] = 0.5f - dhorizontalvalues[i]; scrollviewitems[i].setselectcolor(false); } //centeritem = scrollviewitems[centerindex]; canchangeitem = true; isinit = true; } public void updateenhancescrollview(float fvalue) { for (int i = 0; i < scrollviewitems.count; i++) { enhanceitem itemscript = scrollviewitems[i]; float xvalue = getxposvalue(fvalue, dhorizontalvalues[itemscript.scrollviewitemindex]); float scalevalue = getscalevalue(fvalue, dhorizontalvalues[itemscript.scrollviewitemindex]); itemscript.updatescrollviewitems(xvalue, ypositionvalue, scalevalue); } } void update() { if (!isinit) return; currentduration += time.deltatime; sortdepth(); if (currentduration > duration) { currentduration = duration; //if (centeritem != null) //{ // centeritem.setselectcolor(true); //} if (centeritem == null) { var obj = transform.getchild(transform.childcount - 1); if (obj != null) centeritem = obj.getcomponent<enhanceitem>(); if (centeritem != null) centeritem.setselectcolor(true); } else centeritem.setselectcolor(true); if (precenteritem != null) precenteritem.setselectcolor(false); canchangeitem = true; } float percent = currentduration / duration; horizontalvalue = mathf.lerp(originhorizontalvalue, horizontaltargetvalue, percent); updateenhancescrollview(horizontalvalue); } private float getscalevalue(float slidervalue, float added) { float scalevalue = scalecurve.evaluate(slidervalue + added); return scalevalue; } private float getxposvalue(float slidervalue, float added) { float evaluatevalue = positioncurve.evaluate(slidervalue + added) * poscurvefactor; return evaluatevalue; } public void sortdepth() { imagetargets.sort(new comparedepthmethod()); for (int i = 0; i < imagetargets.count; i++) imagetargets[i].transform.setsiblingindex(i); } public class comparedepthmethod : icomparer<image> { public int compare(image left, image right) { if (left.transform.localscale.x > right.transform.localscale.x) return 1; else if (left.transform.localscale.x < right.transform.localscale.x) return -1; else return 0; } } private int getmovecurvefactorcount(float targetxpos) { int centerindex = scrollviewitems.count / 2; for (int i = 0; i < scrollviewitems.count; i++) { float factor = (0.5f - dfactor * (centerindex - i)); float tempposx = positioncurve.evaluate(factor) * poscurvefactor; if (mathf.abs(targetxpos - tempposx) < 0.01f) return mathf.abs(i - centerindex); } return -1; } public void sethorizontaltargetitemindex(int itemindex) { if (!canchangeitem) return; enhanceitem item = scrollviewitems[itemindex]; if (centeritem == item) return; canchangeitem = false; precenteritem = centeritem; centeritem = item; float centerxvalue = positioncurve.evaluate(0.5f) * poscurvefactor; bool isright = false; if (item.transform.localposition.x > centerxvalue) isright = true; int moveindexcount = getmovecurvefactorcount(item.transform.localposition.x); if (moveindexcount == -1) { moveindexcount = 1; } float dvalue = 0.0f; if (isright) dvalue = -dfactor * moveindexcount; else dvalue = dfactor * moveindexcount; horizontaltargetvalue += dvalue; currentduration = 0.0f; originhorizontalvalue = horizontalvalue; } public void onbtnrightclick() { if (!canchangeitem) return; int targetindex = centeritem.scrollviewitemindex + 1; if (targetindex > scrollviewitems.count - 1) targetindex = 0; sethorizontaltargetitemindex(targetindex); } public void onbtnleftclick() { if (!canchangeitem) return; int targetindex = centeritem.scrollviewitemindex - 1; if (targetindex < 0) targetindex = scrollviewitems.count - 1; sethorizontaltargetitemindex(targetindex); }} |
上面的代碼好像不能用 我自己寫了兩種方法
1 使用 scroll view 實現效果如下
代碼如下
|
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
|
public int totalitemnum;//共有幾個單元格 public int currentindex;//當前單元格的索引 private float bilv ; public float currentbilv = 0; private void awake() { scrollrect = getcomponent<scrollrect>(); scrollrect.horizontalnormalizedposition =0; } // use this for initialization void start () { button[] button = scrollrect.content.getcomponentsinchildren<button>(); totalitemnum= button.length; bilv = 1 / (totalitemnum - 1.00f); } public void onbegindrag(pointereventdata eventdata) { beginmousepositionx = input.mouseposition.x; } public void onenddrag(pointereventdata eventdata) { float offsetx = 0; endmousepositionx = input.mouseposition.x; offsetx = beginmousepositionx - endmousepositionx; if (mathf.abs(offsetx)>firstitemlength) { if (offsetx>0) { //當前的單元格大于等于單元格的總個數 if (currentindex >= totalitemnum-1 ) { debug.log("左滑動-------"); return; } currentindex += 1; scrollrect.dohorizontalnormalizedpos(currentbilv += bilv, 0.2f); debug.log("左滑動"); } else { debug.log("右滑動"); //當前的單元格大于等于單元格的總個數 if ( currentindex < 1) { return; } currentindex -= 1; scrollrect.dohorizontalnormalizedpos(currentbilv -= bilv, 0.2f); } } } |
|
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
using system.collections;using system.collections.generic;using unityengine;using dg.tweening;using unityengine.ui; public class threepage1 : monobehaviour { public gameobject[] images; int currentindex; public float distancesnum = 250; public float min = 0.8f; public float max = 1.4f; public float speed = 0.2f; public float alpha = 0.8f; void start () { initrecttranform(); } public void initrecttranform() { currentindex = images.length / 2; for (int i = currentindex + 1; i < images.length; i++) { images[i].getcomponent<recttransform>().anchoredposition = new vector3((i - currentindex) * distancesnum, 0, 0); } int num = 0; for (int i = currentindex; i >= 0; i--) { images[i].getcomponent<recttransform>().anchoredposition = new vector3(-num * distancesnum, 0, 0); num++; } foreach (var item in images) { if (item != images[currentindex]) { item.getcomponent<recttransform>().localscale = new vector3(min, min); item.getcomponent<image>().color = new color(1, 1, 1, alpha); } else { item.getcomponent<recttransform>().localscale = new vector3(max, max); } } } public void left() { buttonmanager._instances.playinput(); onleftbuttonclick(); } public void onleftbuttonclick() { if (currentindex < images.length-1) { foreach (gameobject item in images) { (item.getcomponent<recttransform>()).doanchorposx(item.getcomponent<recttransform>().anchoredposition.x- distancesnum, speed); } images[currentindex].getcomponent<image>().color = new color(1, 1, 1, alpha); images[currentindex].getcomponent<recttransform>().doscale(min, speed); currentindex += 1; images[currentindex].getcomponent<recttransform>().doscale(max, speed); images[currentindex].getcomponent<image>().color = new color(1, 1, 1, 1f); } } public void right() { buttonmanager._instances.playinput(); onrightbuttonclick(); } public void onrightbuttonclick() { if (currentindex > 0) { foreach (gameobject item in images) { (item.getcomponent<recttransform>()).doanchorposx(item.getcomponent<recttransform>().anchoredposition.x + distancesnum, speed); } images[currentindex].getcomponent<recttransform>().doscale(min, speed); images[currentindex].getcomponent<image>().color = new color(1, 1, 1, alpha); currentindex -= 1; images[currentindex].getcomponent<recttransform>().doscale(max, speed); images[currentindex].getcomponent<image>().color = new color(1, 1, 1, 1f); } } private void onenable() { ison = true; timess = 0; //jarodinputcontroller.isshiyong = true; } private void ondisable() { initrecttranform(); jarodinputcontroller.isshiyong = false; }} |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_36848370/article/details/82800849
