Анимировать по очереди SVG Path

382

21 февраля 2017, 19:22

Как анимировать сначала первый тег path, а затем другой?

function ready() { 
 
  var path; 
  var elem = document.getElementById("elem"); 
  var line = elem.getElementsByTagName("path"); 
 
  for (var i = 0; line.length > i; i++) { 
 
    line[i].style.strokeDashoffset = path; 
    line[i].style.strokeDasharray = path; 
    path = line[i].getTotalLength(); 
 
    document.getElementById("btn").onclick = function() { 
      var int = setInterval(draw, 50); 
 
      function draw() { 
        if (path <= 0) { 
          clearInterval(int); 
        } else { 
          path += 20 * (-1); 
          line[i].style.strokeDashoffset = path; 
        } 
      } 
    } 
  } 
} 
 
document.addEventListener("DOMContentLoaded", ready);

<button id="btn">click</button> 
 
<svg version="1.1" id="elem" class="elem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> 
  <path style="fill:none;stroke:#2A2874;stroke-miterlimit:10;" d="M58.8,49.9c-8.5,24.3-8.9,50.7-15.4,75.7 c-3.7,13.9-10.4,28.6-23.6,34.2c-4.2-9.4-0.4-20.3,3.5-29.8c8.8-21.4,18.4-42.8,32.1-61.5c6.2-8.5,14.7-17.1,25.3-16.8 c1,0,2,0.1,2.8,0.6c1.5,0.9,2,2.7,2.3,4.4c1.5,9.1-1.1,18.5-5.6,26.6c-4.5,8-10.9,14.9-17.4,21.4c4.1,0.8,8.3,0.6,12.4,1.2 s8.4,2.3,10.5,5.8c3.4,5.6,0.1,12.8-3.5,18.2c-5.8,8.7-14,17.7-24.5,17.2c12.4-16.9,33.9-23.7,51.5-35.1c13.5-8.8,25-20.8,33.3-34.6 c3.6-6.1,6.8-13.1,5.6-20.1c-0.5-3.3-2.2-6.6-5.2-8c-4,14.9-2,30.8-4.5,46c-2.4,14.6-8.9,28.1-15.3,41.4c-1.7,3.5-3.4,7.1-6.3,9.7 c-2.9,2.6-7.1,4.1-10.7,2.5c-1.9-0.8-3.5-2.7-3.4-4.7c0.2-2.5,3-4.2,5.5-3.9s4.6,1.8,6.4,3.6c4.3,4.3,7.5,10,12.8,12.9 c4.8,2.6,10.8,2.6,15.9,0.8c5.2-1.8,9.7-5.2,13.7-8.9c14-13.1,23-31.3,25-50.4c1.9-19.1-3.3-38.7-14.4-54.4 c-4.8-6.7-10.5-12.6-16.4-18.4c-3.5-3.5-7.1-7-11.5-9.2c-9.7-4.9-21.3-3-31.8-0.4c-19.3,4.8-38.2,11.3-56.3,19.6 c-7.9,3.6-16.1,7.9-21,15.1c-3.6,5.2-5.1,11.6-6.1,17.8c-1.3,8.1-1.8,16.9,2.2,24.1c3.3,5.9,9.1,9.8,15,13.2 c27.1,15.8,58.3,24.8,89.7,25.8c5,0.2,10.1,0.1,14.9-1.5c3.6-1.2,6.9-3.3,10.1-5.4c12.3-7.9,24.5-15.8,36.8-23.6 c3.2-2.1,6.9-5.5,5.4-9"/> 
  <path style="fill:none;stroke:#195A2D;stroke-miterlimit:10;" d="M14.8,180.6c2.4-0.7,4.3-2.6,6.4-3.9 c6.2-3.7,14.3-1.9,21,0.8s13.5,6.3,20.8,5.9c8.4-0.5,15.8-6.5,24.2-6.8c11.5-0.5,21.7,9.4,33.2,8.7c8.9-0.6,17.1-7.5,25.9-5.9 c4.3,0.8,8.1,3.6,12.4,4.5c5.9,1.3,11.9-1.2,17.4-3.6c1.9-0.8,4.1-2.6,3.1-4.4"/> 
