6

Как организовать движение картинок по 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
  • @Alexandr_T Большое Вам спасибо, интересное решение(пригодится..) но решил по-своему.. 31 июл 2017 в 13:38

1 ответ 1

6

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

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

<svg xmlns = "http://www.w3.org/2000/svg"   xmlns:xlink = "http://www.w3.org/1999/xlink"
   width="25%" height="45%"    viewBox="0 0 210 210"  >
<path id="t_path" fill="none" stroke="grey" stroke-width="2" d="M10,150 A6 15 180 0 1 70 140 A5 10 180 0 0 130 130 A15 55 180 0 1 190 120 A45 10 170 0 1 10 150"/> 
</svg>

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

С привязкой объектов движения к пути посредством ID этого пути с помощью команды
<mpath xlink:href="#t_path" />
Фрагмент кода:

`<mpath xlink:href="#t_path" />
    <circle r="7" cx="2" cy="2" fill="yellowgreen" stroke="green" >
                 <animateMotion begin="startButton.mouseover"  end="stopGreen.mouseover" 
                     dur="5s" repeatCount="3" rotate="auto" fill="freeze" restart="whenNotActive" >
                     <mpath xlink:href="#t_path" />
                </animateMotion>
        </circle>`    

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

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

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

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

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

<svg version = "1.1"
     baseProfile="full"
     xmlns = "http://www.w3.org/2000/svg" 
     xmlns:xlink = "http://www.w3.org/1999/xlink"
     xmlns:ev = "http://www.w3.org/2001/xml-events"
         width="25%" height="45%"
         viewBox="0 0 210 210"  >
 
<defs>
	<style type="text/css"><![CDATA[
		#startButton:hover {
			text-decoration: underline;
			fill:green;
			opacity: 0.5;
			 			}
		#stop:hover{
		    opacity: 0.5; 
		           }	 
			 ]]>
			 
	 </style>  
 <marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5" 
            markerUnits="strokeWidth" orient="auto"
              markerWidth="4" markerHeight="3">
            <polyline points="0,0 10,5 0,10 1,5" fill="black" />
 </marker>
		<pattern id="bluepattern" patternUnits="userSpaceOnUse"
				x="0" y="0" width="5" height="5"
				viewBox="0 0 10 10" >
				
			<line x1="0" y1="0" x2="10" y2="0" stroke="grey" fill="none"  />
			<line x1="0" y1="0" x2="0" y2="5" stroke="grey" fill="none"  />
		</pattern>
</defs>	
	   <rect x="0" y="0" width="100%" height="100%" fill="url(#bluepattern)" stroke="black" />
	
        <path id="t_path" d="M10,150 A6 15 180 0 1 70 140 A5 10 180 0 0 130 130 A15 55 180 0 1 190 120 A45 10 170 0 1 10 150" marker-mid="url(#mark_path)" stroke="grey" stroke-width="2" fill="none"   />


		<circle r="7" cx="2" cy="2" fill="yellowgreen" stroke="green" >
			 <animateMotion begin="startButton.mouseover"  end="stopGreen.mouseover" 
				 dur="5s" repeatCount="3" rotate="auto" fill="freeze" restart="whenNotActive" >
				 <mpath xlink:href="#t_path" />
			</animateMotion>
		</circle>

	<circle r="7" cx="2.5" cy="2.5" fill="yellow" stroke="green" >
		 <animateMotion  begin="startButton.mouseover+0.25s" end="stopYellow.mouseover"
			 dur="5s" repeatCount="2" rotate="auto" fill="freeze" restart="whenNotActive" >
			 <mpath xlink:href="#t_path" />
		</animateMotion>
	</circle>

		<circle r="7" cx="2.5" cy="2.5" fill="red" stroke="crimson" >
			 <animateMotion begin="startButton.mouseover+0.5s" end="stopRed.mouseover"
				 dur="5s"  repeatCount="1" rotate="auto" fill="freeze" restart="whenNotActive" > 
				 <mpath xlink:href="#t_path" />
			</animateMotion>
		</circle>
	<g 	id="startButton">
	<rect  x="20" y="20" rx="3" ry="3" width="60" height="20" fill="grey" />
	<text  x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle" 
    fill="white" >Start</text> 
	</g>
	
	<g id="stop" fill-opacity="1">	
       <rect  x="180" y="140" rx="3" ry="3" width="20" height="60" fill="none" stroke-width="2px" stroke="#c3c3c3" />   		
		<g id="stopRed" >
			<circle  r="6" cx="190" cy="150" fill="none" stroke="black"  />	
			<circle  r="4" cx="190" cy="150" fill="red"  />	
		</g>	
			<g id="stopYellow" >
				<circle  r="6" cx="190" cy="170" fill="none" stroke="black"  />	
				<circle  r="4" cx="190" cy="170" fill="yellow" stroke="orange"  />	
			</g>
		<g id="stopGreen" >
			<circle r="6" cx="190" cy="190" fill="none" stroke="black"  />	
			<circle  r="4" cx="190" cy="190" fill="green" stroke="orange"  />	
		</g>		
		
	</g>
		<text  x="170" y="170"  transform="rotate(-90 170,170)" 
		  font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray"  >Stop
		</text>
