Unity简单实现图片墙功能

Unity简单实现图片墙功能

前言

在做之前公司的项目中，我做过很多实现照片墙效果的功能。其中我觉得我做的效果比较好而且比较有难度的就是雀巢项目中的那个仿照apple watch拖拽效果实现的那个照片墙功能。这个项目我在之前的博客中已经做过简单的介绍了，在这里不在赘述。今天在这篇博客中介绍下我在一家公司面试时，这家给我留得机试题，其实这个功能实现起来也不是很难，我在这里做下简单的介绍，实现效果如下图所示：

步骤

一、在项目中导入DoTween插件，图片的移动和放大变化需要用到这个插件，如下图所示：
二、编写ChangeImages.cs脚本，实现图片变化的核心功能，代码如下所示：

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

public class ToChangeImages : MonoBehaviour
{
    float enlargeSize = 2.0f;

    float radiateSize = 220;

    Dictionary<RectTransform, Vector2> itemPosDict = new Dictionary<RectTransform, Vector2>();

    List<RectTransform> changedItemList = new List<RectTransform>();

    public RectTransform[] item; 



	// Use this for initialization
	void Start ()
    {
        StartThis();
	}

    void StartThis()
    {
        for (int i = 0;i<item.Length;i++)
        {
            RectTransform item0 = item[i];
            //Vector2 startPos = item0.position;
            Vector2 startPos = item0.transform.localPosition;
            Debug.Log(startPos.ToString());
            itemPosDict.Add(item0,startPos);
            
        }
    }
	
	// Update is called once per frame
	void Update () {
		
	}

    public void OnMousePointEnter(RectTransform item1)
    {
        //缓动改变中心物体的尺寸
        item1.DOScale(enlargeSize,0.5f);

        Vector2 pos = itemPosDict[item1];

        changedItemList = new List<RectTransform>();

        //添加扩散物体到集合
        foreach (KeyValuePair<RectTransform,Vector2> 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[item1] + (itemPosDict[changedItemList[i]] - itemPosDict[item1]).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);
        }
    }
}

三、根据自己需要排列UI，我的测试UI排列如下图所示：
四、在每个Image组件下添加EventTrigger组件，添加PointerEnter和PointerExit功能，并将脚本中对应的方法赋值到其中，如下图所示：
五、运行项目实现效果如下图所示：

相关链接

下载连接1
下载链接2