How to make a shape move along a predetermined path

[LiuYiSong]

Description

How to make a shape move along a predetermined path? I learned from your example "Gradient along Path" learned that
PathGeometry, getTotalLength, getPointAtLength get the coordinates of each point on the path. but I don't know how to use them. I tried：

const progress = useSharedValue(0);
const geo = new PathGeometry(path);
const totalLength = geo.getTotalLength();
const transform = useDerivedValue(() => {
const currentLen = interpolate(progress.value, [0, 1], [0, totalLength]);
const pos = geo.getPointAtLength(currentLen);
return translate({x:pos.x,y:pos.y});
});
const handlePress = () => {
progress.value = withSpring(1);
};

But received an error message:

ReanimatedError: [Reanimated] Trying to access property getPointAtLength of an object which cannot be sent to the UI runtime., js engine: reanimated

Later, I used:

const geo = new PathGeometry(path);
const totalLength = geo.getTotalLength();
const pos = geo.getPointAtLength(0);
const posX = useSharedValue(pos.x);
const posY = useSharedValue(pos.y);
let i = 0;
setInterval(() => {
//posX.value += 10;
const nPos = geo.getPointAtLength(i);
posX.value = nPos.x;
posY.value = nPos.y;
i++;
}, 16);

But I know this is not a good solution because we cannot apply animation effects such as React Native Reanimated with Spring

May I know how to implement it? I am a beginner

[wcandillon]

this tutorial might be helpful: https://www.youtube.com/watch?v=7SCzL-XnfUU