Unity3D实现扭动挤压浏览效果

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

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<gameobject> items = new list<gameobject>();
 
 //缩放时间
 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<eventtriggerlistener>();
 if (listener == null)
 {
 listener = obj.addcomponent<eventtriggerlistener>();
 }
 
 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<layoutelement>().preferredwidth, this.getcomponent<layoutelement>().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<layoutelement>().preferredwidth = currentsize.x;
 this.getcomponent<layoutelement>().preferredheight = currentsize.y;
 }
 }
 
 public void updatesize(vector2 size,float speed)
 {
 this.targetsize = size;
 this.speed = speed;
 }
}

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

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

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