アニメとのSVGラインアニメーション

私はSVGアニメーションを作成するペンを変更しています。私は緑の要素がラインのパスに正確に従うことを望みますが、そうではありません。また、8行のパスを1行で正しくループするのではなく、ループの交差点でバウンスします。 https://codepen.io/anon/pen/VWYKwB アニメとのSVGラインアニメーション

出典

2017-06-05 user3615851

数日前、私はあなたのパスに問題があることを言った：私は解決策ここ

var path = anime.path('path'); 

anime({ 
    targets: 'div', 
    translateX: path, 
    translateY: path, 
    rotate: path, 
    duration: 6000, 
    loop: true, 
    easing: 'linear' 
});

を見つけることができていcodepenだいないので、これを達成するためにどのように何かアドバイスをいただければ幸いです。あなたのパスを再構築する必要が...

<!doctype html> 
 
    <html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    </head> 
 
    <body> 
 
    <button onclick="dashAni(myPath, 50, 3500)">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="#eee" 
 
     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=0 
 
     var sumSteps = duration/(1000/60) // 60 pics per second 
 
     var step=0; 
 
     var pathAnim; 
 
     dashPath.setAttribute('stroke-dasharray', length + ' ' + (pathLen - length)); 
 
     dashPath.setAttribute('stroke', "red"); 
 
     dashPath.setAttribute('stroke-dashoffset', aktPos); 
 

 
     var anim=function(){ 
 
      aktPos = pathLen/sumSteps*step*-1; 
 
      //aktLen = easeInOutQuad(step/sumSteps)*len; 
 
      dashPath.setAttribute('stroke-dasharray', length + ' ' + pathLen); 
 
      dashPath.setAttribute('stroke-dashoffset', aktPos); 
 

 
      if (step <= (sumSteps)){ 
 
      step++; 
 
      pathAnim = setTimeout(anim, 1000/60) //1000/60 pics/second 
 
      } else { 
 
       mySVG.removeChild(dashPath); 
 
       clearTimeout(pathAnim); 
 
      } 
 
     } 
 
     anim(); 
 
     } 
 
    </script> 
 
    </body> 
 
    </html>

出典

2017-06-05 10:25:03

私は、単一のパスにそれを作ったが、それはまだ働いていません。あなたのパスを私のコードに追加することはできますが、行はまだパスに正しく従いません。私の道が間違っていることをあなたが精緻にすることはできますか。ここにあなたのパスが追加されています：https://codepen.io/anon/pen/VWYKwB – user3615851

残念ながら、私はめったにライブラリを扱っていないので、私はあなたには言いません。そのようなライブラリを扱う時間は私にとっては大きすぎるので、いつも自分で必要とするルーチンを書いています。 –

アニメとのSVGラインアニメーション

答えて

関連する問題