2

elem = document.querySelectorAll("path");
function task(i) { 
  setTimeout(function() { 
      elem[i].animate({fill: 'green'},  { 
  // timing options
  duration: 150,
  iterations: 1 
});
  }, 150*i); 
} 
for(var i=0;i<8;i++){
task(i);
}
<svg id="loader" width="254" height="254" viewBox="0 0 254 254" fill="none" xmlns="http://www.w3.org/2000/svg">
<path  d="M138.015 34.5808C117.296 32.0597 97.1508 36.6367 80.1964 46.5191L71.6421 32.9501C91.9092 21.0282 116.102 15.5873 140.949 18.8694L138.015 34.5808Z" fill="#EEEEEE"/>
<path d="M203.656 74.5674C191.286 56.3592 172.481 42.5299 149.774 36.777L152.706 21.0752C179.936 27.7257 202.455 44.2535 217.124 66.077L203.656 74.5674Z" fill="#EEEEEE"/>
<path d="M219.029 137.837C221.314 119.063 217.771 100.762 209.733 84.8775L223.247 76.3584C233.303 95.5622 237.715 117.885 234.731 140.769L219.029 137.837Z" fill="#EEEEEE"/>
<path d="M179.116 203.428C197.288 191.057 211.088 172.272 216.833 149.596L232.545 152.53C225.94 179.766 209.459 202.302 187.676 217.005L179.116 203.428Z" fill="#EEEEEE"/>
<path d="M115.774 218.851C134.578 221.139 152.91 217.58 168.812 209.515L177.407 223.148C158.161 233.274 135.767 237.725 112.808 234.731L115.774 218.851Z" fill="#EEEEEE"/>
<path d="M53.429 183.416C65.7319 199.368 83.2405 211.392 104.014 216.655L101.047 232.545C75.6752 226.392 54.3812 211.669 39.6992 192.072L53.429 183.416Z" fill="#EEEEEE"/>
<path d="M46.7421 173.491C36.8287 156.52 32.2341 136.346 34.759 115.595L18.8694 112.628C15.5774 137.55 21.0611 161.813 33.0578 182.118L46.7421 173.491Z" fill="#EEEEEE"/>
<path d="M21.0752 100.871L36.9552 103.836C42.2262 83.0316 54.2774 65.502 70.2645 53.1963L61.6752 39.5718C42.039 54.2239 27.2708 75.5031 21.0752 100.871Z" fill="#EEEEEE"/>

</svg>

У меня есть 8 разных paths. Я хочу создать анимацию загрузки, изменив цвет отдельного paths после определенного интервала, чтобы это выглядело, как вращающийся loader, как показано на рисунке.
Но я могу запустить его только один раз. Если я пытаюсь написать бесконечный цикл, моя страница не загружается и падает. Пожалуйста, помогите мне решить эту проблему.

Свободный перевод вопроса How to make svg animation loop continous in javascript от участника @yogendra maarisetty.

1

2 ответа 2

2

Для этого не нужно использовать API анимации.

Вы можете сделать спиннер только с использованием CSS.

svg#loader > path {
    animation-name: go;
    animation-duration: 1200ms;
    animation-iteration-count: infinite;
}

svg#loader > path:nth-child(2) { animation-delay: 150ms }
svg#loader > path:nth-child(3) { animation-delay: 300ms }
svg#loader > path:nth-child(4) { animation-delay: 450ms }
svg#loader > path:nth-child(5) { animation-delay: 600ms }
svg#loader > path:nth-child(6) { animation-delay: 750ms }
svg#loader > path:nth-child(7) { animation-delay: 900ms }
svg#loader > path:nth-child(8) { animation-delay: 1050ms }

