Create driving animations

[Angelk90]

Description

@wcandillon , @kimchouard :

Can you help me create a guide animation like the ones seen in the video:

Registrazione.schermo.2024-02-20.alle.06.51.45.mov

Registrazione.schermo.2024-02-20.alle.06.53.45.mov

[kimchouard]

Those should be simple since they are rectilinear paths (no circles or curves).

For the 1st example, I'd simply use a Gesture Handler to drive the position of the arrow:

• only move it only using the x value (something like translationX) until it reaches the corner,
• then, only use the y value only (translationY)

You can use useDerivedValue to get the filling path behind the arrow to grow. I'd even use the start and end parameter from Path (see trim) to make it E-Z. ✨

Have fun!

[Angelk90]

@kimchouard : The main problem is creating the structure of the kanji, each of them has its own structure and some are quite complex.

But let's go in order, the first problem is this: #2234

In the documentation I didn't find how to make the dotted line, without using Path and DashPathEffect.

[kimchouard]

Ah you want to create Japanese/Chinese character... Yeah, well get it right with straight paths first, but with more complex geometric shape you'll get yourself into some pretty deep trigo/géo calculation. :)

[Angelk90]

@kimchouard : Precisely I'm studying Hangul (Korean), if you can find the svgs of the paths.

I managed to make a letter m in Korean, but I'm not succeeding in:

1. putting it in the center
2. do what you said in reference to the color change of using start and end for the color change
   The problem is that it follows the path and it can't be done as you say if I use this type of svg.

Can you give me a hand?

Link: https://snack.expo.dev/wwx8ZeKJ0bwB0795doucE