Wie Animation zu allen Pfad von SVG

Question

Ich möchte zu einem SVG animieren und zu irgendwelchen Elementen verzögern. Bitte sehen Sie diese link und Löwen SVG. Die Animation davon ist einfach, aber zu jedem Pfad zu verzögern ist sehr zeitaufwendig.

Answer 1

Es ist ziemlich einfach, diesen Effekt neu zu erstellen.

Ich habe nicht überprüft, wie diese Seite das gemacht hat, aber so würde ich es machen.

Zuerst brauchen wir ein SVG, wo alle Wege in einer Gruppe sind (<g>);

<svg> 
    <g id="anim"> 
    <!-- path elements in here --> 
    </g> 
</svg> 

Auf Seite geladen werden, setzen wir ein auf die Gruppe, die sie transformieren (eine alle Pfade) von der Seite der SVG bewegt.

group.setAttribute("transform", "translate(-100, 0)"); 

Dann wird für die Animation, wir eine Schleife durch alle <path> Elemente nacheinander (mit einer Verzögerung) Hinzufügen einer Klasse, die eine transform verwendet die Pfade wieder auf dem Bildschirm zu bewegen.

.onto-screen-anim 
{ 
    transition: transform 1s ease-out; 
    transform: translateX(100px); /* 100 = width of viewBox */ 
} 

Der Übergang bewirkt, daß der Weg in reibungslos gleiten kann.

---

Arbeiten Demo

var group = document.getElementById("anim"); 
 

 

 
// Generate a lot of test paths in our SVG. 
 
// This is just for the demo as an alternative to having a big SVG in our snippet. 
 
for (var i=0; i<100; i++) { 
 
    path = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
 
    var r1 = 5 + Math.random() * 45; 
 
    var r2 = 5 + Math.random() * 45; 
 
    var a1 = Math.random() * 2 * Math.PI; 
 
    var a2 = a1 + (Math.random() - 0.5); 
 
    path.setAttribute("d", [ 
 
    'M', 50 + Math.cos(a1) * r1, 50 + Math.sin(a1) * r1, 
 
    'L', 50 + Math.cos(a2) * r2, 50 + Math.sin(a2) * r2, 
 
    ].join(' ')); 
 
    group.appendChild(path); 
 
} 
 

 

 
// Add a transform to the<svg> root element to move all the child 
 
// elements off the left edge of the SVG where we want them to start. 
 
// The value 100 represents the width of the viewBox. 
 
group.setAttribute("transform", "translate(-100, 0)"); 
 

 

 
// For our animation, just loop through all paths, adding the 
 
// "onto-screen-anim" class that moves them back into view. 
 

 
var INTER_PATH_DELAY = 16; // 10 milliseconds 
 

 
var allPaths = group.querySelectorAll("path"); 
 
var itemNum = 0; 
 
function startOnePathMoving() { 
 
    // Add the class that moves the path onto screen 
 
    allPaths[itemNum++].classList.add("onto-screen-anim"); 
 
    // if there are paths left, then call this function again 
 
    // after a short delay to start the next one moving 
 
    if (itemNum < allPaths.length) 
 
    setTimeout(startOnePathMoving, INTER_PATH_DELAY); 
 
} 
 

 
// Start the first timeout to get the animation started 
 
setTimeout(startOnePathMoving, INTER_PATH_DELAY);

/* Make sure the paths that are off the SVG can't be seen */ 
 
svg { 
 
    overflow: hidden; 
 
} 
 

 
/* The class that moves the paths back onto screen */ 
 
.onto-screen-anim 
 
{ 
 
    transition: transform 1s ease-out; 
 
    transform: translateX(100px); /* 100 = width of viewBox */ 
 
} 
 

 
/* Styling for our demo paths. You can ignore this for a real SVG */ 
 
path { 
 
    fill: none; 
 
    stroke: grey; 
 
    stroke-width: 0.5; 
 
}

<svg width="400" height="400" viewBox="0 0 100 100"> 
 
    <g id="anim"></g> 
 
</svg>