</svg>

Answer 1

Pure SVG

   <svg  version="1.1" id="elem" class="elem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 width="200" height="200" viewBox="0 0 200 200" style="enable-background:new 0 0 100 100;" xml:space="preserve"> 
 
 
 <path style="fill:none;stroke:#2A2874;stroke-miterlimit:10;" stroke-width="2" stroke-dasharray="1243"  stroke-dashoffset="1243" d="M 58.8,49.9 C 50.3,74.2 49.9,100.6 43.4,125.6 39.7,139.5 33,154.2 19.8,159.8 15.6,150.4 19.4,139.5 23.3,130 32.1,108.6 41.7,87.2 55.4,68.5 61.6,60 70.1,51.4 80.7,51.7 c 1,0 2,0.1 2.8,0.6 1.5,0.9 2,2.7 2.3,4.4 1.5,9.1 -1.1,18.5 -5.6,26.6 -4.5,8 -10.9,14.9 -17.4,21.4 4.1,0.8 8.3,0.6 12.4,1.2 4.1,0.6 8.4,2.3 10.5,5.8 3.4,5.6 0.1,12.8 -3.5,18.2 -5.8,8.7 -26.208203,32.84354 -24.5,17.2 1.708203,-15.64354 33.9,-23.7 51.5,-35.1 13.5,-8.8 25,-20.8 33.3,-34.6 3.6,-6.1 6.8,-13.1 5.6,-20.1 -0.5,-3.3 -2.81735,-10.298475 -5.2,-8 -9.67278,9.331069 -2,30.8 -4.5,46 -2.4,14.6 -8.9,28.1 -15.3,41.4 -1.7,3.5 -3.4,7.1 -6.3,9.7 -2.9,2.6 -7.1,4.1 -10.7,2.5 -1.9,-0.8 -3.5,-2.7 -3.4,-4.7 0.2,-2.5 3,-4.2 5.5,-3.9 2.5,0.3 4.6,1.8 6.4,3.6 4.3,4.3 7.5,10 12.8,12.9 4.8,2.6 10.8,2.6 15.9,0.8 5.2,-1.8 9.7,-5.2 13.7,-8.9 14,-13.1 23,-31.3 25,-50.4 1.9,-19.1 -3.3,-38.7 -14.4,-54.4 -4.8,-6.7 -10.5,-12.6 -16.4,-18.4 -3.5,-3.5 -7.1,-7 -11.5,-9.2 -9.7,-4.9 -21.3,-3 -31.8,-0.4 -19.3,4.8 -38.2,11.3 -56.3,19.6 -7.9,3.6 -16.1,7.9 -21,15.1 -3.6,5.2 -5.1,11.6 -6.1,17.8 -1.3,8.1 -1.8,16.9 2.2,24.1 3.3,5.9 9.1,9.8 15,13.2 27.1,15.8 58.3,24.8 89.7,25.8 5,0.2 10.1,0.1 14.9,-1.5 3.6,-1.2 6.9,-3.3 10.1,-5.4 12.3,-7.9 24.5,-15.8 36.8,-23.6 3.2,-2.1 6.9,-5.5 5.4,-9"> 
  <animate id="an1" attributeName="stroke-dashoffset" begin="0;an2.end+1s"  
     values="1243; 0" dur="8s"  fill="freeze" calcMode="linear" restart="whenNotActive" />      
</path>		  
 
	   <path style="fill:none;stroke:#195A2D;stroke-miterlimit:10;" stroke-width="2" stroke-dasharray="175"  stroke-dashoffset="175" d="M14.8,180.6c2.4-0.7,4.3-2.6,6.4-3.9 
        c6.2-3.7,14.3-1.9,21,0.8s13.5,6.3,20.8,5.9c8.4-0.5,15.8-6.5,24.2-6.8c11.5-0.5,21.7,9.4,33.2,8.7c8.9-0.6,17.1-7.5,25.9-5.9 
        c4.3,0.8,8.1,3.6,12.4,4.5c5.9,1.3,11.9-1.2,17.4-3.6c1.9-0.8,4.1-2.6,3.1-4.4"> 
		 <animate id="an2" attributeName="stroke-dashoffset" begin="an1.end"  
     values="175; 0" dur="2s"    calcMode="linear" restart="whenNotActive" />      
	 </path> 
    </svg>

