SVG 逐帧动画 (<g>)答案

【问题标题】：SVG Frame by Frame Animation (<g>)SVG 逐帧动画 (<g>)
【发布时间】：2020-02-29 19:43:55
【问题描述】：

我正在尝试一个 SVG 动画，它循环分组元素，以便您拥有逐帧动画。

我做了什么！
我在 2012 年遇到了this 帖子，它展示了如何在 SMIL 中执行此操作，但我只能在动画只有 3 个组（即帧）时才能使其工作。我也尝试使用不透明度而不是显示，但是不透明度给动画带来了令人讨厌的闪烁效果（不确定为什么）。而且我不知道如何告诉它在它重复动画之前延迟。这是一个例子：https://jsfiddle.net/r0o459z8/

我最终制作了SVGAnimFrames，它在 JS 中效果很好，除非我在两个不同的 SVG 上调用它两次。例如，当标题完成并重新启动时，第一个向量（标题）比第二个（反弹）具有更多帧，因为计数器变量在每个上被调用两次并在 SVGAnimFrames 中调用，所以动画反弹不再播放。我能想到的唯一方法是在 iframe 中运行他们的动画。我试过并在控制台中显示错误，“[Violation] Avoid using document.write()”。

因此我喜欢 SMIL 动画这样做的想法，因此我的问题...

如何在 SMIL 中制作这个“逐帧 SVG 动画”，它适用于超过 3 帧？

如果无法实现 SMIL 动画，为什么？

我可以用 SVGAnimFrames 做什么，我可以调用超过 1 个 svg 来制作动画并让它们的动画影响另一个（例如，标题和/或在标题完成动画后不播放弹跳）？

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>

【问题讨论】：

您可以尝试为不透明度设置动画，而不是尝试为显示设置动画。
@enxaneta 已经尝试过创建一种淡入淡出类型的过渡，这不适用于很多动画。我知道如何解决这个问题。 jsfiddle.net/n30f5rw8

标签： javascript animation svg iframe smil

【解决方案1】：

之前：

detectFrame = counter++;
for (i = 0; i < totalFrames; i++) {

之后：

var detectFrame = counter++;
for (var i = 0; i < totalFrames; i++) {

要解决它不能为多个对象设置动画的问题，我所要做的就是重置执行间隔的函数中的变量，它就解决了问题。

【讨论】：