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

Demo源码：点击打开链接

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

效果图一

效果图二

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

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

目录结构如下

其中Items有4个Image子节点

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

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

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

在Items添加如下脚本组件

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class Items : MonoBehaviour

{

public List items = new List();

//缩放时间

public float time = 1.3f;

//原先大小

public Vector2 oldSize;

//放大缩小速度

public float speed;

private void Start()

{

for (int i = 0; i < items.Count; i++)

{

EventTriggerListener.GetComponent(items[i]).onEnter = OnMouseEnter;

EventTriggerListener.GetComponent(items[i]).onExit = OnMouseExit;

}

}

void OnMouseEnter(GameObject go)

{

EventTriggerListener.GetComponent(go).UpdateSize(oldSize * time, speed);

}

void OnMouseExit(GameObject go)

{

EventTriggerListener.GetComponent(go).UpdateSize(oldSize, speed);

}

}

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

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.EventSystems;

using UnityEngine.UI;

[RequireComponent(typeof(LayoutElement))]

public class EventTriggerListener : EventTrigger

{

public delegate void VoidDelegate(GameObject obj);

//点击

public VoidDelegate onClick;

//鼠标按下

public VoidDelegate onDown;

//鼠标抬起

public VoidDelegate onUp;

//鼠标移入

public VoidDelegate onEnter;

//鼠标移出

public VoidDelegate onExit;

private Vector2 currentSize;

private Vector2 targetSize;

private float speed = 4.0f;

public static EventTriggerListener GetComponent(GameObject obj)

{

EventTriggerListener listener = obj.GetComponent();

if (listener == null)

{

listener = obj.AddComponent();

}

return listener;

}

public override void OnPointerClick(PointerEventData eventData)

{

if (onClick != null)

{

onClick(gameObject);

}

}

public override void OnPointerDown(PointerEventData eventData)

{

if (onDown != null) onDown(gameObject);

}

public override void OnPointerUp(PointerEventData eventData)

{

if (onUp != null) onUp(gameObject);

}

public override void OnPointerEnter(PointerEventData eventData)

{

if (onEnter != null) onEnter(gameObject);

}

public override void OnPointerExit(PointerEventData eventData)

{

if (onExit != null) onExit(gameObject);

}

private void Start()

{

targetSize = currentSize = new Vector2(this.GetComponent().preferredWidth, this.GetComponent().preferredHeight);

}

private void Update()

{

if (currentSize != targetSize)

{

currentSize = Vector2.Lerp(currentSize, targetSize, Time.deltaTime * speed);

if (Vector2.Distance(currentSize, targetSize) <= 0.01)

{

currentSize = targetSize;

}

this.GetComponent().preferredWidth = currentSize.x;

this.GetComponent().preferredHeight = currentSize.y;

}

}

public void UpdateSize(Vector2 size,float speed)

{

this.targetSize = size;

this.speed = speed;

}

}

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

可以按自己喜好调整数值。

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