如何为ScrollRect循环菜单实现Cover Flow效果？

嘿，我刚好折腾过类似的ScrollRect循环菜单+Cover Flow效果，结合你的两个问题，给你一步步拆解解决方案：

核心思路是根据按钮与ScrollRect视口中心的距离，动态计算缩放比例，距离越远缩放越小，靠近中心的按钮保持原尺寸。

你可以给每个菜单按钮挂一个脚本，比如CoverFlowItem.cs，实现如下：

using UnityEngine;
using UnityEngine.UI;

public class CoverFlowItem : MonoBehaviour
{
    [Header("缩放参数")]
    public ScrollRect parentScrollRect;
    public float maxScale = 1f; // 中心按钮的最大缩放
    public float minScale = 0.6f; // 最远按钮的最小缩放
    public float affectDistance = 200f; // 超过这个距离就应用最小缩放

    private RectTransform _rectTrans;

    void Awake()
    {
        _rectTrans = GetComponent<RectTransform>();
        // 自动获取父级ScrollRect
        if (parentScrollRect == null)
            parentScrollRect = GetComponentInParent<ScrollRect>();
    }

    void OnEnable()
    {
        // 监听滚动事件，只在滚动时更新效果（比Update更高效）
        parentScrollRect.onValueChanged.AddListener(UpdateCoverFlowEffect);
        // 初始化时先执行一次
        UpdateCoverFlowEffect(parentScrollRect.horizontalNormalizedPosition);
    }

    void OnDisable()
    {
        parentScrollRect.onValueChanged.RemoveListener(UpdateCoverFlowEffect);
    }

    void UpdateCoverFlowEffect(Vector2 scrollPos)
    {
        // 计算按钮中心相对于视口中心的水平距离（横向滚动用x，纵向用y）
        Vector2 viewportCenter = parentScrollRect.viewport.rect.center;
        Vector2 localPosInViewport = parentScrollRect.viewport.InverseTransformPoint(_rectTrans.position);
        float distance = Mathf.Abs(localPosInViewport.x - viewportCenter.x);

        // 计算缩放比例，限制在minScale到maxScale之间
        float scaleRatio = Mathf.Clamp(1 - (distance / affectDistance), minScale / maxScale, 1f);
        _rectTrans.localScale = new Vector3(maxScale * scaleRatio, maxScale * scaleRatio, 1f);
    }
}

关键逻辑说明： #

1. 用InverseTransformPoint把按钮的世界坐标转成视口的局部坐标，这样能准确计算和视口中心的距离。
2. 通过Mathf.Clamp限制缩放比例，避免按钮缩得过小或者超过原尺寸。
3. 监听ScrollRect的onValueChanged事件，仅在滚动时更新，比每帧Update性能更好。

深度效果分两种场景处理，取决于你的Canvas渲染模式：

场景1：Canvas是Screen Space - Overlay模式 #

这种模式下无法通过Z轴控制层级，需要给每个按钮单独添加Canvas组件，通过sortingOrder控制显示层级：
在上面的UpdateCoverFlowEffect方法末尾添加以下代码：

// 给按钮添加独立Canvas（如果没有的话）
Canvas itemCanvas = GetComponent<Canvas>();
if (itemCanvas == null)
{
    itemCanvas = gameObject.AddComponent<Canvas>();
    itemCanvas.overrideSorting = true; // 开启自定义排序
}
// 距离越近（scaleRatio越大），sortingOrder越高，显示在最上层
itemCanvas.sortingOrder = Mathf.RoundToInt((1 - scaleRatio) * -100);

场景2：Canvas是World Space或Screen Space - Camera模式 #

这种模式下可以直接调整按钮的Z轴位置，让靠近中心的按钮更靠近相机，自然显示在前面：
在上面的UpdateCoverFlowEffect方法末尾添加以下代码：

// 距离越近，Z轴越靠近0（相机默认在Z正方向，可根据你的场景调整数值）
float zPos = Mathf.Lerp(-50f, 0f, scaleRatio);
_rectTrans.localPosition = new Vector3(_rectTrans.localPosition.x, _rectTrans.localPosition.y, zPos);

因为你的菜单是循环滚动的，要确保滚动到边界重置时，按钮的缩放和层级能正确刷新：

1. 在你的循环ScrollRect逻辑中，当content位置重置后，手动调用一次所有按钮的UpdateCoverFlowEffect方法。
2. 如果是通过复制按钮实现循环（比如左右各复制一份），要给复制出来的按钮也挂上CoverFlowItem脚本，确保效果一致。

内容的提问来源于stack exchange，提问作者DanZix