</svg>

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

Вариант #2

  1. Объекты движения заменены на более сложные (ведьмы на метлах)
  2. Изменена траектория движения (заменяем патч <path id="t_path")
  3. Разная скорость движения объектов регулируется временем анимации - dur="12s" и разным количеством повторов - repeatCount="2" у каждого объекта движения.

   <svg version = "1.1"
 baseProfile="full"
 xmlns = "http://www.w3.org/2000/svg" 
 xmlns:xlink = "http://www.w3.org/1999/xlink"
 xmlns:ev = "http://www.w3.org/2001/xml-events"
     width="60%" height="60%"
     viewBox="0 0 300 200" >
 
<defs>
<style type="text/css"><![CDATA[
	#startButton:hover {
		text-decoration: underline;
		fill:green;
		opacity: 0.5;
		 			}
	#stop:hover{
	    opacity: 0.5; 
	           }	 
		 ]]>
		 
 </style>  
 <marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5" 
        markerUnits="strokeWidth" orient="auto"
          markerWidth="4" markerHeight="3">
        <polyline points="0,0 10,5 0,10 1,5" fill="black" />
 </marker>
 
  <linearGradient id="grad1" x2="0%" y2="100%"
		spreadMethod="pad" >
  <stop offset="0%" stop-color="skyblue"/>
  <stop offset="90%" stop-color="white"/> 
  <stop offset="100%" stop-color="yellowgreen"/>
