Как сделать анимацию в то же время в цикле, используя snap.svg? - PullRequest
Новая
       8

Как сделать анимацию в то же время в цикле, используя snap.svg?

0 голосов
/ 03 мая 2018

Я пытаюсь запустить анимацию нескольких объектов одновременно с динамическим

Я хочу, чтобы все объекты запускались с одного и того же времени, которое является динамическим и для цикла.

Я добавил свой код, но здесь обе анимации не работают одновременно

Пожалуйста, помогите

Спасибо 

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>

1 Ответ

0 голосов
/ 03 мая 2018

Вам необходимо добавить замыкание в код анимации, иначе он не знает, на какой космический корабль / flight_path / flight_path_length ссылаются (в основном он будет использовать только последние детали).

Есть несколько способов сделать это, но просто включить такой блок кода, как

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

сделает это, поскольку переменные имеют функциональную область видимости в JS. Просто помните, что функция анимации вызывается позже, поэтому она должна знать эти переменные позже, когда используется цикл for.

Редактировать: Вы также можете обнаружить, что можете выполнять весь код в Snap и не нуждаетесь в d3.js (или наоборот), но не уверены, является ли это частью более крупного проекта, где вам нужны оба. 

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