[Web Animation] SVG line animation entry, web Animation svg line

[Web Animation] SVG line animation entry, web Animation svg line

Generally, Web Animation includes three categories.

• CSS3Animation
• javascriptAnimation (canvas)
• htmlAnimation (SVG)

I personally think that each of the three types of animations has its own advantages and disadvantages. in actual application, I will make a trade-off based on the actual situation. This article discusses the valuable SVG line animation that is often used in actual projects in my opinion.

 

Example

SVG line animation can solve the animation that cannot be completed using CSS in some specific situations. Especially in the progress bar, look at a small requirement in a recent project, a progress bar in this shape:

Take out the progress bar separately, that is, you need to achieve this effect:

The brain hole is wide open. How does CSS3 implement such a progress bar.

CSS3 can be implemented, which is very troublesome. However, if SVG is used, it can be easily solved.

Let's assume that you have a certain SVG foundation when reading this article, and you will understand the code above. Well, this article ends here.

Okay, Let's explain it step by step. The main SVG code of the above progress bar is as follows:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/></svg>

Why SVG?

Scalable Vector Graphics, that is, SVG, is a branch language of W3C XML used to mark Scalable Vector Graphics. (From MDN)

In the above Code, let's talk about it first.svgTags:

• version: Indicates<svg>Version. Currently, only 1.0 and 1.1 are supported.
• xmlns:http://www.w3.org/2000/svgFixed value
• xmlns:xlink:http://www.w3.org/1999/xlinkFixed value
• xml:space:preserveFixed value. The preceding three values are fixed, indicating the namespace. When the data exists separatelysvgIn the file, these three values cannot be omitted
• class: Is the familiar class
• width|height: DefinitionsvgCanvas size
• viewbox: Defines the area that can be displayed on the canvas. When the viewBox size is different from that of svg, the display of viewBox on the screen will be scaled to the same size as svg (not to be understood at the moment)

WithsvgLabel, we can happily addSVGFigure. above, I amsvgTwopolylineLabel.

SVG basic shape

polyline: Is a basic shape of SVG, used to create a series of linear connections to multiple points.

In fact,polylineIs a relatively uncommon shape, more commonly used ispath,rect,circle. Here I usepolylineThe reason is that you need to usestroke-linejoinAndstroke-linecapAttribute to create a smooth transition angle at the online segment connection.

Some basic shapes are defined in SVG. before proceeding to the following sections, we suggest you click here to learn the labels and syntax of some basic graphics:

SVG line Animation

Well, the focus of this article is finally reached.

Above, we give twopolylineClass is set. One benefit of SVG graphics is that some attribute styles can be written in CSS mode. More importantly, they can be used with CSS animation.

The main CSS code above:

.g-rect-path{    fill: none;    stroke-width:10;    stroke:#d3dce6;    stroke-linejoin:round;    stroke-linecap:round;}.g-rect-fill{    fill: none;    stroke-width:10;    stroke:#ff7700;    stroke-linejoin:round;    stroke-linecap:round;    stroke-dasharray: 0, 1370;    stroke-dashoffset: 0;    animation: lineMove 2s ease-out infinite;}@keyframes lineMove {    0%{        stroke-dasharray: 0, 1350;    }    100%{        stroke-dasharray: 1350, 1350;    }}

What is this Nima CSS? ExceptanimationDon't you know?

Mo panmin, in fact, a lot of comparison with CSS is very easy to understand, just changed the name:

• fill: Similar tobackground-color,svgFill color of the image;
• stroke-width: Similar toborder-width,svgSpecifies the Border width;
• stroke: Similar toborder-color,svgSet the border color for the image;
• stroke-linejoin|stroke-linecap: As mentioned above, set the style at the link of a line segment;
• stroke-dasharray: The value is a group of arrays with no upper limit. Each number is alternating to indicate the width of the line and interval;
• stroke-dashoffset: The offset of the dotted line.

Focus on the key attributes of line Animationstroke-dasharray.

Attribute stroke-dasharrayControls the pattern paradigm used to draw edges.

It is a <length> and <percentage> series. The numbers are separated by commas (,) or spaces to specify the length of the dashes and gaps. If an odd number of values is provided, the number of columns of the value is repeated once, and the number of values becomes an even number. Therefore,5, 3, 2Equivalent5, 3, 2, 5, 3, 2.

The explanation is pale. Let's look at the example:

Above, fill the progress bar and use the following Animation:

@keyframes lineMove {    0%{        stroke-dasharray: 0, 1350;    }    100%{        stroke-dasharray: 1350, 1350;    }}

stroke-dasharray: 0, 1350;, Indicating that the length of the line box and the gap are 0 and 1350 respectively, so the entire image is occupied by the gap at the beginning, so the length of the visual effect is 0.

Then transitionstroke-dasharray: 1350, 1350, Indicating that the length of the line box is 1350 and 1350 respectively, because the length of the entire graph is 1350, the entire progress bar will be filled slowly.

After mastering this technique, you can usestroke-dasharrayAndstroke-dashoffsetMake many good interaction scenarios:

Implement button interaction through SVG line Animation

SVG line animation to achieve circular progress bar

Multi-SVG graphic line Animation

I have used many of them in one h5 of our company.SVGWith graphic line animation, you can make some cool animations with a great sense of technology.

 

The text is over. On my Github, I used SVG to implement some graphics-SVG whimsy. The Demo can stamp it here.

The next article will describe how to use the PS + AI to generate non-Rule graphicspathPath to implement SVG animation. Release a Demo.

 

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.