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