Unity3D UGUI实现缩放循环拖动卡牌展示效果

楚诗青

本文实例为大家分享了Unity3D UGUI实现缩放循环拖动卡牌展示的具体代码，供大家参考，具体内容如下
需求：游戏中展示卡牌这种效果也是蛮酷炫并且使用的一种常见效果，下面我们就来实现以下这个效果是如何实现。

思考:第一看看到这个效果，我们首先会想到UGUI里面的ScrollRect，当然也可以用ScrollRect来实现缩短ContentSize的width来自动实现重叠效果，然后中间左右的卡牌通过计算来显示缩放，这里我并没有用这种思路来实现，我提供另外一种思路，就是自己去计算当前每个卡牌的位置和缩放值，不用UGUI的内置组件。
CODE:
1.卡牌拖动组件:

1. using UnityEngine;
   
2. using UnityEngine.EventSystems;
   
3. using UnityEngine.UI;
   
4. 
   
5. public enum DragPosition
   
6. {
   
7. Left,
   
8. Right,
   
9. Up,
   
10. Down,
    
11. }
    
12. 
    
13. [RequireComponent(typeof(Image))]
    
14. public class CDragOnCard : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
    
15. {
    
16. public bool dragOnSurfaces = true;
    
17. public ScrollRect m_ScrollRect = null;
    
18. public CFixGridRect m_FixGridRect = null;
    
19. private RectTransform m_DraggingPlane;
    
20. 
    
21. public bool isVertical = false;
    
22. private bool isSelf = false;
    
23. private DragPosition m_dragPosition = DragPosition.Left;
    
24. 
    
25. public System.Action<DragPosition> DragCallBack = null;
    
26. 
    
27. public void OnBeginDrag(PointerEventData eventData)
    
28. {
    
29.   Vector2 touchDeltaPosition = Vector2.zero;
    
30. #if UNITY_EDITOR
    
31.   float delta_x = Input.GetAxis("Mouse X");
    
32.   float delta_y = Input.GetAxis("Mouse Y");
    
33.   touchDeltaPosition = new Vector2(delta_x, delta_y);
    
34. 
    
35. #elif UNITY_ANDROID || UNITY_IPHONE
    
36. touchDeltaPosition = Input.GetTouch(0).deltaPosition;
    
37. #endif
    
38.   if (isVertical)
    
39.   {
    
40.    if(touchDeltaPosition.y > 0)
    
41.    {
    
42.     UnityEngine.Debug.Log("上拖");
    
43.     m_dragPosition = DragPosition.Up;
    
44.    }
    
45.    else
    
46.    {
    
47.     UnityEngine.Debug.Log("下拖");
    
48.     m_dragPosition = DragPosition.Down;
    
49.    }
    
50. 
    
51.    if (Mathf.Abs(touchDeltaPosition.x) > Mathf.Abs(touchDeltaPosition.y))
    
52.    {
    
53.     isSelf = true;
    
54.     var canvas = FindInParents<Canvas>(gameObject);
    
55.     if (canvas == null)
    
56.      return;
    
57. 
    
58.     if (dragOnSurfaces)
    
59.      m_DraggingPlane = transform as RectTransform;
    
60.     else
    
61.      m_DraggingPlane = canvas.transform as RectTransform;
    
62. 
    
63.    }
    
64.    else
    
65.    {
    
66.     isSelf = false;
    
67.     if (m_ScrollRect != null)
    
68.      m_ScrollRect.OnBeginDrag(eventData);
    
69.    }
    
70.   }
    
71.   else //水平
    
72.   {
    
73.    if (touchDeltaPosition.x > 0)
    
74.    {
    
75.     UnityEngine.Debug.Log("右移");
    
76.     m_dragPosition = DragPosition.Right;
    
77.    }
    
78.    else
    
79.    {
    
80.     UnityEngine.Debug.Log("左移");
    
81.     m_dragPosition = DragPosition.Left;
    
82.    }
    
83. 
    
84.    if (Mathf.Abs(touchDeltaPosition.x) < Mathf.Abs(touchDeltaPosition.y))
    
85.    {
    
86.     isSelf = true;
    
87.     var canvas = FindInParents<Canvas>(gameObject);
    
88.     if (canvas == null)
    
89.      return;
    
90. 
    
91.     if (dragOnSurfaces)
    
92.      m_DraggingPlane = transform as RectTransform;
    
93.     else
    
94.      m_DraggingPlane = canvas.transform as RectTransform;
    
95.    }
    
96.    else
    
97.    {
    
98.     isSelf = false;
    
99.     if (m_ScrollRect != null)
    
100.      m_ScrollRect.OnBeginDrag(eventData);
     
101.    }
     
102.   }
     
103. }
     
104. 
     
105. public void OnDrag(PointerEventData data)
     
106. {
     
107.   if (isSelf)
     
108.   {
     
109. 
     
110.   }
     
111.   else
     
112.   {
     
113.    if (m_ScrollRect != null)
     
114.     m_ScrollRect.OnDrag(data);
     
115.   }
     
116. }
     
117. 
     
118. public void OnEndDrag(PointerEventData eventData)
     
119. {
     
120.   if (isSelf)
     
121.   {
     
122. 
     
123.   }
     
124.   else
     
125.   {
     
126.    if (m_ScrollRect != null)
     
127.     m_ScrollRect.OnEndDrag(eventData);
     
128.    if (m_FixGridRect != null)
     
129.     m_FixGridRect.OnEndDrag(eventData);
     
130.   }
     
131. 
     
132.   if (DragCallBack != null)
     
133.    DragCallBack(m_dragPosition);
     
134. }
     
135. 
     
136. static public T FindInParents<T>(GameObject go) where T : Component
     
137. {
     
138.   if (go == null) return null;
     
139.   var comp = go.GetComponent<T>();
     
140. 
     
141.   if (comp != null)
     
142.    return comp;
     
143. 
     
144.   Transform t = go.transform.parent;
     
145.   while (t != null && comp == null)
     
146.   {
     
147.    comp = t.gameObject.GetComponent<T>();
     
148.    t = t.parent;
     
149.   }
     
150.   return comp;
     
151. }
     
152. }

