Today’s article is about SVG path stroke animation.
For path stroke animation, check out these two websites, Playstation 4 and Xbox One, which use path in SVG for stroke animation.
The effect shown above is what we want to achieve.
Prepare vector files
The most important thing to do before actually writing the animation is to prepare the vector files. The first step is to use Illustrator to create the vector file you need for the stroke effect. You need to use the Pen Tool to create the vector file for the stroke effect. Of course, you can skip this step if you are only interested in how to animate a stroke.
Name the layer
Develop good layer naming habits when designing graphics, especially when exporting SVG files. The exported SVG file will be very complex and difficult to read if you do not specify the layer properly, so you should specify the layer properly for future development purposes. Keep the name of the layer simple and easy to understand. Nested sublayers are also well named, as shown below:
export
After designing the graphics, you can use Illustrator to export the graphics as SVG files. Before exporting the files, you need to set up some Settings for the graphics. You can refer to my previous article, which will not be described here.
Exporting SVG files
Again, name your layer before exporting SVG files. After exporting the above image to SVG, use the code editor tool to open the SVG file:
See the ID in the code? By using the ID, we can clearly know the graph corresponding to each path (PATN), which is the benefit of layer naming. Imagine the pain of trying to find the graph for each path if you don’t have a good name before exporting.
To optimize the
Of course, after exporting SVG, you need to further optimize and compress SVG files. Generally, using tools like SVGO can optimize SVG files well. However, if you want to manipulate SVG files directly to write animations like we are doing now, it is best not to optimize SVG files in the first place. We can optimize the edge after we write the animation.
For optimization of SVG files, check out this article.
move
Before you start implementing path stroke animations, it’s important to understand the concepts of stroke-Dasharray and stroke-dashoffset.
Stroke Dash Array
You can also specify dashed borders in SVG as in CSS using the stroke-dasharray property. The parameter to the stroke-dasharray property is a comma-separated sequence of numbers. Note that the numbers must be separated by commas, although Spaces can be inserted, but the numbers must be separated by commas. For each set of numbers, the first is used to represent a solid line and the second is used to represent a blank space.
If there is only one number 5, a 5px solid line will be drawn, followed by 5px blank, and then another 5px solid line to form a dashed line.
For example, if I have a 200px line and I specify the stroke-dasharray value as 200, it means that I draw 200px solid line, followed by 200px blank line, and then another 200px solid line to make a dashed line.
Stroke Dash Offset
The stroke-Dashoffset property represents the offset of the path from the starting position. For example, below I define stroke-dasharray values of 5, 10, 30, 10 for 5px dashed line, 10px white space, 30px dashed line, 10px white space, and so on. Then, see what happens by changing its stroke-dashoffset value:
As you can see from the image, you can reset the starting position of the path by adjusting the stroke-dashoffset value. In the example above, I set stroke-dashoffset to 15px and you can see that the path moves 15px.
Dynamically changing the offset value
If we set both stroke-dasharray and stroke-dashoffset to 200px, we will see nothing because the dashed line and blank distance of the path are the same, and stroke-dashoffset is also 200px. This means that the path has been offset by 200px from its starting position (remember that the path is offset from the origin on the left), so you see a blank space.
If you use CSS3 to dynamically change the offset of the path from 200px to 0, you will see that the path is drawn slowly with a pen.
Ice cream stroke animation effect
I understand the principle. Now we’re officially dry.
Start by getting the length of the relevant path in Illustrator. You can get the length of the path in the Document Information panel.
In order to write the animation better, each path needs to be given a class name, so that the animation can be more finely controlled for each path.
Then, use the stroke-Dasharray and stroke-Dashoffset properties mentioned above to animate the stroke.
A handsome path stroke animation effect is achieved.
It looks good, but there’s still room for improvement.
Further optimization
By changing the length of dotted lines on some paths, you can achieve the animation effect of speeding up the path drawing. It makes sense to draw a short dashed line in 2s faster than a long dashed line, that is, moving a smaller offset is going to be a little faster than moving a larger offset in the same amount of time. Animation-delay can be used to make the animation more interesting.
The final online code effect can be seen here in the demo.
One final word of caution: this animation is not supported when embedded is used to introduce SVG. If you want to use such an animation effect, it is best to use inline SVG to introduce SVG by writing the SVG file code directly to an HTML file.
Friendship remind
Here’s a look at some browser support.
Mircosoft Edge
The latest Mircosoft Edge browsers support this stroke animation effect, but it requires values with specific units, such as 200px for stroke-Dasharray.
Internet Explorer
Unfortunately, Internet Explorer does not support using animations in CSS to control the value of stroke-dashoffset.
If you must implement stroke animations in IE, there are two javascript methods to do so:
Solution 1.
Solution 2 is to use a javascript library to implement vivus.
The original address has been deleted according to my own understanding.
Recommended references:
How SVG Line Animation Works
Polygon feature design: SVG animations for fun and profit
Did this article help you? Welcome to join the front End learning Group wechat group:
