search

parsimonhi / animCJK

Draw animated Japanese characters (Kanji and Kana), Korean characters (Hanja) and Chinese characters (Hanzi) in correct stroke order using svg, free open-source code.
284 stars 72 forks source link

animate stroke by stroke #43

Closed MartinP7r closed 4 months ago

MartinP7r commented 4 months ago

First of all, amazing work on this collection. Thank you so much. 🙇🏼

I was going through the examples on your site and wondering if there's a good approach to animate one stroke at a time according to user input (e.g. with prev/next controls)?

Basically, like your Card example, but animated.

From what I can see the paths are animated in sequence, but as you suggest we can simply manipulate them from our scripting language of choice. I'm just not sure how to approach that for one stroke at a time. Sorry, not much experience with SVG 😓

parsimonhi commented 4 months ago

Thanks for your thanks.

The animation of the stroke is done with CSS (the stroke elements in the svg are those that have a path tag and a clip-path attribute). And you can modify the CSS using javascript.

Changing the card example using javascript can do what you want (to see an example of changing animation using javascript in animCJK, take a look at the run() function in the example animateSeveral.html).

Basically, you need to remove the CSS animation from each stroke except the one you want to animate (using javascript, get all the stroke elements, then use the setAttribute() method on each of these elements), change the css --d variable of the stroke you want to animate (take a look at the run() function in the example animateSeveral.html. It changes this css variable for all the stroke elements), hide the strokes that are not already shown (take a look at the begining of the updateAll() of the card example. It does this task), then evenly force the CSS animation to restart (there are many ways to accomplish this task, depending on what your application is doing). These changes can be done in the updateAll() function of the example card.

Do you need more details? If so, tell me what your level is in css and javascript, so I can adapt my answer.

MartinP7r commented 4 months ago

@parsimonhi

Thank you so much for the detailed answer!
Let me try that over the weekend 🙏🏼

(for context: I have a couple of years of experience with JS and CSS, but it's been two years since I touched any and I never did anything with CSS animations.)