复制代码

2.卡牌组件

1. using UnityEngine;
   
2. using System.Collections;
   
3. using UnityEngine.UI;
   
4. 
   
5. public class EnhanceItem : MonoBehaviour
   
6. {
   
7. // 在ScrollViewitem中的索引
   
8. // 定位当前的位置和缩放
   
9. public int scrollViewItemIndex = 0;
   
10. public bool inRightArea = false;
    
11. 
    
12. private Vector3 targetPos = Vector3.one;
    
13. private Vector3 targetScale = Vector3.one;
    
14. 
    
15. private Transform mTrs;
    
16. private Image mImage;
    
17. 
    
18. private int index = 1;
    
19. public void Init(int cardIndex = 1)
    
20. {
    
21.   index = cardIndex;
    
22.   mTrs = this.transform;
    
23.   mImage = this.GetComponent<Image>();
    
24.   mImage.sprite = Resources.Load<Sprite>(string.Format("Texture/card_bg_big_{0}", cardIndex % 6 + 1));
    
25.   this.gameObject.GetComponent<Button>().onClick.AddListener(delegate () { OnClickScrollViewItem(); });
    
26. }
    
27. 
    
28. // 当点击Item，将该item移动到中间位置
    
29. private void OnClickScrollViewItem()
    
30. {
    
31.   Debug.LogError("点击" + index);
    
32.   EnhancelScrollView.GetInstance().SetHorizontalTargetItemIndex(scrollViewItemIndex);
    
33. }
    
34. 
    
35. /// <summary>
    
36. /// 更新该Item的缩放和位移
    
37. /// </summary>
    
38. public void UpdateScrollViewItems(float xValue, float yValue, float scaleValue)
    
39. {
    
40.   targetPos.x = xValue;
    
41.   targetPos.y = yValue;
    
42.   targetScale.x = targetScale.y = scaleValue;
    
43. 
    
44.   mTrs.localPosition = targetPos;
    
45.   mTrs.localScale = targetScale;
    
46. }
    
47. 
    
48. public void SetSelectColor(bool isCenter)
    
49. {
    
50.   if (mImage == null)
    
51.    mImage = this.GetComponent<Image>();
    
52. 
    
53.   if (isCenter)
    
54.    mImage.color = Color.white;
    
55.   else
    
56.    mImage.color = Color.gray;
    
57. }
    
58. }

