SVG 逐帧动画 (<g>)
SVG Frame by Frame Animation (<g>)
我正在尝试制作一个 SVG 动画，它循环分组的元素，这样您就有了逐帧动画。
我做了什么！
我遇到了 this post in 2012 that shows how to do it in SMIL but I can only get it to work if the animation only has 3 groups aka frames. I also tried using opacity instead of display however opacity gives a nasty flicker effect to the animation (unsure why). And I have no idea how I can tell it to delay at the end before it repeats the animation. Here's an example: https://jsfiddle.net/r0o459z8/
我最终做出了 SVGAnimFrames which works well in doing it in JS except if I call it twice on two different SVG's. Say the first vector (header) for example has more frames than the second (bounce) when header finishes and goes to restart it's animation bounce no longer plays because the counter variable was called twice on each and is recalled in SVGAnimFrames. The only way I can think of is running their animations in an iframe. Which I tried and got an error in console saying, "[Violation] Avoid using document.write()”。
因此我喜欢 SMIL 动画的想法，因此我的问题...
我怎样才能在 SMIL 中制作这个 "Frame By Frame SVG Animation" 使其适用于超过 3 帧？
如果 SMIL 动画不可能，为什么？
我可以用 SVGAnimFrames 做什么，我可以调用超过 1 个 svg 来制作动画并让它们的动画影响另一个（例如 header and/or 在 header 完成后弹跳不播放它的动画）？
body {
text-align: center;
padding: 1em;
background: rgb(71, 15, 89);
}
<svg style="isolation:isolate" viewBox="0 0 602.64 57.24">
<g>
<g>
<path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235,235)"></path>
<animate attributeName="display" values="inline;none;none;none;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
<g>
<path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235,235)"></path>
<path d=" M 55.008 56.088 L 40.32 6.552 L 56.592 6.552 L 64.224 37.44 L 71.856 6.552 L 88.848 6.552 L 73.368 56.088 L 55.008 56.088 Z " fill="rgb(235,235,235)"></path>
<animate attributeName="display" values="none;inline;none;none;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
<g>
<path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235,235)"></path>
<path d=" M 55.008 56.088 L 40.32 6.552 L 56.592 6.552 L 64.224 37.44 L 71.856 6.552 L 88.848 6.552 L 73.368 56.088 L 55.008 56.088 Z " fill="rgb(235,235,235)"></path>
<path d=" M 115.488 57.24 L 115.488 57.24 Q 108.216 57.24 102.384 53.748 L 102.384 53.748 L 102.384 53.748 Q 96.552 50.256 93.24 44.208 L 93.24 44.208 L 93.24 44.208 Q 89.928 38.16 89.928 30.888 L 89.928 30.888 L 89.928 30.888 Q 89.928 23.904 93.276 18.072 L 93.276 18.072 L 93.276 18.072 Q 96.624 12.24 102.6 8.856 L 102.6 8.856 L 102.6 8.856 Q 108.576 5.472 116.208 5.472 L 116.208 5.472 L 116.208 5.472 Q 120.384 5.472 124.308 6.408 L 124.308 6.408 L 124.308 6.408 Q 128.232 7.344 131.4 9.072 L 131.4 9.072 L 126.648 20.232 L 126.648 20.232 Q 121.752 18.216 117.504 18.216 L 117.504 18.216 L 117.504 18.216 Q 111.96 18.216 108.936 21.78 L 108.936 21.78 L 108.936 21.78 Q 105.912 25.344 105.912 31.104 L 105.912 31.104 L 105.912 31.104 Q 105.912 34.848 107.28 37.836 L 107.28 37.836 L 107.28 37.836 Q 108.648 40.824 111.132 42.552 L 111.132 42.552 L 111.132 42.552 Q 113.616 44.28 116.784 44.28 L 116.784 44.28 L 116.784 44.28 Q 118.512 44.28 119.664 43.992 L 119.664 43.992 L 119.664 32.4 L 132.12 30.96 L 132.12 53.496 L 132.12 53.496 Q 123.984 57.24 115.488 57.24 L 115.488 57.24 Z " fill="rgb(235,235,235)"></path>
<animate attributeName="display" values="none;none;inline;none;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
<g>
<path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235,235)"></path>
<path d=" M 55.008 56.088 L 40.32 6.552 L 56.592 6.552 L 64.224 37.44 L 71.856 6.552 L 88.848 6.552 L 73.368 56.088 L 55.008 56.088 Z " fill="rgb(235,235,235)"></path>
<path d=" M 115.488 57.24 L 115.488 57.24 Q 108.216 57.24 102.384 53.748 L 102.384 53.748 L 102.384 53.748 Q 96.552 50.256 93.24 44.208 L 93.24 44.208 L 93.24 44.208 Q 89.928 38.16 89.928 30.888 L 89.928 30.888 L 89.928 30.888 Q 89.928 23.904 93.276 18.072 L 93.276 18.072 L 93.276 18.072 Q 96.624 12.24 102.6 8.856 L 102.6 8.856 L 102.6 8.856 Q 108.576 5.472 116.208 5.472 L 116.208 5.472 L 116.208 5.472 Q 120.384 5.472 124.308 6.408 L 124.308 6.408 L 124.308 6.408 Q 128.232 7.344 131.4 9.072 L 131.4 9.072 L 126.648 20.232 L 126.648 20.232 Q 121.752 18.216 117.504 18.216 L 117.504 18.216 L 117.504 18.216 Q 111.96 18.216 108.936 21.78 L 108.936 21.78 L 108.936 21.78 Q 105.912 25.344 105.912 31.104 L 105.912 31.104 L 105.912 31.104 Q 105.912 34.848 107.28 37.836 L 107.28 37.836 L 107.28 37.836 Q 108.648 40.824 111.132 42.552 L 111.132 42.552 L 111.132 42.552 Q 113.616 44.28 116.784 44.28 L 116.784 44.28 L 116.784 44.28 Q 118.512 44.28 119.664 43.992 L 119.664 43.992 L 119.664 32.4 L 132.12 30.96 L 132.12 53.496 L 132.12 53.496 Q 123.984 57.24 115.488 57.24 L 115.488 57.24 Z " fill="rgb(235,235,235)"></path>
<path d=" M 135.576 56.088 L 149.256 6.552 L 171.144 6.552 L 185.472 56.088 L 168.552 56.088 L 166.68 46.584 L 153.864 46.584 L 151.776 56.088 L 135.576 56.088 Z M 155.376 37.728 L 164.952 37.728 L 160.272 16.056 L 155.376 37.728 Z " fill="rgb(235,235,235)"></path>
<animate attributeName="display" values="none;none;none;inline;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
</g>
</svg>
之前：
detectFrame = counter++;
for (i = 0; i < totalFrames; i++) {
之后：
var detectFrame = counter++;
for (var i = 0; i < totalFrames; i++) {
我必须做的就是解决它不为多个对象设置动画的问题，只是在执行间隔的函数中重置变量，它解决了问题。
我正在尝试制作一个 SVG 动画，它循环分组的元素，这样您就有了逐帧动画。
我做了什么！
我遇到了 this post in 2012 that shows how to do it in SMIL but I can only get it to work if the animation only has 3 groups aka frames. I also tried using opacity instead of display however opacity gives a nasty flicker effect to the animation (unsure why). And I have no idea how I can tell it to delay at the end before it repeats the animation. Here's an example: https://jsfiddle.net/r0o459z8/
我最终做出了 SVGAnimFrames which works well in doing it in JS except if I call it twice on two different SVG's. Say the first vector (header) for example has more frames than the second (bounce) when header finishes and goes to restart it's animation bounce no longer plays because the counter variable was called twice on each and is recalled in SVGAnimFrames. The only way I can think of is running their animations in an iframe. Which I tried and got an error in console saying, "[Violation] Avoid using document.write()”。
因此我喜欢 SMIL 动画的想法，因此我的问题...
我怎样才能在 SMIL 中制作这个 "Frame By Frame SVG Animation" 使其适用于超过 3 帧？
如果 SMIL 动画不可能，为什么？
我可以用 SVGAnimFrames 做什么，我可以调用超过 1 个 svg 来制作动画并让它们的动画影响另一个（例如 header and/or 在 header 完成后弹跳不播放它的动画）？
body {
text-align: center;
padding: 1em;
background: rgb(71, 15, 89);
}
<svg style="isolation:isolate" viewBox="0 0 602.64 57.24">
<g>
<g>
<path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235,235)"></path>
<animate attributeName="display" values="inline;none;none;none;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
<g>
<path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235,235)"></path>
<path d=" M 55.008 56.088 L 40.32 6.552 L 56.592 6.552 L 64.224 37.44 L 71.856 6.552 L 88.848 6.552 L 73.368 56.088 L 55.008 56.088 Z " fill="rgb(235,235,235)"></path>
<animate attributeName="display" values="none;inline;none;none;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
<g>
<path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235,235)"></path>
<path d=" M 55.008 56.088 L 40.32 6.552 L 56.592 6.552 L 64.224 37.44 L 71.856 6.552 L 88.848 6.552 L 73.368 56.088 L 55.008 56.088 Z " fill="rgb(235,235,235)"></path>
<path d=" M 115.488 57.24 L 115.488 57.24 Q 108.216 57.24 102.384 53.748 L 102.384 53.748 L 102.384 53.748 Q 96.552 50.256 93.24 44.208 L 93.24 44.208 L 93.24 44.208 Q 89.928 38.16 89.928 30.888 L 89.928 30.888 L 89.928 30.888 Q 89.928 23.904 93.276 18.072 L 93.276 18.072 L 93.276 18.072 Q 96.624 12.24 102.6 8.856 L 102.6 8.856 L 102.6 8.856 Q 108.576 5.472 116.208 5.472 L 116.208 5.472 L 116.208 5.472 Q 120.384 5.472 124.308 6.408 L 124.308 6.408 L 124.308 6.408 Q 128.232 7.344 131.4 9.072 L 131.4 9.072 L 126.648 20.232 L 126.648 20.232 Q 121.752 18.216 117.504 18.216 L 117.504 18.216 L 117.504 18.216 Q 111.96 18.216 108.936 21.78 L 108.936 21.78 L 108.936 21.78 Q 105.912 25.344 105.912 31.104 L 105.912 31.104 L 105.912 31.104 Q 105.912 34.848 107.28 37.836 L 107.28 37.836 L 107.28 37.836 Q 108.648 40.824 111.132 42.552 L 111.132 42.552 L 111.132 42.552 Q 113.616 44.28 116.784 44.28 L 116.784 44.28 L 116.784 44.28 Q 118.512 44.28 119.664 43.992 L 119.664 43.992 L 119.664 32.4 L 132.12 30.96 L 132.12 53.496 L 132.12 53.496 Q 123.984 57.24 115.488 57.24 L 115.488 57.24 Z " fill="rgb(235,235,235)"></path>
<animate attributeName="display" values="none;none;inline;none;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
<g>
<path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235,235)"></path>
<path d=" M 55.008 56.088 L 40.32 6.552 L 56.592 6.552 L 64.224 37.44 L 71.856 6.552 L 88.848 6.552 L 73.368 56.088 L 55.008 56.088 Z " fill="rgb(235,235,235)"></path>
<path d=" M 115.488 57.24 L 115.488 57.24 Q 108.216 57.24 102.384 53.748 L 102.384 53.748 L 102.384 53.748 Q 96.552 50.256 93.24 44.208 L 93.24 44.208 L 93.24 44.208 Q 89.928 38.16 89.928 30.888 L 89.928 30.888 L 89.928 30.888 Q 89.928 23.904 93.276 18.072 L 93.276 18.072 L 93.276 18.072 Q 96.624 12.24 102.6 8.856 L 102.6 8.856 L 102.6 8.856 Q 108.576 5.472 116.208 5.472 L 116.208 5.472 L 116.208 5.472 Q 120.384 5.472 124.308 6.408 L 124.308 6.408 L 124.308 6.408 Q 128.232 7.344 131.4 9.072 L 131.4 9.072 L 126.648 20.232 L 126.648 20.232 Q 121.752 18.216 117.504 18.216 L 117.504 18.216 L 117.504 18.216 Q 111.96 18.216 108.936 21.78 L 108.936 21.78 L 108.936 21.78 Q 105.912 25.344 105.912 31.104 L 105.912 31.104 L 105.912 31.104 Q 105.912 34.848 107.28 37.836 L 107.28 37.836 L 107.28 37.836 Q 108.648 40.824 111.132 42.552 L 111.132 42.552 L 111.132 42.552 Q 113.616 44.28 116.784 44.28 L 116.784 44.28 L 116.784 44.28 Q 118.512 44.28 119.664 43.992 L 119.664 43.992 L 119.664 32.4 L 132.12 30.96 L 132.12 53.496 L 132.12 53.496 Q 123.984 57.24 115.488 57.24 L 115.488 57.24 Z " fill="rgb(235,235,235)"></path>
<path d=" M 135.576 56.088 L 149.256 6.552 L 171.144 6.552 L 185.472 56.088 L 168.552 56.088 L 166.68 46.584 L 153.864 46.584 L 151.776 56.088 L 135.576 56.088 Z M 155.376 37.728 L 164.952 37.728 L 160.272 16.056 L 155.376 37.728 Z " fill="rgb(235,235,235)"></path>
<animate attributeName="display" values="none;none;none;inline;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
</g>
</svg>
之前：
detectFrame = counter++;
for (i = 0; i < totalFrames; i++) {
之后：
var detectFrame = counter++;
for (var i = 0; i < totalFrames; i++) {
我必须做的就是解决它不为多个对象设置动画的问题，只是在执行间隔的函数中重置变量，它解决了问题。