1. 项目概述最近在做一个需要展示大量图片的Unity项目UI那边提了个需求想要一个既酷炫又流畅的“照片墙”效果。简单来说就是一堆照片能像画廊一样排列可以平滑地滚动、缩放点击某张照片时它还能优雅地放大并居中显示其他照片则自动退散到周围。这种效果在各类App的相册、作品集展示或者游戏内的图鉴系统里非常常见。要实现它核心难点在于动画的流畅性和交互逻辑的清晰度。如果自己从头写缓动算法和状态管理不仅耗时还容易写出性能瓶颈和奇怪的Bug。这时候一个强大的动画插件就显得尤为重要。我第一时间就想到了DoTween Pro。对于Unity开发者来说DoTween尤其是Pro版本几乎是处理UI和对象动画的“瑞士军刀”。它语法简洁、性能优秀更重要的是它能将复杂的动画序列和路径控制用几行代码就表达清楚。所以这次我就决定用DoTween Pro为核心结合Unity的UGUI系统从头搭建一个高性能、易扩展的照片墙效果。这个方案不仅解决了当前的需求其模块化的设计也能复用到未来的很多项目中。2. 核心思路与架构设计2.1 效果拆解与需求分析在动手写代码之前我们先把这个“照片墙”效果拆解成几个具体的功能点这有助于我们设计清晰的代码结构基础布局多张图片Image组件在一个容器如Panel内按照某种规则如网格、环形进行初始排列。交互滚动支持通过拖拽Drag或鼠标滚轮来让整个照片墙平移浏览所有图片。焦点模式点击某张图片时触发一个过渡动画。被点击的图片平滑放大并移动到屏幕中央而其他所有图片则平滑缩小、变暗或移动到边缘形成一种“聚焦”效果。返回总览在焦点模式下点击背景或被放大的图片所有图片应平滑地动画回初始的网格布局状态。性能与观感所有过渡动画必须平滑、自然带有适当的缓动Easing效果不能有卡顿或跳帧。同时需要处理好图片的加载避免瞬间加载大量大图造成卡顿。2.2 技术选型为什么是DoTween ProUnity里做动画有很多选择Animator、Animation、LeanTween、iTween以及原生的Coroutine配合Mathf.Lerp。为什么这次坚定地选择DoTween Pro链式语法与可读性DoTween的链式调用.Append(),.Join(),.Sequence()让复杂的动画序列代码像写句子一样流畅逻辑一目了然。这对于需要同时控制位置、缩放、旋转、透明度等多个属性的照片墙动画来说维护成本极低。强大的缓动函数库DoTween内置了数十种Ease函数如Ease.OutBack,Ease.InOutCubic。实现那种点击后图片“弹跳”一下再到位或者缩小时带一点“回弹”的生动效果只需要在方法后加个.SetEase(Ease.OutBack)无需自己计算曲线。精准的控制与回调.SetDelay(),.SetLoops(),.OnStart(),.OnComplete()等方法可以非常方便地控制动画时序和在动画关键节点插入逻辑比如在放大动画开始时播放音效结束时启用交互。Pro版本的核心优势DoTween Pro提供了DOTweenPath组件可视化编辑运动路径和更高级的序列控制功能。虽然在这个照片墙里可能用不到路径功能但Pro版对商业项目的授权更清晰且通常意味着更稳定的支持和更新。社区资源也更丰富。2.3 系统架构设计基于以上分析我设计了这样一个简单的架构主要包含三个核心脚本PhotoWallManager单例管理器。负责最高层的逻辑控制如切换“总览模式”和“焦点模式”管理所有PhotoItem的引用处理全局的输入如检测点击背景返回。PhotoItem挂在每张照片的Prefab上。负责管理单张图片的状态如ID、缩略图、大图路径、持有自身的RectTransform引用并封装自身被点击时触发的动画逻辑放大、缩小、移动。PhotoScroller可选如果照片墙需要拖拽滚动可以单独一个组件处理ScrollRect或自定义的拖拽逻辑并与PhotoWallManager通信。数据流动是这样的用户点击一个PhotoItem-PhotoItem通知PhotoWallManager“我被点了” -PhotoWallManager遍历所有PhotoItem命令非点击项执行“散开”动画同时命令被点击项执行“聚焦”动画。3. 核心实现细节与DoTween技巧3.1 准备工作场景与Prefab搭建创建UI结构在Canvas下创建一个全屏的Panel作为照片墙背景PhotoWallBackground它用于接收“点击返回”事件。在这个背景Panel下再创建一个Panel作为照片的容器PhotoContainer所有照片的Prefab都将实例化在这里。制作PhotoItem Prefab创建一个Image游戏对象为其添加Button组件用于接收点击和PhotoItem脚本。这个Prefab就是我们的单张照片单元。建议将Image的Raycast Target勾选上确保点击有效。导入与设置DoTween Pro从Asset Store导入DoTween Pro。首次使用需要在任意脚本中调用DG.Tweening.DOTween.Init()进行初始化通常可以在Awake或一个启动脚本中完成。你可以全局配置缓存的Tweeners容量等参数以优化性能。3.2 PhotoItem单张照片的动画状态机PhotoItem脚本是核心它使用DoTween来驱动自己的各种状态动画。using UnityEngine; using UnityEngine.UI; using DG.Tweening; // DoTween命名空间 public class PhotoItem : MonoBehaviour { public int photoId; public RectTransform rectTransform; private Button button; private Vector2 originalAnchoredPosition; private Vector3 originalLocalScale; private PhotoWallManager manager; private void Awake() { rectTransform GetComponentRectTransform(); button GetComponentButton(); button.onClick.AddListener(OnPhotoClicked); // 记录初始状态用于“返回总览”动画 originalAnchoredPosition rectTransform.anchoredPosition; originalLocalScale rectTransform.localScale; } public void Initialize(PhotoWallManager mgr) { manager mgr; } private void OnPhotoClicked() { if(manager ! null) { manager.OnPhotoSelected(this); } } // 执行聚焦动画放大并移动到屏幕中心 public void PlayFocusAnimation(Vector2 targetCenterPos, float duration 0.5f) { // 首先确保任何正在进行的与此对象相关的动画被杀死防止冲突 rectTransform.DOKill(true); // 创建一个动画序列 Sequence focusSequence DOTween.Sequence(); // 同时进行移动和缩放动画 focusSequence.Join(rectTransform.DOAnchorPos(targetCenterPos, duration).SetEase(Ease.OutBack)); focusSequence.Join(rectTransform.DOScale(Vector3.one * 1.5f, duration).SetEase(Ease.OutBack)); // 放大1.5倍 // 可以同时改变颜色或透明度让聚焦更突出 Image img GetComponentImage(); if(img ! null) { focusSequence.Join(img.DOColor(new Color(1f, 1f, 1f, 1f), duration)); // 确保完全显示 } focusSequence.OnStart(() { // 动画开始时可以将层级调高防止被其他半透明图片遮挡 transform.SetAsLastSibling(); // 暂时禁用按钮防止动画过程中被重复点击 button.interactable false; }); focusSequence.OnComplete(() { // 动画结束后可以重新启用交互或者触发其他逻辑 button.interactable true; }); focusSequence.Play(); } // 执行散开动画缩小并移回原始布局位置或边缘位置 public void PlayDisperseAnimation(Vector2? dispersePos null, float duration 0.5f) { rectTransform.DOKill(true); Vector2 targetPos dispersePos ?? originalAnchoredPosition; // 如果没有指定散开位置则回到原位 Vector3 targetScale originalLocalScale * 0.7f; // 散开时通常比原始状态更小一些 Sequence disperseSequence DOTween.Sequence(); disperseSequence.Join(rectTransform.DOAnchorPos(targetPos, duration).SetEase(Ease.InOutCubic)); disperseSequence.Join(rectTransform.DOScale(targetScale, duration).SetEase(Ease.InOutCubic)); Image img GetComponentImage(); if(img ! null) { // 散开时让图片变暗或半透明 disperseSequence.Join(img.DOColor(new Color(0.6f, 0.6f, 0.6f, 0.8f), duration)); } disperseSequence.OnComplete(() { button.interactable true; }); disperseSequence.Play(); } // 直接重置状态无动画 public void ResetToOriginalState() { rectTransform.DOKill(false); // 不强制完成直接停止 rectTransform.anchoredPosition originalAnchoredPosition; rectTransform.localScale originalLocalScale; Image img GetComponentImage(); if(img ! null) img.color Color.white; button.interactable true; } }关键技巧DOKill(true)。在开始新动画前先杀死Kill对象上可能正在运行的旧动画这是一个非常重要的好习惯。参数true表示即使动画没完成也立即完成到终点状态这能避免状态错乱。特别是在快速连续点击时能保证动画状态的干净。3.3 PhotoWallManager全局指挥中枢管理器负责模式切换和协调所有PhotoItem的动画。using System.Collections.Generic; using UnityEngine; public class PhotoWallManager : MonoBehaviour { public static PhotoWallManager Instance; // 简单单例便于访问 public Transform photoContainer; // 存放所有PhotoItem的父物体 public RectTransform focusCenterPoint; // 聚焦时的中心点通常是Canvas中心 private ListPhotoItem allPhotos new ListPhotoItem(); private PhotoItem currentFocusedPhoto null; private bool isFocusMode false; private void Awake() { if(Instance null) Instance this; else Destroy(gameObject); // 初始化DoTween如果还没初始化过 DG.Tweening.DOTween.Init(); } private void Start() { // 假设PhotoItem已经作为子物体放在photoContainer下了 InitializePhotoItems(); // 或者如果是动态加载可以在这里通过Prefab实例化 // GeneratePhotoWallFromData(someDataList); } void InitializePhotoItems() { allPhotos.Clear(); foreach(Transform child in photoContainer) { PhotoItem item child.GetComponentPhotoItem(); if(item ! null) { item.Initialize(this); allPhotos.Add(item); } } // 可以在这里调用一个方法进行初始网格布局 LayoutPhotosInGrid(); } void LayoutPhotosInGrid() { // 简单的网格布局计算示例 int cols 4; float spacing 200f; float startX - (cols - 1) * spacing / 2; for(int i 0; i allPhotos.Count; i) { int row i / cols; int col i % cols; Vector2 pos new Vector2(startX col * spacing, -row * spacing); allPhotos[i].rectTransform.anchoredPosition pos; // 记录这个位置为originalPosition } } // 当某张照片被点击时由此函数处理 public void OnPhotoSelected(PhotoItem selectedItem) { if(isFocusMode currentFocusedPhoto selectedItem) { // 如果点击的是已聚焦的照片则退出焦点模式 ReturnToOverview(); return; } EnterFocusMode(selectedItem); } void EnterFocusMode(PhotoItem focusItem) { if(isFocusMode) return; // 防止重复进入 isFocusMode true; currentFocusedPhoto focusItem; Vector2 centerPos focusCenterPoint ? focusCenterPoint.anchoredPosition : Vector2.zero; // 1. 让被点击的照片执行聚焦动画 focusItem.PlayFocusAnimation(centerPos); // 2. 让其他所有照片执行散开动画 foreach(var photo in allPhotos) { if(photo ! focusItem) { // 计算一个散开的位置例如根据与中心的相对方向向外移动 Vector2 dir (photo.rectTransform.anchoredPosition - centerPos).normalized; Vector2 dispersePos centerPos dir * 600f; // 向外移动600像素 photo.PlayDisperseAnimation(dispersePos); } } // 3. 可以在这里禁用背景的滚动组件如果有的话 } void ReturnToOverview() { if(!isFocusMode) return; isFocusMode false; // 让所有照片包括当前聚焦的回到原始布局状态 foreach(var photo in allPhotos) { photo.PlayDisperseAnimation(); // 不传参数默认回到originalPosition } currentFocusedPhoto null; } // 在背景Panel上挂载此方法用于点击背景返回 public void OnBackgroundClicked() { if(isFocusMode) { ReturnToOverview(); } } }3.4 进阶优化平滑滚动与视口裁剪基础功能完成后如果照片数量很多你会遇到两个新问题1. 所有照片无论是否在屏幕内都在更新浪费性能。2. 拖拽滚动时直接改变PhotoContainer的位置会导致动画坐标计算错误。解决方案动态加载与视口裁剪不要一次性实例化成千上万个PhotoItem。可以使用ScrollRect结合GridLayoutGroup并编写一个简单的对象池只实例化视口内及缓冲区的照片项。当滚动时回收移出视口的项并用新的数据填充进入视口的项。这能极大提升性能。基于容器的坐标转换在计算聚焦和散开动画的目标位置时不能直接使用anchoredPosition因为它相对于父节点。当PhotoContainer因为滚动发生了位移所有子项的anchoredPosition其实没变但世界坐标变了。因此在EnterFocusMode中计算centerPos时需要将“屏幕中心点”转换到PhotoContainer的本地坐标系下。// 在PhotoWallManager中 Vector2 GetLocalCenterPosInContainer() { RectTransformUtility.ScreenPointToLocalPointInRectangle( photoContainer as RectTransform, // 目标矩形容器 new Vector2(Screen.width / 2, Screen.height / 2), // 屏幕中心 null, // 如果使用Camera渲染的Canvas这里传camera out Vector2 localPoint ); return localPoint; }在EnterFocusMode中使用GetLocalCenterPosInContainer()代替之前的centerPos。计算散开方向时也要使用转换后的本地坐标进行计算。4. 性能优化与常见问题排查4.1 DoTween使用性能陷阱避免内存泄漏及时Kill所有由DO...方法创建的Tween都会在内部被引用。如果你创建了一个无限循环SetLoops(-1)或长时间运行的Tween并且在对象销毁如PhotoItem被销毁时没有处理它这个Tween会继续存在于内存中试图更新一个不存在的对象导致错误和内存泄漏。有两个好习惯在PhotoItem的OnDestroy方法中调用rectTransform.DOKill()。更推荐的做法是使用SetLink方法将Tween的生命周期与游戏对象绑定transform.DOMove(...).SetLink(gameObject)。这样当gameObject被销毁时Tween会自动被清理。复用与缓存Sequence对于频繁触发的、模式固定的动画如每次散开的动画模式都一样可以考虑在Awake中创建好Sequence并缓存起来每次播放时通过.Restart()来重用而不是每次都new Sequence。这能减少GC垃圾回收压力。谨慎使用SetUpdate(true)这个方法让动画在Time.timeScale 0时也能运行即无视游戏时间缩放。除非你确实需要这个特性比如做UI暂停菜单动画否则不要用因为它会走特殊的更新路径。4.2 照片墙特定问题与解决问题点击照片后动画卡顿或不流畅。排查首先检查是否在播放动画时加载了高分辨率原图Texture2D。不要在动画进行中同步加载大图。解决采用两级加载。PhotoItem初始化时只加载小尺寸的缩略图。当执行PlayFocusAnimation时在OnStart回调中发起异步请求加载大图并在加载完成后替换Image.sprite。可以使用UnityWebRequest或Addressables异步加载系统。问题快速连续点击多张照片状态混乱。排查没有在开始新动画前终止旧动画导致多个动画叠加。解决正如之前强调的在每个动画方法开头PlayFocusAnimation/PlayDisperseAnimation都调用rectTransform.DOKill(true)。在管理器切换模式时也可以考虑调用一个全局的DOTween.KillAll()需谨慎会停止场景中所有DoTween动画或遍历所有PhotoItem执行Kill。问题在滚动状态下点击照片聚焦位置不对。排查动画目标坐标计算没有考虑容器滚动带来的偏移。解决使用上面提到的RectTransformUtility.ScreenPointToLocalPointInRectangle方法将屏幕坐标正确转换到滚动的容器本地坐标系中。确保所有位置计算都是基于容器本地坐标的。问题大量照片时初始化或滚动时帧率下降。排查可能同时实例化了太多UI元素或者布局计算LayoutPhotosInGrid在单帧内完成。解决实现对象池只创建视口能容纳的照片项数量缓冲项。分帧布局将LayoutPhotosInGrid中的循环用StartCoroutine配合WaitForEndOfFrame或null拆分成多帧执行避免一帧内计算量过大。使用Canvas的Additional Shader Channels如果照片有复杂的混合或遮罩确保Canvas设置了足够的Shader Channels如TexCoord1, Normal否则可能会触发Canvas的批处理破坏导致重绘性能下降。4.3 一个实用的调试技巧给PhotoWallManager添加一个bool debugMode开关并在OnDrawGizmos如果是在世界空间或通过Debug.DrawLine在屏幕空间绘制出计算出的焦点中心点、散开方向线等。这能让你直观地看到坐标计算是否正确对于调试布局和动画逻辑非常有帮助。通过以上步骤一个使用DoTween Pro驱动的、高性能、交互流畅的Unity照片墙效果就搭建完成了。它的核心在于利用DoTween强大的动画序列能力将复杂的交互状态用清晰的代码流管理起来。记住好的动画不仅是动起来更要符合物理直觉和交互预期而DoTween丰富的Ease函数正是实现这一点的秘密武器。在实际项目中你可以在此基础上增加更丰富的效果比如3D旋转、景深模糊配合Post Processing、粒子特效等让照片墙的视觉表现力更上一层楼。