@keyframes go {
    0% {
        fill: #EEEEEE;
    }
    12.5% {
        fill: green;
    }
    25% {
        fill: #EEEEEE;
    }
}
<svg id="loader" width="254" height="254" viewBox="0 0 254 254" fill="none" xmlns="http://www.w3.org/2000/svg">
<path  d="M138.015 34.5808C117.296 32.0597 97.1508 36.6367 80.1964 46.5191L71.6421 32.9501C91.9092 21.0282 116.102 15.5873 140.949 18.8694L138.015 34.5808Z" fill="#EEEEEE"/>
<path d="M203.656 74.5674C191.286 56.3592 172.481 42.5299 149.774 36.777L152.706 21.0752C179.936 27.7257 202.455 44.2535 217.124 66.077L203.656 74.5674Z" fill="#EEEEEE"/>
<path d="M219.029 137.837C221.314 119.063 217.771 100.762 209.733 84.8775L223.247 76.3584C233.303 95.5622 237.715 117.885 234.731 140.769L219.029 137.837Z" fill="#EEEEEE"/>
<path d="M179.116 203.428C197.288 191.057 211.088 172.272 216.833 149.596L232.545 152.53C225.94 179.766 209.459 202.302 187.676 217.005L179.116 203.428Z" fill="#EEEEEE"/>
<path d="M115.774 218.851C134.578 221.139 152.91 217.58 168.812 209.515L177.407 223.148C158.161 233.274 135.767 237.725 112.808 234.731L115.774 218.851Z" fill="#EEEEEE"/>
<path d="M53.429 183.416C65.7319 199.368 83.2405 211.392 104.014 216.655L101.047 232.545C75.6752 226.392 54.3812 211.669 39.6992 192.072L53.429 183.416Z" fill="#EEEEEE"/>
<path d="M46.7421 173.491C36.8287 156.52 32.2341 136.346 34.759 115.595L18.8694 112.628C15.5774 137.55 21.0611 161.813 33.0578 182.118L46.7421 173.491Z" fill="#EEEEEE"/>
<path d="M21.0752 100.871L36.9552 103.836C42.2262 83.0316 54.2774 65.502 70.2645 53.1963L61.6752 39.5718C42.039 54.2239 27.2708 75.5031 21.0752 100.871Z" fill="#EEEEEE"/>

</svg>

Свободный перевод ответа How to make svg animation loop continous in javascript от участника @ggrn124.

2

Вам нужно как минимум 2 ключевых кадра (от белого до зеленого), и вы должны поместить ключевые кадры в квадратные скобки. Также вам не нужно использовать setTimeout. Используйте задержку.

let elem = document.querySelectorAll("path");

function task(i) {
  elem[i].animate([{ fill: "white" }, { fill: "green" }], {
    // timing options
    duration: 150*elem.length,
    iterations: Infinity,
    delay: 150 * (i-1)
  });
}
for (var i = 0; i < elem.length; i++) {
  task(i);
}
body{background:black}
<svg id="loader" width="254" height="254" viewBox="0 0 254 254" fill="none" xmlns="http://www.w3.org/2000/svg">
<path  d="M138.015 34.5808C117.296 32.0597 97.1508 36.6367 80.1964 46.5191L71.6421 32.9501C91.9092 21.0282 116.102 15.5873 140.949 18.8694L138.015 34.5808Z" fill="#EEEEEE"/>
<path d="M203.656 74.5674C191.286 56.3592 172.481 42.5299 149.774 36.777L152.706 21.0752C179.936 27.7257 202.455 44.2535 217.124 66.077L203.656 74.5674Z" fill="#EEEEEE"/>
<path d="M219.029 137.837C221.314 119.063 217.771 100.762 209.733 84.8775L223.247 76.3584C233.303 95.5622 237.715 117.885 234.731 140.769L219.029 137.837Z" fill="#EEEEEE"/>
<path d="M179.116 203.428C197.288 191.057 211.088 172.272 216.833 149.596L232.545 152.53C225.94 179.766 209.459 202.302 187.676 217.005L179.116 203.428Z" fill="#EEEEEE"/>
<path d="M115.774 218.851C134.578 221.139 152.91 217.58 168.812 209.515L177.407 223.148C158.161 233.274 135.767 237.725 112.808 234.731L115.774 218.851Z" fill="#EEEEEE"/>
<path d="M53.429 183.416C65.7319 199.368 83.2405 211.392 104.014 216.655L101.047 232.545C75.6752 226.392 54.3812 211.669 39.6992 192.072L53.429 183.416Z" fill="#EEEEEE"/>
<path d="M46.7421 173.491C36.8287 156.52 32.2341 136.346 34.759 115.595L18.8694 112.628C15.5774 137.55 21.0611 161.813 33.0578 182.118L46.7421 173.491Z" fill="#EEEEEE"/>
<path d="M21.0752 100.871L36.9552 103.836C42.2262 83.0316 54.2774 65.502 70.2645 53.1963L61.6752 39.5718C42.039 54.2239 27.2708 75.5031 21.0752 100.871Z" fill="#EEEEEE"/>

</svg>

Свободный перевод ответа How to make svg animation loop continous in javascript от участника @enxaneta.

Ваш ответ

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

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