如何在 javascript 中使 svg 动画循环连续

Question

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 条不同的路径。我想创建一个加载动画，通过在一定时间间隔后更改路径的颜色，使其看起来像旋转的加载器，如图所示。但是我只能运行它一次。如果我试图编写一个无限循环，我的页面永远不会加载并崩溃。请帮我解决这个问题。

Answer 1

不需要使用动画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>

Answer 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>

如何在 javascript 中使 svg 动画循环连续

How to make svg animation loop continous in javascript

javascript

animation

svg

loops

svg-animate