复制代码

3.自定义的ScrollView组件

1. using UnityEngine;
   
2. using System.Collections;
   
3. using System.Collections.Generic;
   
4. using UnityEngine.UI;
   
5. 
   
6. public class EnhancelScrollView : MonoBehaviour
   
7. {
   
8. public AnimationCurve scaleCurve;
   
9. public AnimationCurve positionCurve;
   
10. public float posCurveFactor = 500.0f;
    
11. public float yPositionValue = 46.0f;
    
12. 
    
13. public List<EnhanceItem> scrollViewItems = new List<EnhanceItem>();
    
14. private List<Image> imageTargets = new List<Image>();
    
15. 
    
16. private EnhanceItem centerItem;
    
17. private EnhanceItem preCenterItem;
    
18. 
    
19. private bool canChangeItem = true;
    
20. 
    
21. public float dFactor = 0.2f;
    
22. 
    
23. private float[] moveHorizontalValues;
    
24. private float[] dHorizontalValues;
    
25. 
    
26. public float horizontalValue = 0.0f;
    
27. public float horizontalTargetValue = 0.1f;
    
28. 
    
29. private float originHorizontalValue = 0.1f;
    
30. public float duration = 0.2f;
    
31. private float currentDuration = 0.0f;
    
32. 
    
33. private static EnhancelScrollView instance;
    
34. 
    
35. private bool isInit = false;
    
36. public static EnhancelScrollView GetInstance()
    
37. {
    
38.   return instance;
    
39. }
    
40. 
    
41. void Awake()
    
42. {
    
43.   instance = this;
    
44. }
    
45. 
    
46. public void Init()
    
47. {
    
48.   if ((scrollViewItems.Count % 2) == 0)
    
49.   {
    
50.    Debug.LogError("item count is invaild,please set odd count! just support odd count.");
    
51.   }
    
52. 
    
53.   if (moveHorizontalValues == null)
    
54.    moveHorizontalValues = new float[scrollViewItems.Count];
    
55. 
    
56.   if (dHorizontalValues == null)
    
57.    dHorizontalValues = new float[scrollViewItems.Count];
    
58. 
    
59.   if (imageTargets == null)
    
60.    imageTargets = new List<Image>();
    
61. 
    
62.   int centerIndex = scrollViewItems.Count / 2;
    
63.   for (int i = 0; i < scrollViewItems.Count; i++)
    
64.   {
    
65.    scrollViewItems[i].scrollViewItemIndex = i;
    
66.    Image tempImage = scrollViewItems[i].gameObject.GetComponent<Image>();
    
67.    imageTargets.Add(tempImage);
    
68. 
    
69.    dHorizontalValues[i] = dFactor * (centerIndex - i);
    
70. 
    
71.    dHorizontalValues[centerIndex] = 0.0f;
    
72.    moveHorizontalValues[i] = 0.5f - dHorizontalValues[i];
    
73.    scrollViewItems[i].SetSelectColor(false);
    
74.   }
    
75. 
    
76.   //centerItem = scrollViewItems[centerIndex];
    
77.   canChangeItem = true;
    
78.   isInit = true;
    
79. }
    
80. 
    
81. public void UpdateEnhanceScrollView(float fValue)
    
82. {
    
83.   for (int i = 0; i < scrollViewItems.Count; i++)
    
84.   {
    
85.    EnhanceItem itemScript = scrollViewItems[i];
    
86.    float xValue = GetXPosValue(fValue, dHorizontalValues[itemScript.scrollViewItemIndex]);
    
87.    float scaleValue = GetScaleValue(fValue, dHorizontalValues[itemScript.scrollViewItemIndex]);
    
88.    itemScript.UpdateScrollViewItems(xValue, yPositionValue, scaleValue);
    
89.   }
    
90. }
    
91. 
    
92. void Update()
    
93. {
    
94.   if (!isInit)
    
95.    return;
    
96.   currentDuration += Time.deltaTime;
    
97.   SortDepth();
    
98.   if (currentDuration > duration)
    
99.   {
    
100.    currentDuration = duration;
     
101. 
     
102.    //if (centerItem != null)
     
103.    //{
     
104.    // centerItem.SetSelectColor(true);
     
105.    //}
     
106. 
     
107.    if (centerItem == null)
     
108.    {
     
109.     var obj = transform.GetChild(transform.childCount - 1);
     
110.     if (obj != null)
     
111.      centerItem = obj.GetComponent<EnhanceItem>();
     
112.     if (centerItem != null)
     
113.      centerItem.SetSelectColor(true);
     
114.    }
     
115.    else
     
116.     centerItem.SetSelectColor(true);
     
117.    if (preCenterItem != null)
     
118.     preCenterItem.SetSelectColor(false);
     
119.    canChangeItem = true;
     
120.   }
     
121. 
     
122.   float percent = currentDuration / duration;
     
123.   horizontalValue = Mathf.Lerp(originHorizontalValue, horizontalTargetValue, percent);
     
124.   UpdateEnhanceScrollView(horizontalValue);
     
125. }
     
126. 
     
127. private float GetScaleValue(float sliderValue, float added)
     
128. {
     
129.   float scaleValue = scaleCurve.Evaluate(sliderValue + added);
     
130.   return scaleValue;
     
131. }
     
132. 
     
133. private float GetXPosValue(float sliderValue, float added)
     
134. {
     
135.   float evaluateValue = positionCurve.Evaluate(sliderValue + added) * posCurveFactor;
     
136.   return evaluateValue;
     
137. }
     
138. 
     
139. public void SortDepth()
     
140. {
     
141.   imageTargets.Sort(new CompareDepthMethod());
     
142.   for (int i = 0; i < imageTargets.Count; i++)
     
143.    imageTargets[i].transform.SetSiblingIndex(i);
     
144. }
     
145. 
     
146. public class CompareDepthMethod : IComparer<Image>
     
147. {
     
148.   public int Compare(Image left, Image right)
     
149.   {
     
150.    if (left.transform.localScale.x > right.transform.localScale.x)
     
151.     return 1;
     
152.    else if (left.transform.localScale.x < right.transform.localScale.x)
     
153.     return -1;
     
154.    else
     
155.     return 0;
     
156.   }
     
157. }
     
158. 
     
159. private int GetMoveCurveFactorCount(float targetXPos)
     
160. {
     
161.   int centerIndex = scrollViewItems.Count / 2;
     
162.   for (int i = 0; i < scrollViewItems.Count; i++)
     
163.   {
     
164.    float factor = (0.5f - dFactor * (centerIndex - i));
     
165. 
     
166.    float tempPosX = positionCurve.Evaluate(factor) * posCurveFactor;
     
167.    if (Mathf.Abs(targetXPos - tempPosX) < 0.01f)
     
168.     return Mathf.Abs(i - centerIndex);
     
169.   }
     
170.   return -1;
     
171. }
     
172. 
     
173. public void SetHorizontalTargetItemIndex(int itemIndex)
     
174. {
     
175.   if (!canChangeItem)
     
176.    return;
     
177. 
     
178.   EnhanceItem item = scrollViewItems[itemIndex];
     
179.   if (centerItem == item)
     
180.    return;
     
181. 
     
182.   canChangeItem = false;
     
183.   preCenterItem = centerItem;
     
184.   centerItem = item;
     
185. 
     
186.   float centerXValue = positionCurve.Evaluate(0.5f) * posCurveFactor;
     
187.   bool isRight = false;
     
188.   if (item.transform.localPosition.x > centerXValue)
     
189.    isRight = true;
     
190. 
     
191.   int moveIndexCount = GetMoveCurveFactorCount(item.transform.localPosition.x);
     
192.   if (moveIndexCount == -1)
     
193.   {
     
194.    moveIndexCount = 1;
     
195.   }
     
196. 
     
197.   float dvalue = 0.0f;
     
198.   if (isRight)
     
199.    dvalue = -dFactor * moveIndexCount;
     
200.   else
     
201.    dvalue = dFactor * moveIndexCount;
     
202. 
     
203.   horizontalTargetValue += dvalue;
     
204.   currentDuration = 0.0f;
     
205.   originHorizontalValue = horizontalValue;
     
206. }
     
207. 
     
208. public void OnBtnRightClick()
     
209. {
     
210.   if (!canChangeItem)
     
211.    return;
     
212.   int targetIndex = centerItem.scrollViewItemIndex + 1;
     
213.   if (targetIndex > scrollViewItems.Count - 1)
     
214.    targetIndex = 0;
     
215.   SetHorizontalTargetItemIndex(targetIndex);
     
216. }
     
217. 
     
218. public void OnBtnLeftClick()
     
219. {
     
220.   if (!canChangeItem)
     
221.    return;
     
222.   int targetIndex = centerItem.scrollViewItemIndex - 1;
     
223.   if (targetIndex < 0)
     
224.    targetIndex = scrollViewItems.Count - 1;
     
225.   SetHorizontalTargetItemIndex(targetIndex);
     
226. }
     
227. }

