Jeena Paradies: 70 SVG Grafiken zu einer Animation verarbeiten

Beitrag lesen

SELF-Forum

70 SVG Grafiken zu einer Animation verarbeiten

Jeena Paradies Homepage des Autors
+2 Informationen zu den Bewertungsregeln

Hallo,

Insbesondere wäre interessant zu wissen, wie man 70 einzelne SVG's zu einer Animation vereinen kann.

Eine sehr interessante frage! Das einfachste was mir einfällt ist es die Bilder vorzuladen (wie Hotti schon sagte) und sie dann schnell auszutauschen.

Ich hab mal ein script geschrieben das das macht:

<!DOCTYPE html>  
<html>  
<head>  
	<meta charset="utf-8">  
	<title>animated SVG</title>  
	<style type="text/css">  
		[code lang=css]#preload { display: none; }

</style>

<script>

var currentAnimationState = 0,  
	stepLength = 20, // in Millisekunden  
	canvas = null,  
	urls = [],  
	start = null;  
  
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;  
  
function initAnimation() {  
	canvas = document.querySelector("#canvas");  
  
	var imgs = document.querySelectorAll("#preload img");  
	for (var i = 0; i < imgs.length; i++) {  
		urls.push(imgs[i].src);  
	}  
  
	canvas.src = urls[currentAnimationState];  
	requestAnimationFrame(step);  
}  
  
function nextImage(steps) {  
	currentAnimationState = (currentAnimationState + steps) % urls.length;  
	canvas.src = urls[currentAnimationState];  
}  
  
function step(timestamp) {  
	if(start == null) start = timestamp;  
  
	var progress = timestamp - start;  
  
	if(progress > stepLength) {  
		nextImage(parseInt(progress / stepLength, 10));  
		start = null;  
	}  
  
	requestAnimationFrame(step);  
}

</script>
</head>
<body onload="initAnimation()">
<img id="canvas">
<div id="preload">
<img src="s0.svg">
<img src="s1.svg">
<img src="s2.svg">
<img src="s3.svg">
<img src="s4.svg">
<img src="s5.svg">
</div>
</body>
</html>[/code]

Hier ne live vorschau: http://jeenaparadies.net/t/self/animatedSVG/

Es ist etwas kompliziert weil es versucht langsamme Rechner auszugleichen indem es Bilder in der Animation überspringt falls der Rechner es nicht hinbekommt sie so schnell auszutauschen. Deshalb kein setTimeout() sondern requestAnimationFrame().

Du kannst es wohl schon so verwenden aber natürlich wäre es mir lieber wenn du daraus lernen könntest, so wenn irgendetwas unverständlich im Script ist frage gerne und ich werde versuchen darauf zu antworten.

/Jeena

--

Gourmetica Mentiri
Beitrag melden
+2
Informationen zu den Bewertungsregeln