Footprint along path

[ScreamZ]

Hi,

Context

For a live (IRL) game I would like to use a specific animation to make some footprints appear on a 2D map on a predefined scenario.

If you want to have a quick look you can check "The marauder map" from Harry Potter, even if it's not exactly what I need.¹

I think the best way to achieve this is to animate something along a Path.

Postulate

• I'm using declarative API whenever possible

Identified steps

Here are the steps I have identified

1. Trace an SVG path over the plan (easy) the "red line" on figure 1.
2. Get the Path total length (I didn't find any way to get it, Except imperatively using your PathGeometry class from a video tutorial, using non-documentated API. I've try to get a ref property on the react component but this is not available with TypeScript.).
3. Split this length on small chunks, I still need to guess the distance between those steps. For that I wanted to use getPointAtLength but same issue as 2. except using your custom code imperatively.
4. Animate a value between 0 and total length over X seconds.
5. Each time the length reach a point of 3. create one "step SVG" offsetted by some pixels left or right (based on odd/even) from the point on the line. I've thought about doing something like creating an array of size totalLength % distanceBetweenPoints using some kind of useMemo aware of reanimated values.
6. Calculate orientation, and start playing an animation after X seconds that slowly fade the opacity of the footprint.

What do you think ?

I'm afraid of memory leak using this technique as footing are opacity 0 but remains.

Side notes

• Generally when the documentation is missing, I'm taking a look at Xamarin documentation on Skia, seems the most documentated.
• I'll be pleased to contribute to the documentation

Thanks

Footnotes

1. Side note : could be a nice demo for "Can it be done in React Native" with skia ;) ↩

[wcandillon]

here's how we make the text along path algorithm:

react-native-skia/package/src/dom/nodes/drawings/Text.ts

Line 35 in 9c24a44

const path = processPath(this.Skia, this.props.path);

does it help?