复制代码

上面的代码好像不能用 我自己写了两种方法
1  使用 Scroll View 实现效果如下

代码如下

1. public int totalItemNum;//共有几个单元格
   
2. 
   
3. public int currentIndex;//当前单元格的索引
   
4. 
   
5. private float bilv ;
   
6. 
   
7. public float currentBilv = 0;
   
8. 
   
9. private void Awake()
   
10. {
    
11.   scrollRect = GetComponent<ScrollRect>();
    
12. 
    
13. scrollRect.horizontalNormalizedPosition =0;
    
14. }
    
15. // Use this for initialization
    
16. void Start () {
    
17. Button[] button = scrollRect.content.GetComponentsInChildren<Button>();
    
18. totalItemNum= button.Length;
    
19. bilv = 1 / (totalItemNum - 1.00f);
    
20. 
    
21. }
    
22. public void OnBeginDrag(PointerEventData eventData)
    
23. {
    
24. 
    
25. 
    
26. beginMousePositionX = Input.mousePosition.x;
    
27. }
    
28. 
    
29. public void OnEndDrag(PointerEventData eventData)
    
30. {
    
31. 
    
32. float offSetX = 0;
    
33. endMousePositionX = Input.mousePosition.x;
    
34. 
    
35. offSetX = beginMousePositionX - endMousePositionX;
    
36. 
    
37. if (Mathf.Abs(offSetX)>firstItemLength)
    
38. {
    
39.   if (offSetX>0)
    
40.   {
    
41.   //当前的单元格大于等于单元格的总个数
    
42.   if (currentIndex >= totalItemNum-1 )
    
43.   {
    
44.    Debug.Log("左滑动-------");
    
45.    return;
    
46.   }
    
47.   currentIndex += 1;
    
48.   scrollRect.DOHorizontalNormalizedPos(currentBilv += bilv, 0.2f);
    
49. 
    
50.   Debug.Log("左滑动");
    
51.   }
    
52.   else
    
53.   {
    
54.   Debug.Log("右滑动");
    
55.   //当前的单元格大于等于单元格的总个数
    
56.   if ( currentIndex < 1)
    
57.   {
    
58.    return;
    
59.   }
    
60.   currentIndex -= 1;
    
61.   scrollRect.DOHorizontalNormalizedPos(currentBilv -= bilv, 0.2f);
    
62. 
    
63.   }
    
64. }
    
65. 
    
66. }

