Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Implementation steps

  • The introduction ofsvg.js(A use ofjswritesvgLibrary), draw a line chart

     <! DOCTYPEhtml> 
 <html> 
 <head> 
     <title>SVG.js</title> 
     <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script> 
     <style>
        #drawing {
          width: 1000px;
          height: 500px;
          background: # 399979;
          margin-left: 100px;
          margin-top: 100px;
        }
     </style>
 </head> 
     <body> 
         <div id="drawing"></div> 
     </body> 
 </html>
 
 <script>
     let draw = SVG().addTo('#drawing').size('100%'.'100%')
     draw.viewbox('0 0, 100, 100')
     let path = draw.path('M10 10 L40 10 40 20 80 20').fill('none').attr({stroke: '#cfcfcf'.'stroke-width': 0.3})
 </script>
Copy the code

  • Use the stroke-Dasharray property with values of 2 and 6 effects, respectively

        // js
    path.attr({'stroke-dasharray': 2})
Copy the code

        // js
    path.attr({'stroke-dasharray': 6})
Copy the code

  • Gets the length of path, and if stroke-dasharray keeps increasing until it equals exactly the length of path, the entire graph is covered by the dashed line, as if initiating the graph. But it’s really just part of the dotted line. Add the stroke-Dashoffset property with the CSS animation to add the animation

    • herestroke-dashoffsetThe meaning of:dashDistance from the mode to the start of the path. If the initialization value is greater than 0, it can be interpreted as being drawndashPatterns ofpathThe path is moved a certain distance to the right with both visible and invisible references (so the path is animated as it paints itself when the keyFrame is added at this point and the value changes from greater than 0 to 0). ifstroke-dashoffsetLess than 0, the path moves to the left a certain distance. This determines the direction of the animation’s trajectory.
        <style>
        .path {
            animation: drawPath 3s infinite;
        }
    </style>
    <script>
        path.addClass("path")
        let pathLength = path.length()
        path.attr({'stroke-dasharray': pathLength, 'stroke-dashoffset': pathLength})
        var keyFrames = 
        `@keyframes drawPath {
          0% {
            stroke-dashoffset: ${pathLength}
          }
          100% {
            stroke-dashoffset: 0;
          }
        }`
      createKeyframes(keyFrames)
      // Add the style method dynamically
      const getStyleElement = () = > {
      let style = document.querySelector('style#dynamic-keyframes')
          if(! style) { style =document.createElement('style')
            style.id = 'dynamic-keyframes'
            style.type = 'text/css'
            document.getElementsByTagName('head') [0].appendChild(style)
          }
         return style
      }

      const createKeyframes = (keyframeString) = > {
        let style = getStyleElement()
        style.insertAdjacentHTML('beforeend', keyframeString)
      }
    </scritp>
Copy the code

conclusion

  • You can just use off-the-shelfsvgandcssAchieve an animation-like effect. usejsIn order to be able to calculate exactlypathThe length is dynamically setstroke-dashoffsetandstroke-dasharrayBecause in the actual scenario,pathUnfixed length
  • stroke-dashoffsetThe direction of the trajectory of is determined by the initial value
  • The path animation is actuallypaththedashIn mode, offsetoffsetThe movement process of

reference

MDN-SVG

svg.js

How SVG Line Animation Works