</linearGradient>

  </defs>
	

   <rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" stroke="none" />

    <path id="t_path"  d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none"   />


	 <path id="balerina" transform="scale(0.08)  translate(-100 -200) " fill="darkblue"  d="M468 264c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C469 262 468 263 468 264z" fill-rule="evenodd">
	 <animateMotion  begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
		 dur="12s" repeatCount="1" rotate="auto" fill="freeze" restart="whenNotActive" >
		 <mpath xlink:href="#t_path" />
	</animateMotion>
	 </path>
	 
	  <path transform="  scale(0.2) scale(-1 1) translate(-10 -200) " fill="black"  d="m142.2 23.5c9-0.1 3.7-16.5 10.9-17.7 2.9-0.5 4 1.1 6.3 2.3 0.1 2.4-1.7 2.9-2.3 4.6 2.1 1.8 3.6-0.6 5.7-0.6 0.7 4-5.3 3.2-6.9 1.7-1.2-2.1 0.4-3.4 1.1-5.1-8.1-3.6-5 5.1-6.3 9.7-1.9 6.9-12.7 10.8-13.7 1.1-0.6-5.9 7.4-13.1 1.1-16.6-4.8 3.8-7.4 10.2-10.3 16-5.1 10.2-10.6 22.9-16.6 32.6 0.4 2.8 3.6 2.9 4.6 5.2 0.6 2.7-3.4 0.8-2.9 3.4 3.3 0.6 6.7-1.3 8.6-3.4 1.1-1.2 0.8-2.7 1.7-4 3.3-4.9 8-6.3 14.9-8.6 1.6-4 6.2-5.7 10.9-5.1 2-0.9 2.3-3.4 3.4-5.1 2.6-2.4 7.2-2.7 9.7-5.1-0.4-2.1-2.9-2.8-0.6-4.6 3.3-0.5 2.9 2.8 2.9 5.7-3 3-8.4 3.5-10.3 7.4 1.6 0.9 2.6 0 4.6 1.1 1.9-1.2 1.6-4.6 3.4-5.7 6.8-0.2 6.8-7.3 9.2-12 4.1 1.3-0.7 9.4-2.3 10.9-1.9 1.8-4.3 2-5.7 2.3-0.9 3.1-2.2 5.8-4.6 7.4-2 0.3-1.4-2-3.4-1.7-3 3-4.4 7.4-10.9 6.9-1.8 4.9-10.3 3-14.3 5.7-0.3 9.7-10.3 12.6-18.9 12 5.6 9.6 18 2.1 24.6-2.3 1.4-0.9 3-1.4 4.6-2.3 2.8-1.7 5.2-4.3 8-5.7 6.9-3.4 22.5-6 31.5-1.1-1.8 6.1-13.2-0.5-15.4 4.6 3.6 2.4 8.1 0.2 12 0.6 6.1 0.6 12.3 3.9 20.6 3.4 2.3 0.9 3 3.5 6.3 3.4 1.2 4.7 9.6 2.2 9.2 8.6-6.5 0.7-11.5-4.4-17.7-4.6-2.1-0.1-4.2 1.3-6.3 1.1-2.8-0.2-5.3-2.5-8-2.9-7.7-1-13.9 4.7-21.7 4.6-3.2 0-6.6-2.6-9.7-0.6 2.2 5 12 2.5 17.7 4 2.1-0.4 1.4 2 2.3 2.9 3.6-0.4 5.4 1 5.7 4 0.7 2.4-2.4 1-2.9 2.3 3 4.5 11.9 3 13.2 9.2-4.7 2.4-9.6-1.5-14.3-1.7-1.4-0.1-3.2 0.7-4.6 0.6-4.6-0.5-8.3-3.1-11.4-5.1-8.6-1.2-15.9 1.6-22.9 0-5.6-1.3-8.8-7.6-13.7-8.6-1.4 3.8 2.4 7 5.7 8 4.8 5.7 11.3 9.7 17.2 14.3 0.7 2.4 2.1 4 2.9 6.3 0.6 3.1-1.9 3-1.7 5.7 9.8 0.3 25-0.3 33.8 0 0.8 1 1.5 1.9 1.1 4-0.5-6.1 5.8-7.5 11.4-5.7 1 0.3 0 2.7 1.1 2.9 1.8 0.5 0.8-1.9 1.7-2.3 2 0.3 3.2-0.2 4.6-0.6 1.4 0.5 3.3 0.5 3.4 2.3 1.7 0 0.6-2.9 2.3-2.9 5.9-1.2 11.2-1.9 15.5-4.6 2.6-1.7 4.1-5.7 7.4-4.6 2-0.1 0.8 2.3 1.1 3.4 0.6 2.1 1.9 3.8 2.3 6.9 0.1 1.4-0.3 2.4-1.1 2.9 2.6 2.5-0.1 3.6 1.1 7.4 0.5 1.8-1.5 1.2-1.7 2.3-0.4 2.3 1.5 2.3 1.1 4.6-6.3 4.8-9.8-3.8-18.9-6.9-1.6-0.5-3.3-0.2-4.6-0.6-2.9-0.9-5-2.3-10.3-1.1-1.4-0.7-2.7-1.5-3.4-2.9-1.6 3.9-10.9 3.7-13.2 0.6-23-0.1-45 0.2-65.2-0.6 2.3 5.3 9 6.2 11.4 11.4 5.8 2.5 12.4 3.9 17.7 6.3 7 3.2 11.6 8.5 14.9 16 1.9-0.3 2.7 0.4 4 0.6 3.9 8.1 20.8 3.2 26.9 9.2 1.5-0.1-0.8-1 0-2.3 2.6 1.7 3.1 4.8 5.2 6.9 2 2 5.3 2.7 7.4 4.6 1.2 1 5.5 5.9 6.3 7.4 3.8 7.9 0.3 19.3-6.3 22.9-3.7 2-10.7 3.3-17.7 2.9-14.9-0.8-28.6-11.6-46.9-12.6-11.4-0.6-23.7 3-32.6 5.7-7.5 2.3-13.1 4.9-18.9 9.7-1.5 2.5-4 4.1-6.9 5.1-1.6-4.6 4.6-6.5 5.7-10.3 5.6-2.8 11.2-5.6 16.6-8.6 7.5-1.7 15.4-4.4 23.5-5.1 3.6-0.3 7.2 0.9 10.3-1.1 4.9 2 8.4 0.6 13.2 1.1 1.9 0.2 4.1 1.4 6.3 1.7 7.8 1 12.9 3.1 21.7 5.2 5.9 1.3 14.8 6.4 22.9 3.4 4.3-1.5 6.4-7.2 5.7-13.2-0.8-6.5-8.6-15.3-15.4-18.3-3.6-1.6-7.7-0.9-10.3-3.4-1.8-0.5-1.2 1.5-2.3 1.7-13.2-1.4-23.6-3.8-30.3-10.9-3.5-3.7-7.1-8.3-12.6-10.9-0.1 5.3 9.5 5.8 10.9 11.4-4-1.2-8-4.1-12.6-5.1-3.9-0.9-8.4-0.6-12-1.7-5.7-1.8-8.9-6-13.7-8-1-3.8-4.3-5.2-5.1-9.2-5.6-2-9.4-5.8-10.9-12-8.1 0.5-15.2 0.1-22.9 0-20-0.2-42 1.6-64.7-0.6-0.6-1.5-0.1-2.9 0.6-4.6 5.7 0.9 9.9 0 16 0 6.9-4.2 13.5-8.6 17.7-15.4-1.6-3-7.9-1.3-8.6-5.1-1.6 0.1-1.6 1.8-2.9 2.3-1.9-0.2-1.1-3.1-2.3-4 1.5-1.6 5.5-0.1 6.3-3.4-0.1-2.8-4-1.7-2.9-5.7 3-0.3 2.6 2.8 4 4 4.5 0.9 3.1-4.2 6.9-4 0.3 3.6 0.5 5.6 3.4 5.7 3.7 0.1 4.6-5.4 4.6-8 4.4-0.9 8.2-1.5 12-1.7-2.3-3.4-2.8-8.6-4.6-12.6 1.6-2.5 0.5-5.2 1.1-7.4 1.1-3.7 4-6.2 5.7-9.7 0.3-1.1-0.8-3.4 1.1-2.9-0.5-1.5-1.2-2.4-1.1-4 0.1-1.3 1.9-3.6 2.9-5.1 0.1-0.1 0.4-2.2 0.6-2.3 1.1-0.9 4.1-0.5 4.6-1.1 1.3 6.2 0.8 14.5-2.3 20.6-1.1 2.1-0.9 4.5-2.9 6.3 0.2 2.4 2 5.4 0 8.6 1.6 4.2 1.3 7.8 0.6 12.6-0.1 0.6 0.6 1.7 0.6 1.7-0.6 2.9-2.8 4.1-3.4 6.9-0.4 1.7 0.2 3.6 0 5.2-0.9 8.6-7.1 11.6-10.9 18.3 6.6 2.8 6.1-1.3 10.3-4.6 1.6-1.2 3.8-1.5 4.6-2.3 2.3-2.2 3-6.1 6.3-8 1.5-0.9 3.9-1.5 5.7-2.3 4.3-1.8 10.2-4 14.3-8 2.5-2.4 3-5.2 6.3-6.9 0.4-2.9 1.7-4.7 2.3-7.4 2.6-1.6 4.4-3.9 5.7-6.9-2.1-1.8-2.1 2.1-5.1 1.1-1.7-1.8-2.6-4.2-5.1-5.1-3.5 0.8-6.5 4.9-10.9 2.9 0.8-5.3 6.8-5.4 10.9-7.4-0.2-3.8-6.8-1.2-7.4-4.6 1.6-3.7 8.6-2 12-4 14.4-15.2 26.5-32.7 40.1-48.6 2.9 1.8 5.8 2.9 6.3 5.7 1 5.2-7.8 13.2-1.1 17.7zm1.1 20.6c1.2-1 4.7 0.1 5.7-1.1-2.1-0.4-5.2-1.3-5.7 1.1zm-26.3 55.5c-4.3-4.3-9.5-10.5-15.4-8.6-5.3 1.7-9.9 13.4-17.2 13.2-0.3 1.8-1.1 3.1-1.1 5.2 1.8 0.9 2 3.3 5.2 2.9 1.1-9 10-12.6 20.6-11.4 4.8 0.5 9.3 4.2 13.2 2.3-0.7-2.2-2.6-3.1-5.1-3.4zm-69.2-8.6c-2.2 4.2-5 8-9.7 9.7-2.3 5.9-9.4 7-12 12.6 4-0.6 8.5-0.7 13.2-0.6 5.8-4.8 16.2-12.4 12-21.7-1.1 0-2.3 0-3.4 0zm36.1 6.9c-3.2 3.7-10 3.8-14.3 6.3 0.3 4.5-3.3 5.1-4 8.6 2.3 0.9 5.3-1.1 6.9-2.3 4.4-3.4 7.8-8.8 12.6-11.4-0.1-0.7-0.2-1.4-1.1-1.1zm-25.7 14.9c2.2 1.1 4.5 0.3 4-2.9-2 0.2-3.1 1.4-4 2.9zm17.7 0c2.1-0.5 2.8 1.3 4 0 0.2-2.9-4-2.7-4 0zm49.2 23.5c0.8-1.7 0.5-3.3-1.7-3.4 0.5 1.3 0.3 3.1 1.7 3.4zm5.2 6.3c-0.3-2.3-1.3-4.1-3.4-4.6-1.3 2 1.6 3.9 3.4 4.6z" fill-rule="evenodd">
	 <animateMotion  begin="startButton.mouseover+1s" end="stopRed.mouseover"
		 dur="4s" repeatCount="4" rotate="auto" fill="freeze" restart="whenNotActive" >
		 <mpath xlink:href="#t_path" />
	</animateMotion>
	 </path>

