简单易用 - 串联多个SVG动画（类似于循环GIF）

Question

我正在尝试做最基本的SVG动画，但是我找到的所有资料都在教我关键帧和高级内容。我从After Effects中了解关键帧，但这并不是我需要的。

我想做的只是按顺序动画相同的8个svg路径，就像翻书一样，我可以轻松编辑循环速度。我想改变图像的颜色，所以我会重复相同的8个SVG，只是保存不同的颜色，或者也许有更好的方法用代码实现，我不知道。我已经包含了一个演示我要寻找的确切效果的示例GIF。基本上，我想在可缩放的SVG格式中重新创建那个GIF。你看到的是8个单独的图画。

我希望在我的网站上展示这个动画作为主要的图形，因此它需要具有可伸缩性。

我需要尽快完成这个任务以备我的作品集评审。

- Nick

---

我已经创建了SVG。我是在Illustrator中制作的。抱歉，我应该说得更清楚。我也可以获取每个帧的代码，我只需要知道如何对它们进行动画处理... - Nick

Answer 1

这是一个使用CSS动画8个SVG帧的示例。

我们使用@keyframe定义，将组元素（即帧）显示1/8秒（12.5%），然后再隐藏它。每个后续帧的动画延迟0.125秒，以便按顺序出现。

svg {
  width: 300px;
}

#frame1 {
  visibility: hidden;
  animation: 1s show infinite;
}

#frame2 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.125s;
}

#frame3 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.25s;
}

#frame4 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.375s;
}

#frame5 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.5s;
}

#frame6 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.625s;
}

#frame7 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.75s;
}

#frame8 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.865s;
}

@keyframes show {
  0%   { visibility: visible;}
  12.5%  { visibility: visible; }
  12.6%  { visibility: hidden; }
  100% { visibility: hidden; }
}

<svg viewBox="0 0 300 300">
  <g id="frame1">
    <circle cx="150" cy="50" r="25"/>
  </g>
  <g id="frame2">
    <circle cx="250" cy="50" r="25"/>
  </g>
  <g id="frame3">
    <circle cx="250" cy="150" r="25"/>
  </g>
  <g id="frame4">
    <circle cx="250" cy="250" r="25"/>
  </g>
  <g id="frame5">
    <circle cx="150" cy="250" r="25"/>
  </g>
  <g id="frame6">
    <circle cx="50" cy="250" r="25"/>
  </g>
  <g id="frame7">
    <circle cx="50" cy="150" r="25"/>
  </g>
  <g id="frame8">
    <circle cx="50" cy="50" r="25"/>
  </g>
</svg>

- Paul LeBeau

---

Paul LeBeau，非常感谢，这真的很有帮助。我的SVG非常复杂，我相信这会导致一些小问题。一个框架会将所有白色区域变成黑色，所以它有点故障。您有什么想法可以解决这个问题吗？这是沙盒的链接...http://cssdeck.com/labs/opmpfvdt - Nick

似乎影响到第7帧，但如果删除前六帧，则第7帧没有问题。我怀疑这是复制粘贴错误。如果您转到示例的底部，您会看到</svg>是红色的。这表明存在一些错误的嵌套。您可能错过了某个</g>，并且第7帧继承了先前帧的fill - 将白色牙齿变黑。 - Paul LeBeau

@PaulLeBeau 在frame3中还有一个<g>标签未关闭。此外，在将frame7中的st2替换为st1后，牙齿并没有变黑。然而，在这两个问题得到解决之后，仍然感觉每个周期会出现闪烁。你能帮忙评论一下原因和解决方法吗？ :D - SOUser

你是在谈论你自己创建的动画吗？那么，我无法帮助调试我看不到的动画。请创建一个新问题并包含你的动画。也许我们可以在那时帮助你。 - Paul LeBeau

Answer 2

我会把它做成一张单独的图片。甚至不需要使用CSS。您可以使用纯文本编辑器添加一个calcMode设置为离散的SVG动画来动态显示viewBox。

- 魔大农