Как перебирать элементы пути и анимировать каждый из них один за другим?

Question

Моя следующая попытка действительно анимируется, но все пути отображаются одновременно.

Я хочу анимировать один path за другим. Как этого добиться?

(function () {
    var button = document.querySelector('.animate');
    button.onclick = function (event) {
        var paths = document.querySelectorAll('path'); 
        for (var i = 0; i < paths.length; i++) {
            var path = paths[i];
            var length = path.getTotalLength();
            // Очистить все предыдущие transition
            path.style.transition = path.style.WebkitTransition = 'none';
            // Установить позицию старта 
            path.style.strokeDasharray = length + ' ' + length;
            path.style.strokeDashoffset = length;
            // Запустить макет, чтобы стили вычислялись и браузер
            // подберет исходную позицию перед анимацией
            path.getBoundingClientRect();
            // Определите ваш переход
            path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
            // Go!
            path.style.strokeDashoffset = '0';
        }
    };
}());

  <div>

        <svg width="100" height="100" viewBox="0 0 100 100"
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
             xml:space="preserve" version="1.1"
             baseProfile="full"> 
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88"
      style="fill:none;stroke:black;stroke-width:2" />

<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59"
      style="fill:none;stroke:black;stroke-width:2" />

<path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0"
      style="fill:none;stroke:black;stroke-width:2" />

<path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29"
      style="fill:none;stroke:black;stroke-width:2" />

<path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95"
      style="fill:none;stroke:black;stroke-width:2" />

<path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82"
      style="fill:none;stroke:black;stroke-width:2" />

</svg>
    </div>
    <p><button class="animate">Animate</button></p>

_{Свободный перевод вопроса How to iterate through path elements and animate each of them one after another? от участника @Not A Zoomed Image.}

Answer 1

Просто установите transition delay. Это дополнительный аргумент к сокращению `path.style.transition, которое вы уже используете.

Если вы не хотите устанавливать стили для каждого path, примените CSS к элементу path или дайте путям класс и примените CSS к классу. Вы даже можете поместить стиль в родительский элемент <svg>, и он будет каскадно переходить к элементам <path>. Если бы это не был snippet, я бы поместил CSS в тег <style> или включил бы его из другого файла с помощью тега <link>.

(function () {
    var button = document.querySelector('.animate');
    button.onclick = function (event) {
        var paths = document.querySelectorAll('path'); 
        for (var i = 0; i < paths.length; i++) {
            var path = paths[i];
            var length = path.getTotalLength();
            // Очистить любые предыдущие transition
            path.style.transition = path.style.WebkitTransition = 'none';
            // Установите исходные позиции
            path.style.strokeDasharray = length + ' ' + length;
            path.style.strokeDashoffset = length;
            // Запустить макет, чтобы стили вычислялись и браузер
            // подберет исходную позицию перед анимацией
            path.getBoundingClientRect();
            // Определите ваш переход
            path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out ' + (2 * i) + 's';
            // Go!
            path.style.strokeDashoffset = '0';
        }
    };
}());

path {
  fill:none;
  stroke:black;
  stroke-width:2;
}

<div>

        <svg width="100" height="100" viewBox="0 0 100 100"> 
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" />

<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" />

<path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0"/>

<path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29"/>

<path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" />

<path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82"/>

</svg>
    </div>
    <p><button class="animate">Animate</button></p>

_{Свободный перевод ответа от участника @Robert Longson.}

БЛОГ НА HUSL

Как перебирать элементы пути и анимировать каждый из них один за другим?

Ответы (1 шт):