svg - SIMPLE – 按顺序为多个 SVG 制作动画(如循环 GIF)

Question

我正在尝试制作最基本的 SVG 动画，而我发现的一切都在试图教我关键帧和诸如此类的高级内容。我在 After Effects 中了解关键帧，而这根本不是我需要的。

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

我想在我的网站上显示这个动画作为主要图形，所以它需要可缩放。

我需要尽快为我的投资组合审查执行此操作。

Answer 1

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

我们使组元素(即框架)在 1/8 (12.5%) 秒内可见，然后使用 @keyframe 定义再次隐藏它。每个后续帧的动画都会延迟 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>