如何在Unity 2D项目中实现Desmos的滚动展开效果？

1. 核心逻辑拆解 #

这个滚动展开效果本质是随进度参数变化的组合曲线：

• 未展开部分：一段固定半径的圆弧（最大为半圆）
• 已展开部分：从圆弧端点延伸出的水平直线段，长度随进度增加

2. 实现步骤 #

第一步：配置Line Renderer组件 #

给目标GameObject添加Line Renderer，调整基础参数：

• Width：设置合适的线条粗细（例如0.1）
• Use World Space：勾选，直接使用世界坐标计算点位置
• Material：选择纯色材质（如默认的Sprites/Default）

第二步：编写曲线生成脚本 #

创建RolloutCurve.cs脚本并挂载到目标对象上：

using UnityEngine;

public class RolloutCurve : MonoBehaviour
{
    private LineRenderer _lineRenderer;
    [Header("曲线参数")]
    public float arcRadius = 1f;
    public float totalUnfoldLength = 5f;
    [Range(0f, 1f)] public float unfoldProgress = 0f;

    void Start()
    {
        _lineRenderer = GetComponent<LineRenderer>();
        UpdateCurvePoints();
    }

    void Update()
    {
        // 用键盘控制进度（可替换为动画/事件驱动）
        if (Input.GetKey(KeyCode.A))
        {
            unfoldProgress = Mathf.Clamp01(unfoldProgress + Time.deltaTime * 0.5f);
            UpdateCurvePoints();
        }
        if (Input.GetKey(KeyCode.D))
        {
            unfoldProgress = Mathf.Clamp01(unfoldProgress - Time.deltaTime * 0.5f);
            UpdateCurvePoints();
        }
    }

    void UpdateCurvePoints()
    {
        // 计算已展开的直线长度、对应圆弧角度
        float currentUnfoldLength = totalUnfoldLength * unfoldProgress;
        float arcAngle = currentUnfoldLength / arcRadius;
        arcAngle = Mathf.Min(arcAngle, Mathf.PI); // 限制圆弧最大为半圆

        // 生成点数组：圆弧起始点 + 圆弧分段点 + 直线端点
        int arcSegmentCount = 20;
        Vector3[] points = new Vector3[arcSegmentCount + 2];

        // 圆弧起始点（左下角）
        points[0] = new Vector3(-arcRadius, -arcRadius, 0);

        // 生成圆弧上的点
        for (int i = 0; i < arcSegmentCount; i++)
        {
            float angle = Mathf.Lerp(0, arcAngle, (float)i / (arcSegmentCount - 1));
            float x = arcRadius * Mathf.Sin(angle);
            float y = -arcRadius + arcRadius * Mathf.Cos(angle);
            points[i + 1] = new Vector3(x, y, 0);
        }

        // 生成直线端点
        Vector3 arcEndPoint = points[arcSegmentCount];
        points[arcSegmentCount + 1] = arcEndPoint + new Vector3(totalUnfoldLength - currentUnfoldLength, 0, 0);

        // 赋值给Line Renderer
        _lineRenderer.positionCount = points.Length;
        _lineRenderer.SetPositions(points);
    }
}

3. 参数调整说明 #

• arcRadius：控制未展开圆弧的大小，数值越大圆弧越宽
• totalUnfoldLength：设置完全展开后的总直线长度
• unfoldProgress：0到1的数值，0对应完全收起（仅半圆），1对应完全展开（半圆+完整直线）

4. 动画控制 #

如需实现自动展开动画，直接给unfoldProgress参数添加动画曲线即可，无需修改代码。

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