SVG is undoubtedly the most popular graphics format in the front end, and it is very effective to achieve a lot of animation effects, the following release, for SVG stroke effect tutorial.
Although I have the CSS code base, I am absolutely a beginner in CSS animation, and I know nothing about JavaScript at the front end, but SVG stroke animation is too magical, after all, it is generated by code, so after the introduction of BASIC SVG animation, I began to bite the web articles about SVG stroke animation. I have read more than ten of them. Although some of them do not involve JS, the animation effect is too simple, such as just a continuous line, or the control of time and speed is not accurate, such as setting a maximum value. Although it is also animation, the autonomy is too poor. The exact path length is usually achieved by using JS (the importance of path length will be mentioned below). After a series of articles, we finally have the following tutorial, which takes apart an SVG animation step by step, and can achieve dynamic stroke effect without JS foundation. You can achieve a variety of creative stroke effects by substituting a few fixed values inside (if you can’t imagine, no code can’t do that), explaining which values to replace, how to replace them, and to what value. You don’t even have to think deeply about what the code means, just think of it as a model, of course, that has to be known and easy to understand, and I’ll explain that a little bit. It is shared here in the hope of providing a little convenience to zero-codebase designers interested in SVG animation. Come on, take a deep breath, go, and remember, don’t be intimidated by the codes, because they don’t have to be typed out.
1. Make the basic stroke shape with AI first
This step, for every UI, is very easy. AI must be used here, not PS, if THE AI does not know how to use, please take a detour, the following tutorial is meaningless. Before you actually start drawing, figure out what kind of graphics you want to make and what the animation will look like. My idea is to do a dynamic stroke of the keyboard, I see it is divided into five parts, the rectangular outer contour of the keyboard keys (3) the enter key (2) the small squares (4) the blank space key (draw the enter key and the blank space key separate, it is hope to make some special effects) (5) keyboard line The five part must be built in five different layer, So that the AI doesn’t confuse itself when exporting SVG code. The corresponding animation is also to draw these five parts, and after the animation of each part is completed, the next animation can be started. After having the basic idea, I started to draw the basic graphics in the AI.
1.1 Draw the external outline
Draw the outline of the outside of the keyboard and name the layer “border”. Since I need to get a path, not a closed rectangle, I drew the graph with a pen, but the start and end overlapped, so even though it looked like a rectangle, it was not generated by the rectangle tool. (Guides can be ignored, but drawing from guides makes the resulting SVG code cleaner and less likely to generate many decimal points.)
The direction in which you draw the path is also the direction in which you animate it, so think carefully before drawing. Name the layers in English as much as possible.
1.2 Draw small box buttons
Same idea, keep drawing small buttons, still using the pen tool. Because I require all key animations to be synchronized, I put them on the same layer keyboard. Here, if you want to display animation effects one by one, you need to create them on different layers (too tedious and the animation time will be too long, which is not recommended). Similarly, If you want the buttons to be in two rows for different animations, put them on two layers.
1.3 Draw the Enter key
Take the enter key separate out here, not because the problem of color, but the path of the enter key length is much longer than the small buttons, I will assign it longer time to animation, the front button and the drawing of contour I am counterclockwise, draw the enter key when I used the clockwise direction, give animation a little different changes, I named the enter this layer.
1.4 Drawing the Space bar
With that in mind, this layer will be called “space”.
1.5 Drawing keyboard Lines
I’ll call this layer “line”.
This is the layer where all the graphic elements are distributed.
The layering of the graphics is very important, the different animations are split into different layers, the layers are named, and the generated SVG code is very clear. Always use AI to do the drawing.
2. Export the AI to SVG and tidy it up further
When everything is ready, let’s generate an SVG file, select the SVG format in the pop-up box stored as, and then select “SVG Code” in the panel to get a text document, which contains all the code after the AI transforms to SVG.
Of course, it’s possible to save SVG directly, but I personally hate the redundant code in AI-generated SVG, so I habitually save the svG-related parts of the code to one of my preset SVG documents. I pasted my SVG code, there is a small substitution, the AI-generated SVG code is
, which is changed to
, in order to facilitate the use of classes when defining CSS styles later. This step is not necessary, if not, the CSS code should start with a #, this is a matter of personal preference (I rarely use id tags), for people with CSS background, it is ok, if it is small, try to change here.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000"><g class="border">
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="200,200 100,200 100,400 500,400 500,200 200,200"/>
</g>
<g class="keyboard">
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="180,224, 140,224, 140,264, 180,264, 180,224"/>
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="250,224 210,224 210,264 250,264 250,224"/>
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="320,224 280,224 280,264 320,264 320,224"/>
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="390,224 350,224 350,264 390,264 390,224/>
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="180,284, 140,284, 140,324, 180,324, 180,284"/>
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="250,284 210,284 210,324 250,324 250,284"/>
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="320,284 280,284 280,324 320,324 320,284"/>
</g>
<g class="enter">
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#F2856B" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="420,224 460,224 460,324 350,324 350,284 420,284 420,224"/>
</g>
<g class="space">
<polyline fill="none" stroke="#82D8D5" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="460,348 140,348 140,376 460,376 460,348"/>
</g>
<g class="line">
<path fill="none" stroke="#FFBB4D" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=",29.3 M187.3, 192 c0, 0-43.3, 76-46 s372, 167.3, 405112.7 S424.7, 30424.7, 30"/>
</g></svg>Copy the codeThis pile of dense code is not dizzy, follow me, shake your head, keep smiling, this is automatically generated by AI, and if you look, you will find that each G corresponds to a layer of our AI, so easy. At this time, if you copy this code into a TXT documents, and then change the suffix called. SVG, with any browser open view (ie), will have to see the keyboard graphics (if it is the first time contact with SVG designers, congratulations, has achieved the SVG zero breakthrough, just, it is static, don’t worry, slowly down).
Graphic to UI designers, you have the advantage in SVG, you can also use AI saved as SVG file with text editor open edit.
3.CSS style Settings
Now insert the following CSS code into the SVG code.
<style>
@keyframes dash {
to {
stroke-dashoffset: 0; }}</style>Copy the codeThis code is simply to set the offset of the dashed stroke line from set to 0 by setting the keyframe. This is the key of our stroke animation. Usually this code will be present and ignored. If you don’t have an SVG base, you might ask, what is an offset? Where are the dashed stroke lines? I have solid lines, so I say: I don’t want to explain! Because I do not know where to start, involving the properties of the stroke, as well as the realization of the principle of this animation, blah, blah, a lot of online, find their own, we direct a point, take doctrine. There is more to know about the insertion of CSS code: before the first group tag
. Don’t worry here, I’ll post the full code and comments at the end of the article to show you where you need to change and replace it.
The following two pieces of code need to be explained briefly. Instead of Posting all the code here, there are two animations, one is the outline of the keyboard and the other is the key. The animation I set is the second animation after the first animation is completed.
.border{
stroke-dasharray: 1200;
stroke-dashoffset: 1200;
animation: dash 1.5 s linear forwards;
}
.keyboard{
stroke-dasharray: 160;
stroke-dashoffset: 160;
animation: dash 1s linear forwards;
animation-delay:1.5 s;
}Copy the codeThe.border and.keyboard are the names of the
classes in the SVG code, in other words, the names of the layers corresponding to the AI, so it is easy to understand that each CSS code corresponds to its own graphic element. Moving on to stroke-Dasharray and stroke-Dashoffset, border and keyboard define different values. So where does this value come from? They correspond to the length of the graph path. At this time, sacrifice our AI artifact.
As can be seen from the figure, when you select a path, there is a path value automatically calculated by the AI when viewing the document information. It is important to note that this value is responsible for the fact that this SVG animation does not require JS and can be precisely speed-controlled.
In many of the other articles I’ve read about this kind of animation, there are maxima for stroke-Dasharray and stroke-Dashoffset, which have the effect of not being able to control when the animation starts and how fast it goes, Or you can use JavaScript code var path = document.querySelector(‘path’); var length = path.getTotalLength(); To get the path length, now we can use the AI document information directly, very convenient. All we need to do is set stroke-dasharray and stroke-dashoffset to the corresponding path length. This may not seem like a great thing to do with rectangles because you know the coordinates, but it can be very useful for complex paths with curves. (Also, if you get a decimal path value, you can correct it to a slightly larger integer value, but don’t make it smaller, which will cause some starting points to appear at the beginning of the animation.)
From the above instructions, you should get the idea, border stroke-dasharray: 1200; And stroke – dashoffset: 1200; The 1200 is the border path length, and the 160 is keyboard. Of course, the path length of each key, because I want to do the animation of the synchronization of small keys, so I only take the path length of a single key.
Animation: Dash 1.5s Linear forward; There is no need for modification (forward change to indefinite animation cycle). All you need to set is the time value. The border is set to 1.5s or 1.5s, which is the time I want to draw the border. So time makes it a little faster, and you’re a magician.
Animation – delay: 1.5 s; Look at this code. Why does it only appear in keyboard Settings? If you want the animation to start after 3 seconds, you can add animation-delay:1.5s to the border. To realize delayed loading, yes, animation-delay means delay. Where does the delay start time for keyboard come from after 1.5 seconds? That’s how long it takes for the border animation. Imagine that if you set the delay start time for Keyboard to be 1 second, that means the first border animation hasn’t finished yet. If you set the delay start time for Keyboard to be 2 seconds, The second keyboard animation will start 0.5 seconds after the first border animation ends. The CSS Settings of the third and subsequent animations are easy to set. The animation-delay needs to be calculated simply, that is, the start time of the previous animation (animation-delay setting) plus the duration of the animation (animation time setting). We use these Settings to achieve various animation effects. That’s why I say you can accurately control the animation time and start time. The order of the code is important, do not put animation-delay: before animation:, this will not work
The above code can be simply interpreted as: set the time required to complete the drawing path length (according to the document information to provide Settings) (set yourself, can be controlled according to the value of the speed) and the start time.
At this point, all the work is actually done, open chrome browser to see the effect.
Now attach all the code below and explain in advance,
and / / are the comments I wrote to help you understand that you can delete code when you copy it.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000">
<! Here is where the CSS style file is inserted -->
<style>
@keyframes dash {
to {
stroke-dashoffset: 0; /* Fixed animation Settings, do not change */}}.border{
stroke-dasharray: 1200;
stroke-dashoffset: 1200;
animation: dash 1.5 s linear forwards;/* Set the animation time to 1.5s */
}
.keyboard{
stroke-dasharray: 160;
stroke-dashoffset: 160;
animation: dash 1s linear forwards; /* Set the animation time of each small button to 1s, and synchronize */
animation-delay:1.5 s; /* Set the animation delay start time to the animation completion time of the border to ensure continuity of the animation, but be sure to put the animation-delay setting after the animation */
}
.enter{
stroke-dasharray: 420;
stroke-dashoffset:420;
animation: dash 1.5 s linear forwards;
animation-delay:2.5 s; /* Delay start time = delay start time of last animation + duration of last animation 2.5= 1+1.5*/ of keyboard
}
.space{
stroke-dasharray: 700;
stroke-dashoffset:700;
animation: dash 1s linear forwards;
animation-delay:4s;
}
.line{
stroke-dasharray: 340;
stroke-dashoffset:340;
animation: dash 1s linear forwards;
animation-delay:5s;
}
</style>
<! This is where the CSS style file is inserted -->
<g class="border">
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="200,200 100,200 100,400 500,400 500,200 200,200"/> <! -- Keyboard outline path length 1200-->
</g>
<g class="keyboard"><! -- Path length of each keypad cell 160-->
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="180,224, 140,224, 140,264, 180,264, 180,224"/>
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="250,224 210,224 210,264 250,264 250,224"/>
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="320,224 280,224 280,264 320,264 320,224"/>
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="390,224 350,224 350,264 390,264 390,224/>
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="180,284, 140,284, 140,324, 180,324, 180,284"/>
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="250,284 210,284 210,324 250,324 250,284"/>
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="320,284 280,284 280,324 320,324 320,284"/>
</g>
<g class="enter">
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#F2856B" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="420,224 460,224 460,324 350,324 350,284 420,284 420,224"/><! Path length 420 -->
</g>
<g class="space">
<polyline fill="none" stroke="#82D8D5" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="460,348 140,348 140,376 460,376 460,348"/><! -- Space bar path length 696, go to the CSS Settings above, I set 800, principle: can be large, not small -->
</g>
<g class="line"><! -- Keyboard line path length 333-->
<path fill="none" stroke="#FFBB4D" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=",29.3 M187.3, 192 c0, 0-43.3, 76-46 s372, 167.3, 405112.7 S424.7, 30424.7, 30"/>
</g>
</svg>Copy the codeThis is all the code for SVG dynamic stroke effects. Because I do not know how to convert into GIF, so I will not map, record screen is too much trouble (know also please tell me the conversion method, thank you), directly click to see the effect. Demo viewing now allows you to use your endless imagination to create all kinds of animations, such as common dynamic signatures and so on. If you don’t understand, please leave a message and I will answer it. If you paste the code, I will try my best to help you modify it. PS: the GIF file transferred after recording has been added, but it is not clear enough.