Добавил viewport width="200" height="200", так как без этого подпись была на весь экран. Исправил path, так как в статике не видно было разрыва линии, но при анимации на месте разрыва была остановка.
добавил строки, реализующие анимацию c id="an1"и id="an2" соответственно Начало первой анимации команда begin="0" Второй анимации - begin="an1.end", то есть видно, что она запускается после окончания первой анимации. Команда - restart="whenNotActive" служит для запрета повторной анимации, пока не закончилась текущая анимация.

Принцип действия

Линия скрывается установкой stroke-dashoffset равной длине пути. А затем stroke-dashoffset уменьшается до нуля, тем самым реализуя эффект рисования линии. Подробнее здесь.
Длину линии, которую будем подставлять, можно вычислить по этому способу. Это важно, так как наугад подставлять длину в stroke-dashoffset не стоит. Если её длина будет намного больше реальной длины патча, то будет задержка между анимациями, если меньше, то часть линии будет всегда видна.

Answer 2

С одним тегом работает скрипт html:

<button id="btn">click</button>
<svg version="1.1" class="elem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
            <path id="elem" style="fill:none;stroke:#2A2874;stroke-miterlimit:10;" d="M58.8,49.9c-8.5,24.3-8.9,50.7-15.4,75.7
            c-3.7,13.9-10.4,28.6-23.6,34.2c-4.2-9.4-0.4-20.3,3.5-29.8c8.8-21.4,18.4-42.8,32.1-61.5c6.2-8.5,14.7-17.1,25.3-16.8
            c1,0,2,0.1,2.8,0.6c1.5,0.9,2,2.7,2.3,4.4c1.5,9.1-1.1,18.5-5.6,26.6c-4.5,8-10.9,14.9-17.4,21.4c4.1,0.8,8.3,0.6,12.4,1.2
            s8.4,2.3,10.5,5.8c3.4,5.6,0.1,12.8-3.5,18.2c-5.8,8.7-14,17.7-24.5,17.2c12.4-16.9,33.9-23.7,51.5-35.1c13.5-8.8,25-20.8,33.3-34.6
            c3.6-6.1,6.8-13.1,5.6-20.1c-0.5-3.3-2.2-6.6-5.2-8c-4,14.9-2,30.8-4.5,46c-2.4,14.6-8.9,28.1-15.3,41.4c-1.7,3.5-3.4,7.1-6.3,9.7
            c-2.9,2.6-7.1,4.1-10.7,2.5c-1.9-0.8-3.5-2.7-3.4-4.7c0.2-2.5,3-4.2,5.5-3.9s4.6,1.8,6.4,3.6c4.3,4.3,7.5,10,12.8,12.9
            c4.8,2.6,10.8,2.6,15.9,0.8c5.2-1.8,9.7-5.2,13.7-8.9c14-13.1,23-31.3,25-50.4c1.9-19.1-3.3-38.7-14.4-54.4
            c-4.8-6.7-10.5-12.6-16.4-18.4c-3.5-3.5-7.1-7-11.5-9.2c-9.7-4.9-21.3-3-31.8-0.4c-19.3,4.8-38.2,11.3-56.3,19.6
            c-7.9,3.6-16.1,7.9-21,15.1c-3.6,5.2-5.1,11.6-6.1,17.8c-1.3,8.1-1.8,16.9,2.2,24.1c3.3,5.9,9.1,9.8,15,13.2
            c27.1,15.8,58.3,24.8,89.7,25.8c5,0.2,10.1,0.1,14.9-1.5c3.6-1.2,6.9-3.3,10.1-5.4c12.3-7.9,24.5-15.8,36.8-23.6
            c3.2-2.1,6.9-5.5,5.4-9"/>
        </svg>

js:

