javascript - React Native 中的连续 SVG Wave 动画

Question

我正在关注这个视频https://www.youtube.com/watch?v=OU43e7TwlEY，一切都很好，一切正常，但我想让这个动画连续播放，而不需要播放反向动画。

我的部分代码如下所示

useEffect(() => {
    progress.value = withRepeat(
        withTiming(1, {
            duration: 3000,
            easing: Easing.inOut(Easing.ease),
        }),
        -1,
        false
    );
}, [progress]);

const data = useDerivedValue(() => {
    const m = mix.bind(null, progress.value);
    return {
        from: {
            x: m(0, -0.05),
            y: m(0.2, 0.25),
        },
        c1: { x: m(0.3, 0.35), y: m(0, 0.05) },
        c2: { x: m(0.8, 0.85), y: m(0.5, 0.45) },
        to: { x: m(1, 1.05), y: m(0.25, 0.2) },
    };
});

const path = useAnimatedProps(() => {
    const { from, c1, c2, to } = data.value;
    return {
        d: `M ${from.x} ${from.y} C ${c1.x} ${c1.y} ${c2.x} ${c2.y} ${to.x} ${to.y} L 1 1 L 0 1 Z`,
    };
});

正如你所看到的，从 x 坐标从 0 到 -0.05，但我不能添加第三个坐标 0（所以它会是 0 → -0.05 → 0，例如什么会使它连续）。其他点也应该如此。

有任何想法吗？对于任何反馈，我们都表示感谢。谢谢。