CODEWITHSUNDEEP
jquerysnap.svgsvg-animate
jay khatri
jay khatri

Reputation: 149

How to do animations in same time in looping using snap.svg?

I'm trying to run animate several objects in a same time with dynamic

I want run all object start with same time which is dynamic and in for loop.

i have added my code but here both animation not working in same time

Please help

Thank you

var svg = d3.select('#demo-tiger');
	
	var map = Snap('#demo-tiger');
	// [path_number, icon_number]
	var array = [["A1", "icon1"],
				 ["A2", "icon2"]
				];
	var arrLength = array.length;
	for(var i=0; i < arrLength; i++){
		svg.append('circle').attr('cx', '0').attr('cy', '0').attr('r', '3').attr('fill', 'red').attr('id', array[i][1]);
		
		var spaceship = map.select('#'+array[i][1]);
		var flight_path = map.path(d3.select('#'+array[i][0]).attr('d')).attr({ 'fill': 'none', 'stroke': 'none'});
		var flight_path_length  = Snap.path.getTotalLength(flight_path);
		
			Snap.animate(0, flight_path_length, function( step ) { 
				moveToPoint = Snap.path.getPointAtLength( flight_path, step );
				x = moveToPoint.x;
				y = moveToPoint.y;
				spaceship.transform('translate(' + x + ',' + y + ')');
			}, 15000, mina.easeout);
		
		
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>

<svg id="demo-tiger" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style=" display: inline; width: 100%; height: 100%; " xml:space="preserve">
    <path id="A1" fill="none" stroke="red" stroke-miterlimit="10" d="M50.675,200.424V27.616"/>
		<path id="A2" fill="none" stroke="green" stroke-miterlimit="10" d="M100.675,200.626V27.423"/>
</svg>

Upvotes: 0

Views: 174

Answers (1)

Ian
Ian

Reputation: 13842

You need to add a closure to the animation code, otherwise it doesn't know which spaceship/flight_path/flight_path_length to refer to (basically it will just use the last details).

There are a few ways of doing that, but just including that block of code like

(function(){ doAnimationStuff() })();

will do this, as variables have functional scope in JS. Just remember that the animation function gets called later, so it needs to know those variables at a later time, when using a for loop.

Edit: You may also find you can do all of the code in Snap, and not need d3.js (or vice versa), but not sure if this is part of a bigger project where you need both.

var svg = d3.select('#demo-tiger');
	
	var map = Snap('#demo-tiger');
	// [path_number, icon_number]
	var array = [["A1", "icon1"],
				 ["A2", "icon2"]
				];
	var arrLength = array.length;
	for(var i=0; i < arrLength; i++){
		svg.append('circle').attr('cx', '0').attr('cy', '0').attr('r', '3').attr('fill', 'red').attr('id', array[i][1]);
	  (function(){	
		var spaceship = map.select('#'+array[i][1]);
		var flight_path = map.path(d3.select('#'+array[i][0]).attr('d')).attr({ 'fill': 'none', 'stroke': 'none'});
		var flight_path_length  = Snap.path.getTotalLength(flight_path);
		
			Snap.animate(0, flight_path_length, function( step ) { 
				moveToPoint = Snap.path.getPointAtLength( flight_path, step );
				x = moveToPoint.x;
				y = moveToPoint.y;
				spaceship.transform('translate(' + x + ',' + y + ')');
			}, 15000, mina.easeout);
   })(); 		
		
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>

<svg id="demo-tiger" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style=" display: inline; width: 100%; height: 100%; " xml:space="preserve">
    <path id="A1" fill="none" stroke="red" stroke-miterlimit="10" d="M50.675,200.424V27.616"/>
		<path id="A2" fill="none" stroke="green" stroke-miterlimit="10" d="M100.675,200.626V27.423"/>
</svg>

Upvotes: 1

Related Questions