Передвижение по svg (path)

#javascript #css #canvas #svg #path

Как организовать движение картинок по path друг за другом, как угодно, только не
друг на друге (задать координаты в цикле не получилось, где-то ошибаюсь..). Фрагмент кода:



var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
    
        var W = window.innerWidth,
            H = window.innerHeight;
        canvas.width  = W;
        canvas.height = H;
    
        var angle = 0;
       
        var currentAngle = 0;
        var TO_RADIANS = Math.PI / 180;
        var particles = [];
        
    
        var counter = 0;
        var svg = document.getElementById("k9");//path из svg
        var straightLength = svg.getTotalLength();
    
        function Particle() {
    
        this.radius = 20;
    
           this.x = svg.getPointAtLength(straightLength).x;
           this.y = svg.getPointAtLength(straightLength).y;
    
        this.move = function() {
    
          for ( var g = 0; g < particles.length; g++){
    
            this.x = svg.getPointAtLength(counter*straightLength).x;
            this.y = svg.getPointAtLength(counter*straightLength).y;
    
        }
    counter+=0.0003;//так картинки передвигаются по path друг на друге, как организовать
нечто вроде "паровозика"? Перебрал много вариантов в цикле, но ничего не вышло..


        context.beginPath();
        context.globalCompositeOperation = "source-over";

        context.save();
        context.translate(this.x, this.y);
        context.rotate(Gangle * TO_RADIANS);
        var image = new Image();
        image.src = 'img/bag.png';
        context.drawImage(image,20, -20, 40, 40);
        context.restore();
        angle+=0.1;


    }
    };


    for (var i = 0; i < 10; i++) {
      var particle = new Particle();
        particles.push(particle);
    }

    function animate() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < particles.length; i++) {
        particles[i].move();

    }
      requestAnimFrame(animate);
    }
    animate();



    

Ответы

Ответ 1

Как организовать движение картинок по path друг за другом  


Для решения этой задачи необходимо нарисовать path в векторном редакторе или вручную.     








Движение вдоль этого пути реализуется командой   

С привязкой объектов движения к пути посредством ID этого пути  с помощью команды
  
Фрагмент кода:

`
    
                 
                     
                
        `    


Начало движения при наведении на кнопку "Start"     begin="startButton.mouseover"
    Окончание анимации при наведении на кнопку "Stop"    end="stopGreen.mouseover"     

Далее добавляются еще два подобных блока кода для двух других объектов движения.  


Для реализации  движения друг за другом нескольких объектов, задается пауза до начала
анимации для второго и третьего шарика.   begin="startButton.mouseover+0.25s"

Необязательные украшательства:    

Добавлены маркеры для указания направления движения, паттерн фона и блок радиокнопок
остановки объектов движения.
Ниже пример кода:   








Анимация адаптивна, пробуйте изменять размер окна браузера. 

Вариант #2


Объекты движения заменены на более сложные (ведьмы на метлах) 
Изменена траектория движения (заменяем патч  
 

  
 
        
 
 
  
  
   
  


  
	

   

    


	 
	 
		 
	
	 
	 
	  
	 
		 
	
	 


	 
		 
	


	


Start 

 
	
      		
	
			
			
		
		
				
				
		
	
			
			
			
	

	Stop
	
	





Начало анимации при наведении на кнопку "Start" 

Приостановка объектов анимации при наведении на соответствующую радиокнопку.