Unity UGUI效果 之 动态照片墙效果

 

 

Unity UGUI效果 之 动态照片墙效果

 

目录

Unity UGUI效果 之 动态照片墙效果

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、实现步骤

六、相关代码

七、代码工程

---

 

一、简单介绍

UGUI，是Unity自带的 GUI 系统，有别于 NGUI；使用 UGUI 也能制作出比较酷炫的效果 。

照片墙效果，即是动态的生成图片，效果，选择对应的照片会变大，周边的照片自动闪开，选中的照片也有点击效果；

 

二、实现原理

1、UGUI 制作 照片预制体；

2、DoTween 实现动画效果；

3、EventTrigger 监听鼠标 进入照片、退出照片、点击照片的效果；

4、关键：动态生成照片，并记录照片的位置列表；选中的照片进行变大，并推移周边的照片，并记录到另一个列表；鼠标移开照片，照片还原，并且周边的照片回到自己的位置；

 

三、注意事项

1、本效果，可以支持 UGUI Canvas 的 Render Mode 任意形式，包括 Screen space-Overlay，Screen space-Camera，World Space

2、预制体 Image 的 Anchors 设置为 右上，Anchors 为 （ 1，1）

 

四、效果预览

 

五、实现步骤

1、打开Unity，新建一个场景，添加一个 Image ，并且添加一个子物体 Text 添加文字描述区分，如下图

2、其中，Canvas 的 Re