Seite wird zur Zeit überarbeitet

07. Juni 2017

Continued SVG ANI

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head> 
  <body>
    <button onclick="dashAni(myPath, 200,2500)">start</button>
    <svg id="mySVG"  width="200" height="200" viewBox="0 0 500 500">
        <path 
        id="myPath" d="M 50,250 c 0 -100   150 -100   200 0 
                                      c 50 100   200 100   200 0
                                      c -0 -100   -150 -100   -200 0
                                      c -50 100   -200 100   -200 0
                                      z" 
        stroke="#ccc"
        stroke-width="5" fill="none" />
    </svg>
    <script>
      var dashAni = function(path, length, duration){
        var dashPath = path.cloneNode(true);
        mySVG.appendChild(dashPath);
        var pathLen=path.getTotalLength();  
        var aktPos;
        var sumSteps = duration / (1000/60) // 60 pics per second
        var step=0;
        var pathAnim;
        var rest=0;     
        var anim=function(){
           aktPos = pathLen/sumSteps*step;
           var calcLength = length;
           var distance = pathLen - aktPos - length;
           if (distance < 0){
              aktPos += distance;
              rest = distance * -1;
              calcLength -= rest;
              distance = 0;
           }
           dashPath.setAttribute('stroke-dasharray', 
              `${rest} ${aktPos} ${calcLength} ${distance}`);    
           dashPath.setAttribute('stroke', "red");    
           if (step < (sumSteps)){
              step++;
              pathAnim = setTimeout(anim, 1000/60) //1000/60 pics/second
            } else {
              step=0;
              rest=0;
              pathAnim = setTimeout(anim, 1000/60)
            }
        }
       anim();
      }
    </script>
  </body>
  </html>


Frank Wisniewski Lohmühlenstraße 2 53518 Adenau
Telefon: 02691 / 548 E-Mail: info@w-web.de