SVG-Linienanimation mit anime.js

Ich verändere einen Stift, um eine SVG-Animation zu erstellen. Ich möchte, dass das grüne Element genau dem Zeilenpfad folgt, aber nicht. Es schleift auch nicht den 8-Pfad korrekt in einer Zeile, sondern springt an der Kreuzung der Schleife. Jede Beratung, wie dies zu erreichen, würde geschätzt werden, da ich nicht in der Lage, eine LösungSVG-Linienanimation mit anime.js

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

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

Hier ist die codepen zu finden: https://codepen.io/anon/pen/VWYKwB

Quelle

2017-06-05 user3615851

Vor ein paar Tagen sagte ich Ihnen, dass Ihr Weg ein Problem hat. Sie haben Ihren Weg zum Wiederaufbau ...

<!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>

Quelle

2017-06-05 10:25:03

ich es in einem einzigen Weg gemacht, aber es funktioniert immer noch nicht. Ich sollte in der Lage sein, Ihren Pfad auch in meinem Code hinzuzufügen, aber die Zeile folgt dem Pfad immer noch nicht korrekt. Kannst du näher erläutern, was mit meinem Pfad nicht stimmt, da es jetzt ein einzelner Pfad sein sollte (nur ein M). Hier ist Ihr Pfad hinzugefügt: https://codepen.io/anon/pen/VWYKwB – user3615851

Leider kann ich Ihnen nicht sagen, weil ich selten mit Bibliotheken arbeite. Die Zeit, mit solchen Bibliotheken umzugehen, ist zu groß für mich, deshalb schreibe ich die Routinen, die ich immer brauche. –

SVG-Linienanimation mit anime.js

Antwort

Verwandte Themen