Animate path between 2 points which always change in: SVG React native, animated3

Question

Got 2 pixel points on a svg map, I can easily dray a line or path between those 2 points. I want to animated the draw of the path over 2 seconds.

Here's my code

const [pointAPixels, setPointAPixels] = useState({ x: 0, y: 0 });
const [pointBPixels, setPointBPixels] = useState({ x: 0, y: 0 });

const AnimatedPath = Animated.createAnimatedComponent(Path);
const animationProgress = useSharedValue(0);

useEffect(() => {
animationProgress.value = 0;
            animationProgress.value = withTiming(1, {
                duration: 1500,
                easing: Easing.linear,
                // useNativeDriver: false, // Enlevez cette ligne si elle n'est pas nécessaire
            });
}, [pointAGPS, pointBGPS]);

const animatedProps = useAnimatedProps(() => {
        const length = interpolate(animationProgress.value, [0, 1], [100, 0]);

        console.log(length, animationProgress.value);
        return {
strokeDasharray: "10",
            strokeDashoffset: length,
};
    });

return (
<View>
<SvgFrance width={320} height={320} fill={black} />
<AnimatedPath
                        d={`M ${pointAPixels.x} ${pointAPixels.y} L ${pointBPixels.x} ${pointBPixels.y}`}
                        // d={pathData}
                        stroke="black"
                        strokeWidth="2"

                        // strokeOpacity={animationProgress}
                        // strokeDasharray="5" // Configurer ici la valeur de strokeDasharray
                        animatedProps={animatedProps}

                    />
</Svg>
</View>
);
}

I've pasted the most important code.

I played a lot with

        strokeDasharray: "10",
        strokeDashoffset: length,

But I can't figure out the length of path because it's always changing...

Answer 1

I solved it this way:

const animatedProps = useAnimatedProps(() => {
        const x = interpolate(animationProgress.value, [0, 1], [pointAPixels.x, pointBPixels.x]);
        const y = interpolate(animationProgress.value, [0, 1], [pointAPixels.y, pointBPixels.y]);
        // console.log(x, y, animationProgress.value);
        return {
            d: `M ${pointAPixels.x} ${pointAPixels.y} L ${x} ${y}`,
        };
    });