Seite wird zur Zeit überarbeitet

08. Juni 2017

Animated Dasharray

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>SVG 001</title>
    <style>
      body{font-family:"Calibri", sans-serif;}
      svg{border:1px solid #eee;width:100px;height:100px;}
    </style>
  </head>
    <body>
      <p>Offset Dasharray</p>
     <svg width="200" height="200" viewBox="0 0 500 500">
     <path id="myPath" d="M 50 50 q 200 800 400 0" stroke="none"
      stroke-width="5" fill="none" />
    </svg>
    <script>
      var paintPathAni=function(path, duration, color, callback){
          easeInOutQuad= function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }
          easeInQuad= function (t) { return t*t}
          easeOutQuad= function (t) { return t*(2-t) }
          /*
          for (var i=0; i<=1; i+=0.1)
          { 
            console.log(easeInOutQuad(i));
          }
          */
          var len=path.getTotalLength();  
          var aktLen;
          var sumSteps = duration / (1000/60) // 60 pics per second
          var step=1;
          var pathAnim;
          var anim=function(){
            //aktLen = len/sumSteps*step;
            aktLen = easeInOutQuad(step/sumSteps)*len; 
            //aktLen = easeInQuad(step/sumSteps)*len; 
            //aktLen = easeOutQuad(step/sumSteps)*len; 

            path.setAttribute('stroke-dasharray', aktLen + ' ' + (len - aktLen));
            path.setAttribute('stroke',color);
            if (step < sumSteps){
              step++;
              pathAnim = setTimeout(anim, 1000/60) //1000/60 pics/second
              } else {
                clearTimeout(pathAnim);
                path.setAttribute('stroke',"red");
                path.setAttribute('stroke-dasharray','none');
                if (callback) return callback();
              }
          }
          anim();   
      }
      paintPathAni(myPath, 3500,'red',function(){console.log('Animation End')});
    </script>
  </body>  
  </html>  


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