如何在Svelte中动态补间SVG路径Y坐标实现图表过渡动画？

我正在基于数据数组动态绘制SVG路径（类似折线图）。希望在数据变化时实现图表过渡动画，但仅对Y值进行动画才有意义。

当前路径构建方式如下：

data.forEach(d => {
    path += `L ${pctCoordX(d.time)} ${pctCoordY(d.value)} `
})

这种方式在值固定时表现良好，且会在data变化时被调用以更新路径。

我希望创建一个响应式路径，类似如下形式：

L ${pctCoordX(data[0].time)} ${tweenedY[0]} L ${pctCoordX(data[1].time)} ${tweenedY[1]}

但由于需要动态创建且数据点数量不固定，我尚未找到可行方法。请问是否有优雅的Svelte解决方案？

核心思路 #

利用Svelte的响应式状态和tweened动画工具，维护一个与数据点数量同步的动画Y值数组，动态构建SVG路径时固定X值、使用动画中的Y值，实现仅Y轴的平滑过渡。

代码实现 #

<script>
    import { tweened } from 'svelte/motion';
    import { cubicOut } from 'svelte/easing';

    // 模拟初始数据
    let data = [
        { time: 1, value: 20 },
        { time: 2, value: 50 },
        { time: 3, value: 30 }
    ];

    // 自定义X坐标转换（根据实际场景调整）
    function pctCoordX(time) {
        // 示例：time范围1-3，映射到SVG宽度的0-100%
        return (time / 3) * 100;
    }

    // 自定义Y坐标转换（根据实际场景调整）
    function pctCoordY(value) {
        // 示例：value范围0-100，SVG原点在左上角，反转Y轴方向
        return 100 - (value / 100) * 100;
    }

    // 初始化动画Y值数组，与当前数据匹配
    let tweenedY = tweened(
        data.map(d => pctCoordY(d.value)),
        { duration: 500, easing: cubicOut }
    );

    // 数据更新时，同步更新动画目标Y值
    $: {
        if (data) {
            $tweenedY = data.map(d => pctCoordY(d.value));
        }
    }

    // 动态生成SVG路径字符串
    $: path = data.length > 0 
        ? `M ${pctCoordX(data[0].time)} ${$tweenedY[0]} ` + 
          data.slice(1).map((d, i) => `L ${pctCoordX(d.time)} ${$tweenedY[i+1]}`).join(' ')
        : '';

    // 测试用：模拟数据变化
    function changeData() {
        data = [
            { time: 1, value: 60 },
            { time: 2, value: 20 },
            { time: 3, value: 70 }
        ];
    }
</script>

<button on:click={changeData}>切换测试数据</button>

<svg width="400" height="300" style="border: 1px solid #ccc;">
    <path d={path} fill="none" stroke="blue" stroke-width="2" />
</svg>

关键说明 #

1. 数组类型的tweened动画：Svelte的tweened支持直接处理数组状态，当目标数组与当前数组长度一致时，会自动对每个元素执行补间动画，完美适配动态数据点数量。
2. 响应式路径生成：通过$:标记的响应式语句，只要data或$tweenedY发生变化，就会自动重新计算SVG路径，无需手动触发更新。
3. 仅Y值动画：路径中的X坐标直接使用原始数据计算（无动画），Y坐标使用tweenedY的动画值，精准实现需求。
4. 数据长度适配：无论数据点新增、减少还是替换，tweenedY都会同步生成对应长度的目标数组，路径生成逻辑也会自动遍历所有数据点。

如果需要处理数据长度变化时的平滑过渡（比如从3个点变5个点），可以先补全旧数据到新长度或截断新数据到旧长度，完成动画后再更新到最终数据，避免直接跳变。

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