function ready() {
    var path;
    var line = document.getElementById("elem");
        path = line.getTotalLength();
        line.style.strokeDashoffset = path;
        line.style.strokeDasharray = path;
    document.getElementById("btn").onclick = function() {
            var int = setInterval(draw, 50);
            function draw() {
                if (path <= 0) {
                    clearInterval(int);
                } else {
                    path += 20 * (-1);
                    line.style.strokeDashoffset = path;
                }
            }
        }
}
document.addEventListener("DOMContentLoaded", ready);

Answer 3

Доработал патч, дуги стали более ровные, буквы немного подправил, добавил анимацию градиентов.

 <svg  version="1.1" id="elem" class="elem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     width="200" height="200" viewBox="0 0 200 200" > 
<defs> 
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" > 
        <animate  
          attributeName="offset"  
          from="0%" 
          to="100%" 
          begin="0s" dur="4s" repeatCount="indefinite"/> 
      </stop> 
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
    </linearGradient> 
  </defs> 
 
   <rect width="100%" height="100%" fill="url(#grad1)" />  
	 <path style="fill:none;stroke:white;stroke-miterlimit:10;" stroke-width="3" stroke-dasharray="1243"  stroke-dashoffset="1243" d="M 58.8,49.9 C 50.3,74.2 49.9,100.6 43.4,125.6 39.7,139.5 33,154.2 19.8,159.8 15.6,150.4 19.4,139.5 23.3,130 32.1,108.6 41.7,87.2 55.4,68.5 61.6,60 70.1,51.4 80.7,51.7 c 1,0 2,0.1 2.8,0.6 1.5,0.9 2,2.7 2.3,4.4 1.5,9.1 -1.1,18.5 -5.6,26.6 -4.5,8 -10.9,14.9 -17.4,21.4 4.1,0.8 8.3,0.6 12.4,1.2 4.1,0.6 8.4,2.3 10.5,5.8 3.4,5.6 0.1,12.8 -3.5,18.2 -5.8,8.7 -14,17.7 -24.5,17.2 12.4,-16.9 33.9,-23.7 51.5,-35.1 13.5,-8.8 25,-20.8 33.3,-34.6 3.6,-6.1 6.8,-13.1 5.6,-20.1 -9.3021,-22.522978 -8.72235,31.643578 -9.7,38 -2.4,14.6 -8.9,28.1 -15.3,41.4 -1.7,3.5 -3.4,7.1 -6.3,9.7 -21.996339,32.8476 -24.324622,-7.01388 -8.6,-6.1 2.5,0.3 4.6,1.8 6.4,3.6 4.3,4.3 7.5,10 12.8,12.9 4.8,2.6 10.8,2.6 15.9,0.8 5.2,-1.8 9.7,-5.2 13.7,-8.9 14,-13.1 23,-31.3 25,-50.4 1.9,-19.1 -3.3,-38.7 -14.4,-54.4 -36.0255,-46.9750306 -113.66513,-25.470006 -137,6.7 -3.6,5.2 -5.1,11.6 -6.1,17.8 -1.3,8.1 -1.8,16.9 2.2,24.1 3.3,5.9 9.1,9.8 15,13.2 28.505405,25.14337 156.17688,40.97193 155.59281,-12.066013"> 
  <animate id="an1" attributeName="stroke-dashoffset" begin="0;an2.end"  
         values="1243; 0" dur="8s"  fill="freeze" calcMode="linear" restart="whenNotActive" />      
</path>		  
 
		   <path style="fill:none;stroke:white;stroke-miterlimit:10;" stroke-width="5" stroke-dasharray="175"  stroke-dashoffset="175" d="M14.8,180.6c2.4-0.7,4.3-2.6,6.4-3.9 
            c6.2-3.7,14.3-1.9,21,0.8s13.5,6.3,20.8,5.9c8.4-0.5,15.8-6.5,24.2-6.8c11.5-0.5,21.7,9.4,33.2,8.7c8.9-0.6,17.1-7.5,25.9-5.9 
            c4.3,0.8,8.1,3.6,12.4,4.5c5.9,1.3,11.9-1.2,17.4-3.6c1.9-0.8,4.1-2.6,3.1-4.4"> 
			 <animate id="an2" attributeName="stroke-dashoffset" begin="an1.end"  
         values="175; 0" dur="4s"    calcMode="linear" restart="whenNotActive" />      
		 </path>  
       
		</svg>