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 的 Render Mode 可以设置任意形式，包括 Screen space-Overlay，Screen space-Camera，World Space，这里设置为 World Space

3、注意一点的是，Image 的 Anchors 设置为 右上，如下图

4、引入 DoTween 动画效果插件，编写脚本代码，挂载脚本，赋值预制体，如下

5、给 Image 添加 EventTrigger，并绑定相关事件，如下

6、运行场景，效果如下

 

六、相关代码

using DG.Tweening;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;


public class PhotoWall: MonoBehaviour
{

    public RectTransform prefab;

    int row = 10;       // 行
    int column = 15;        // 列

    //第一张照片的位置
    int startXPos = 60;    
    int startZPos = -100;

    // 照片 X 轴上的间距（Image 目前 （50，50），所以大于 50 照片间即可有间距，Min 和 Max 可以设置不同）
    float distanceRandomMinX = 60;
    float distanceRandomMaxX = 60;

    // 照片 Y 轴上的间距（Image 目前 （50，50），所以大于 50 照片间即可有间距，Min 和 Max 可以设置不同）
    float distanceRandomMinY = 60;
    float distanceRandomMaxY = 60;

    // 照片移动的距离，根据自己的 Canvas 画布和 Image 大小适配
    float initMoveDistance = 1000;

    // 选中照片时，放大的倍数
    float enlargeSize = 5;

    // 选中照片时，周围照片的改变范围
    float radiateSize = 220;

    // 照片集合列表
    List> goList;

    // 照片和位置字典
    Dictionary itemPosDict;

    // 选中照片，照片变动集合
    List changedItemList;

    // Use this for initialization
    void Start()
    {

        goList = new List>();
        itemPosDict = new Dictionary();
        changedItemList = new List();

        CreateGos();
    }


    void CreateGos()
    {
        // 生成所有物体，并添加到字典
        for (int i = 0; i < row; i++)
        {
            List gos = new List();
            goList.Add(gos);
            float lastPosX = 0;
            for (int j = 0; j < column; j++)
            {
                // 生成照片，并设置照片名称，以及父物体
                RectTransform item = (Instantiate(prefab.gameObject) as GameObject).GetComponent();
                item.name = i + " " + j;
                item.transform.SetParent(transform);

                // 设置 照片的初始位置，以及最终运动到的位置
                Vector3 startPos = new Vector3(Random.Range(distanceRandomMinX, distanceRandomMaxX) + lastPosX, startZPos - i * Random.Range(distanceRandomMinY, distanceRandomMaxY));
                item.anchoredPosition = startPos;
                Vector3 endPos = new Vector3(startPos.x - initMoveDistance, startZPos - i * Random.Range(distanceRandomMinY, distanceRandomMaxY));

                // DOTween 开始延迟动画，最后一行先开始运动，依次网上
                Tweener tweener = item.DOAnchorPosX(endPos.x, Random.Range(1.8f, 2f));  // 缓动到目标位置
                tweener.SetDelay(j * 0.1f + (row - i) * 0.1f);      // 延时
                tweener.SetEase(Ease.InOutBounce);           // 缓动效果

                // 适配 Canvas 的 Render Mode 的任何形式，保证显示正常
                item.transform.localPosition = new Vector3(item.transform.localPosition.x, item.transform.localPosition.y, 0);
                item.transform.localScale = Vector3.one;

                // 修改 Image下的 Text 文本信息
                item.transform.GetChild(0).GetComponent().text = item.name;

                //添加到集合
                item.gameObject.SetActive(true);
                gos.Add(item);
                itemPosDict.Add(item, endPos);

                // 更新当前 X 轴点信息
                lastPosX = item.anchoredPosition.x;
            }
        }
    }


    /// 

    /// 鼠标进入的事件
    /// 
    /// 当前的UI物体
    public void OnMousePointEnter(RectTransform item)
    {
        
        // 缓动改变中心物体（选中照片）尺寸
        item.DOScale(enlargeSize, 0.5f);

        Vector2 pos = itemPosDict[item];

        // 更新集合
        changedItemList = new List();

        // 遍历字典，添加扩散物体到集合
        foreach (KeyValuePair i in itemPosDict)
        {
            // 变动范围内的 照片集合
            if (Vector2.Distance(i.Value, pos) < radiateSize)
            {
                changedItemList.Add(i.Key);
            }
        }

        // 缓动来解决扩散物体的动画
        for (int i = 0; i < changedItemList.Count; i++)
        {
            // 方向上变动照片集合
            Vector2 targetPos = itemPosDict[item] + (itemPosDict[changedItemList[i]] - itemPosDict[item]).normalized * radiateSize;
            changedItemList[i].DOAnchorPos(targetPos, 0.8f);
        }
    }

    /// 

    /// 鼠标移开的事件
    /// 
    /// 
    public void OnMousePointExit(RectTransform go)
    {
        // 缓动恢复中心物体尺寸
        go.DOScale(1, 1);
        // 缓动将扩散物体恢复到初始位置
        for (int i = 0; i < changedItemList.Count; i++)
        {
            changedItemList[i].DOAnchorPos(itemPosDict[changedItemList[i]], 0.8f);
        }
    }

    /// 

    /// 鼠标按下的事件
    /// 
    /// 
    public void OnMousePointDown(RectTransform go)
    {
        // Image 变色
        go.gameObject.GetComponent().color = Color.red;

        
    }

}

 

七、代码工程

Unity UGUI Photo Wall 照片墙效果，点击下载

 

有些人会问图片怎么加载，下面我这篇有动态图片加载的方法，可以作为参考，希望能帮到您：

Unity UGUI 效果 之 多页翻页，多页任意翻页的简单效果实现（示例演示为动态加载多图片实现翻页预览效果）