Question

我尝试使用动态

同时为多个对象设置动画效果

我希望运行所有对象以相同的时间开始，这是动态的并且在for循环中。

我添加了我的代码，但这里两个动画都不能同时工作

请帮忙

谢谢

＆＃13;

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);
		
		
	}

＆＃13;

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

＆＃13;

Answer 1

您需要为动画代码添加一个闭包，否则它不知道要引用哪个spaceship / flight_path / flight_path_length（基本上它只会使用最后的细节）。

有几种方法可以做到这一点，但只包括像

这样的代码块

（function（）{doAnimationStuff（）}）（）;

将执行此操作，因为变量在JS中具有功能范围。请记住，稍后会调用动画函数，所以当使用for循环时，它需要在以后知道这些变量。

编辑：您可能还会发现您可以在Snap中执行所有代码，而不需要d3.js（反之亦然），但不确定这是否是您需要两者的更大项目的一部分。

＆＃13;

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);
   })(); 		
		
	}

＆＃13;

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

＆＃13;

如何使用snap.svg在循环中同时进行动画？

1 个答案: