How to animate paths recorded from hand-drawing

[200210qb]

I have pre-recorded hand-drawn paths into an array completedPaths, now I am trying to animate the playback of the paths to simulate a hand-drawing effect (tracing the paths) similar to this demo, except that demo was real-time touch-based drawing but what I wanted is a playback.

I wanted to be able to playback the tracing this way:
if I specify 5 seconds, then the tracing of all paths should smoothly trace and complete by the end of 5 seconds.

I have read several posts from other discussions but I'm confused by how useComputedValues could be used in my case to animate tracing of pre-recorded paths. Here is the core path of the code below. I'd really appreciate any guidance. Thanks!

<Canvas style={{ height: canvasHeight, width: width, position: 'absolute', left: 0, top: 0, }}> {completedPaths?.map(path => ( <Path key={path.toSVGString()} path={path} /> ))} </Canvas>

[200210qb]

Still stuck here ... Any hints appreciated

[wcandillon]

Did you try to use the end property to animate the path? https://shopify.github.io/react-native-skia/docs/shapes/path/#trim

The path object has also a trim method you can use on the path object directly.

[200210qb]

Thanks for the reply! end should work well with a single path. But in my case I may have a few paths (strokes). I guess I'll compute a value ranging from 0 to N (N is the total number of strokes), then in the map function pass in the index to calculate the per stroke end value. In the end this should create the illusion that the strokes got drawn smoothly one by one. Will try it out. Thanks!

[200210qb]

@wcandillon . A follow up question:
I tried to use an animated value (x in the screenshot below). When x is directly used in end, animation worked but apparently all paths animated together with the same progress x.

In order to animate the end of the paths differently for each path (so one draws after another), I need to use the animated value to subtract the index of the path. Apparently I cannot do x-index, so I tried x.current - index. However, it appears that x.current stays as 0 when used in the path while console log did show its value varying. I wonder why and how should I do this differently to achieve what I was looking for? Thanks a lot for your help!