• Generally speaking, the web front end can achieve animation effects mainly through the following schemes:
  • CSS animations; Css3 style effects can be used to animate DOM elements.
  • Canvas animation; Use the API provided by canvas and animate frame by frame using clear – render.
  • SVG animation; SVG also provides a number of APIS to achieve animation effects, and compatibility is not bad, this article will focus on how to make SVG line animation.

Let’s start with a few effects:

demo



demo

demo

All the above effects are achieved by using SVG line animation, using only CSS3 and SVG, without using a line of javascript code, which is easier than canvas. Here is how to achieve these effects.

I will not describe the basics of SVG here, you can directly view the related API in the documentation, here is to describe the main implementation of line animation: path (path)

<path> tag command

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath

Using these commands for path we can implement any combination of lines we want. Take a simple line as an example:


  
Copy the code

Effect:

Hehe, it looks simple, but how do you make this line work? Here are some of the main attributes of path in SVG:

  1. Stroke: Identifies the color of the path;
  2. D: Identifies a collection of path commands. This property mainly determines the shape of the line.
  3. Stroke-width: indicates the path width in px;
  4. Stroke-dasharray: This is a

    and sequence of numbers separated by commas or Spaces, specifying the length of the dash and the gap. If an odd number of values are provided, the sequence of values is repeated once, resulting in an even number of values. So 5,3,2 is the same as 5,3,2,5,3,2;
  5. Stroke-dashoffset: identifies the offset of the entire path;

Stroke-dasharray and stroke-Dashoffset are easier to understand with a diagram:

So our previous path would look something like this:


   #path {
        stroke-dasharray: 3px, 1px;
        stroke-dasharray: 0;
}
Copy the code

Effect:

Now that we understand what stroke-Dasharray does, we can use cSS3 animation to animate this path.

#path { animation: move 3s linear forwards; } @keyframes move { 0%{ stroke-dasharray: 0, 511px; } 100%{ stroke-dasharray: 511px, 511px; }}Copy the code

Effect:

The value 511 is the length of the entire path, which can be obtained using js document.getelementById (‘ path ‘).getTotallength ()

stroke-dasharray: 0, 511; It means that the length of the solid line and the gap are 0 and 511, so the entire path is empty at the beginning. Then transition to stroke-Dasharray: 511, 511; Because the length of the whole line is 511, and the length of the solid line gradually becomes 511, the whole line appears.

This effect can also be achieved by using stroke-Dashoffset. The principle is that the original line is divided into 511 solid lines and 511 gaps, but the offset is set so that the line offset is not visible. When the offset is constantly modified, the line gradually appears.

#path { animation: move 3s linear forwards; stroke-dasharray: 511px,511px; } @keyframes move { 0%{ stroke-dashoffset: 511px; } 100%{ stroke-dashoffset: 0; }}Copy the code

Effect:

Once we have mastered the above methods, the whole principle of using SVG for line animation is clear. All we need is an SVG path, but drawing simple lines is not beautiful. How can we get complex SVG paths?

  1. Ask the UI designer for one.
  2. Make one yourself using PHOTOSHOP and AI in 2 simple steps.

Take the tribe LOGO as an example:

1. Get a PNG image of the tribe LOGO.

2. Right click on the layer and click Generate Work Path from Selection to get:

3. File – Export – Path to AI, export the path to AI and open it.

4. Select the SVG file in AI and use sublime to open the SVG file and copy the D of path.

5, using the animation method introduced above, we can easily get the following effect.

Advanced line animation:

It can be seen that the above animation effect is different from the original animation effect of the article. To achieve the original animation effect of the article, we need to use <symbol> and <use> of SVG to achieve it. Readers can check the usage of these two tags on the Internet.


    
    
    


  
    

Copy the code

#path1 { stroke-dashoffset: 7% 7%; stroke-dasharray: 0 35%; animation: animation 3s linear forwards; } @keyframes animation { 100% { stroke-dasharray: 7% 7%; stroke-dashoffset: 7%; } } #path2 { stroke-dashoffset: 7% 7%; stroke-dasharray: 0 35%; animation: animation2 3s linear forwards; } @keyframes animation2 { 100% { stroke-dasharray: 7% 7%; stroke-dashoffset: 14%; }}Copy the code

The idea is:

1. Replace the original path with two paths, and the two paths are completely identical.

2. Set the animation of cSS3 of stroke-Dasharray and stroke-dashoffset respectively for the two paths. Note that the animation of the two paths should not be exactly the same, and there should be a difference.

3. After successful setting, multiple animation effects can be realized by using the timing and change degree of animation animation.

Effect:

So how to implement the alloyteam text animation, in fact, the principle is also using stroke-dasharray and stroke-dashoffset, these two attributes can not only work on <path>, but also on <text>.


  
    QQ
  
 
  
    
      
        
          
            
  
Copy the code

.use-text:nth-child(1) { stroke: #360745; animation: animation1 8s infinite ease-in-out forwards; } .use-text:nth-child(2) { stroke: #D61C59; animation: animation2 8s infinite ease-in-out forwards; } .use-text:nth-child(3) { stroke: #E7D84B; animation: animation3 8s infinite ease-in-out forwards; } .use-text:nth-child(4) { stroke: #EFEAC5; animation: animation4 8s infinite ease-in-out forwards; } .use-text:nth-child(5) { stroke: #1B8798; animation: animation5 8s infinite ease-in-out forwards; } @keyframes animation1 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 7%; } 70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 7%; } } @keyframes animation2 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 14%; } 70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 14%; } } @keyframes animation3 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 21%; } 70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 21%; } } @keyframes animation4 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 28%; } 70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 28%; } } @keyframes animation5 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 35%; } 70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 35%; }}Copy the code

There are 5 paths that overlap perfectly, and each path has a different color and animation.

Effect:

 

Start the fun journey of SVG lines!

 

Reference data: www.nihaoshijie.com.cn/index.php/a…

Original article reprint please note:

Reprinted from AlloyTeam:www.alloyteam.com/2017/02/the…