最近的项目中，想做到一种能够吸引眼球的一种角色选择浏览效果

阅读原文获取Demo源码：blog.liujunliang.com.cn

最终实现了下按如下图这么一种浏览效果：

·效果图一

·效果图二

可能要实现这么一种效果用动画插件会很快，但总感觉有点大材小用

这里我向大家分享一个极简方式来实现这么一种效果

目录结构如下

其中Items有4个Image子节点

在父节点Items下添加如下图横向布局组件

在其4个Image子节点下添加如下图布局元素组件

完成这些步骤后接下来就是代码实现了

在Items添加如下脚本组件

[csharp] view plain copy  

1. using System.Collections;  
2. using System.Collections.Generic;  
3. using UnityEngine;  
4. using UnityEngine.UI;  
5.   
6. public class Items : MonoBehaviour  
7. {  
8.     public List<GameObject> items = new List<GameObject>();  
9.   
10.     //缩放时间  
11.     public float time = 1.3f;  
12.   
13.     //原先大小  
14.     public Vector2 oldSize;  
15.   
16.     //放大缩小速度  
17.     public float speed;  
18.   
19.     private void Start()  
20.     {  
21.         for (int i = 0; i < items.Count; i++)  
22.         {  
23.             EventTriggerListener.GetComponent(items[i]).onEnter = OnMouseEnter;  
24.             EventTriggerListener.GetComponent(items[i]).onExit = OnMouseExit;  
25.         }  
26.     }  
27.   
28.   
29.     void OnMouseEnter(GameObject go)  
30.     {  
31.         EventTriggerListener.GetComponent(go).UpdateSize(oldSize * time, speed);  
32.     }  
33.   
34.     void OnMouseExit(GameObject go)  
35.     {  
36.         EventTriggerListener.GetComponent(go).UpdateSize(oldSize, speed);  
37.     }  
38. }  

在其4个子节点下添加如下脚本组件

[csharp] view plain copy  

1. using System.Collections;  
2. using System.Collections.Generic;  
3. using UnityEngine;  
4. using UnityEngine.EventSystems;  
5. using UnityEngine.UI;  
6.   
7. [RequireComponent(typeof(LayoutElement))]  
8. public class EventTriggerListener : EventTrigger  
9. {  
10.     public delegate void VoidDelegate(GameObject obj);  
11.     //点击  
12.     public VoidDelegate onClick;  
13.     //鼠标按下  
14.     public VoidDelegate onDown;  
15.     //鼠标抬起  
16.     public VoidDelegate onUp;  
17.     //鼠标移入  
18.     public VoidDelegate onEnter;  
19.     //鼠标移出  
20.     public VoidDelegate onExit;  
21.   
22.     private Vector2 currentSize;  
23.     private Vector2 targetSize;  
24.     private float speed = 4.0f;  
25.   
26.     public static EventTriggerListener GetComponent(GameObject obj)  
27.     {  
28.         EventTriggerListener listener = obj.GetComponent<EventTriggerListener>();  
29.         if (listener == null)  
30.         {  
31.             listener = obj.AddComponent<EventTriggerListener>();  
32.         }  
33.   
34.         return listener;  
35.     }  
36.   
37.   
38.     public override void OnPointerClick(PointerEventData eventData)  
39.     {  
40.         if (onClick != null)  
41.         {  
42.             onClick(gameObject);  
43.         }  
44.     }  
45.     public override void OnPointerDown(PointerEventData eventData)  
46.     {  
47.         if (onDown != null) onDown(gameObject);  
48.     }  
49.     public override void OnPointerUp(PointerEventData eventData)  
50.     {  
51.         if (onUp != null) onUp(gameObject);  
52.     }  
53.     public override void OnPointerEnter(PointerEventData eventData)  
54.     {  
55.         if (onEnter != null) onEnter(gameObject);  
56.     }  
57.     public override void OnPointerExit(PointerEventData eventData)  
58.     {  
59.         if (onExit != null) onExit(gameObject);  
60.     }  
61.   
62.   
63.   
64.     private void Start()  
65.     {  
66.         targetSize = currentSize = new Vector2(this.GetComponent<LayoutElement>().preferredWidth, this.GetComponent<LayoutElement>().preferredHeight);  
67.     }  
68.   
69.     private void Update()  
70.     {  
71.         if (currentSize != targetSize)  
72.         {  
73.             currentSize = Vector2.Lerp(currentSize, targetSize, Time.deltaTime * speed);  
74.             if (Vector2.Distance(currentSize, targetSize) <= 0.01)  
75.             {  
76.                 currentSize = targetSize;  
77.             }  
78.   
79.             this.GetComponent<LayoutElement>().preferredWidth = currentSize.x;  
80.             this.GetComponent<LayoutElement>().preferredHeight = currentSize.y;  
81.         }  
82.     }  
83.   
84.     public void UpdateSize(Vector2 size,float speed)  
85.     {  
86.         this.targetSize = size;  
87.         this.speed = speed;  
88.     }  
89. }  

脚本挂载上去后，在Item下按如下图方式设值

可以按自己喜好调整数值