The SVG animation I’ve seen before reminds me of a common type of animation in Flash — dynamic writing. The language is so weak that it looks like this: Flash imitates the writing effect of the brush animation example tutorial, so I want to use SVG to achieve such an effect.
Achieve this ghost appearance: Yin Quanchao – signature
The general idea is as follows
Sign 0.
I use the AI export, mouse draw bet effect is not good, conditional direct digital board.
1.SVG dynamic drawing
Also found an article: pure CSS to achieve a handsome SVG path stroke animation effect
Utilizes the stroke-Dasharray and stroke-Dashoffset attributes of PATH in SVG.
This article achieves a signature effect, but not what I want. Whose signature can be written in one stroke. And there’s no guarantee that strokes are in order.
2.CSS3 animation end listening
In step 1, CSS3 was used to complete the effect of dynamic line drawing. In order to solve the stroke order in CSS3, we need to listen to the end of animation event in CSS3. See the transitionEnd article to see if we can draw a line and then trigger the next line.
3. Optimize time
A long line is drawn 1s, a short line can not be drawn 1s, so take the first line as the benchmark, the following line according to the scale conversion time.
4. Unfinished
The whole effect is dependent on JS+SVG, and SVG itself is to support animation, my ideal is to achieve a. SVG file can achieve the above effect, I hope you big god advice.
This article is by Sailor, licensed under Creative Commons Byline 4.0 International License. All articles are original or translated by the Sailor