<circle r="7" cx="2.5" cy="2.5" fill="yellow" stroke="green" >
	 <animateMotion  begin="startButton.mouseover+0.25s" end="stopYellow.mouseover"
		 dur="8s" repeatCount="2" rotate="auto" fill="freeze" restart="whenNotActive" >
		 <mpath xlink:href="#t_path" />
	</animateMotion>
</circle>

	
<g 	id="startButton" transform="scale(0.7) translate(-20 -20)" >
<rect  x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" />
<text  x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle" 
fill="white" >Start</text> 
</g>
 <g transform="translate(95 -5)">
<g id="stop" fill-opacity="1" >	
   <rect  x="180" y="140" rx="3" ry="3" width="20" height="60" fill="none" stroke-width="2px" stroke="#c3c3c3" />   		
	<g id="stopRed" >
		<circle  r="6" cx="190" cy="150" fill="none" stroke="black"  />	
		<circle  r="4" cx="190" cy="150" fill="black"  />	
	</g>	
		<g id="stopYellow" >
			<circle  r="6" cx="190" cy="170" fill="none" stroke="black"  />	
			<circle  r="4" cx="190" cy="170" fill="yellow" stroke="orange"  />	
		</g>
	<g id="stopTeal" >
		<circle r="6" cx="190" cy="190" fill="none" stroke="black"  />	
		<circle  r="4" cx="190" cy="190" fill="darkblue" stroke="orange"  />	
	</g>		
	
</g>
	<text  x="170" y="170"  transform="rotate(-90 170,170)" 
	  font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray"  >Stop
	</text>
</g>	
</svg>

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

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

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.