复制代码

1. using System.Collections;
   
2. using System.Collections.Generic;
   
3. using UnityEngine;
   
4. using DG.Tweening;
   
5. using UnityEngine.UI;
   
6. 
   
7. public class ThreePage1 : MonoBehaviour {
   
8. public GameObject[] images;
   
9. int currentIndex;
   
10. public float DistancesNum = 250;
    
11. public float min = 0.8f;
    
12. public float max = 1.4f;
    
13. 
    
14. public float speed = 0.2f;
    
15. public float Alpha = 0.8f;
    
16. 
    
17. 
    
18. void Start () {
    
19. InitRectTranform();
    
20. }
    
21. public void InitRectTranform()
    
22. {
    
23. currentIndex = images.Length / 2;
    
24. for (int i = currentIndex + 1; i < images.Length; i++)
    
25. {
    
26.   images[i].GetComponent<RectTransform>().anchoredPosition = new Vector3((i - currentIndex) * DistancesNum, 0, 0);
    
27. }
    
28. int num = 0;
    
29. for (int i = currentIndex; i >= 0; i--)
    
30. {
    
31.   images[i].GetComponent<RectTransform>().anchoredPosition = new Vector3(-num * DistancesNum, 0, 0);
    
32.   num++;
    
33. }
    
34. foreach (var item in images)
    
35. {
    
36.   if (item != images[currentIndex])
    
37.   {
    
38.   item.GetComponent<RectTransform>().localScale = new Vector3(min, min);
    
39.   item.GetComponent<Image>().color = new Color(1, 1, 1, Alpha);
    
40.   }
    
41.   else
    
42.   {
    
43.   item.GetComponent<RectTransform>().localScale = new Vector3(max, max);
    
44.   }
    
45. }
    
46. }
    
47. public void Left()
    
48. {
    
49. 
    
50. ButtonManager._Instances.PlayInput();
    
51. 
    
52. OnLeftButtonClick();
    
53. }
    
54. 
    
55. public void OnLeftButtonClick()
    
56. {
    
57. 
    
58. if (currentIndex < images.Length-1)
    
59. {
    
60.   foreach (GameObject item in images)
    
61.   {
    
62.   (item.GetComponent<RectTransform>()).DOAnchorPosX(item.GetComponent<RectTransform>().anchoredPosition.x- DistancesNum, speed);
    
63.   }
    
64.   images[currentIndex].GetComponent<Image>().color = new Color(1, 1, 1, Alpha);
    
65.   images[currentIndex].GetComponent<RectTransform>().DOScale(min, speed);
    
66.   currentIndex += 1;
    
67.   images[currentIndex].GetComponent<RectTransform>().DOScale(max, speed);
    
68.   images[currentIndex].GetComponent<Image>().color = new Color(1, 1, 1, 1f);
    
69. }
    
70. }
    
71. 
    
72. public void Right()
    
73. {
    
74.   
    
75. ButtonManager._Instances.PlayInput();
    
76. 
    
77. OnRightButtonClick();
    
78. }
    
79. 
    
80. public void OnRightButtonClick()
    
81. {
    
82. 
    
83. 
    
84. if (currentIndex > 0)
    
85. {
    
86.   foreach (GameObject item in images)
    
87.   {
    
88.   (item.GetComponent<RectTransform>()).DOAnchorPosX(item.GetComponent<RectTransform>().anchoredPosition.x + DistancesNum, speed);
    
89.   }
    
90.   images[currentIndex].GetComponent<RectTransform>().DOScale(min, speed);
    
91.   images[currentIndex].GetComponent<Image>().color = new Color(1, 1, 1, Alpha);
    
92.   currentIndex -= 1;
    
93.   images[currentIndex].GetComponent<RectTransform>().DOScale(max, speed);
    
94.   images[currentIndex].GetComponent<Image>().color = new Color(1, 1, 1, 1f);
    
95. }
    
96. }
    
97. 
    
98. private void OnEnable()
    
99. {
    
100. isOn = true;
     
101. timess = 0;
     
102. //jarodInputController.IsShiYong = true;
     
103. }
     
104. 
     
105. private void OnDisable()
     
106. {
     
107. InitRectTranform();
     
108. jarodInputController.IsShiYong = false;
     
109. }
     
110. }

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持晓枫资讯。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

群群卡卡酆lu

感谢分享~~~~学习学习~~~~~~

股市万点

感谢楼主分享。

司马逸靠

路过，支持一下

晴天问问l

感谢楼主，顶。