SIMPLE –对序列中的多个SVG进行动画处理(例如循环播放GIF) [英] SIMPLE – Animate Multiple SVGs in Sequence (like a looping GIF)

问题描述

我正在尝试制作最基本的 SVG动画，而我发现的所有内容都在尝试教我关键帧和类似的高级知识.我了解在After Effects中工作时的关键帧，而这根本不是我所需要的.

I am trying to do the most basic SVG animation, and everything I've found is trying to teach me keyframes and advanced stuff like that. I understand keyframes from working in After Effects and that's not what I need at all.

我想要做的就是对序列中相同的8条svg路径进行动画处理，例如一本翻转书，在其中我可以轻松地编辑循环速度.我希望图像更改颜色，所以我会重复用不同颜色保存的相同的8个SVG，或者也许有更好的方法来执行此操作，我不知道.我提供了一个示例GIF，用以展示我想要的确切效果.基本上，我想以可扩展的SVG格式重新创建该GIF.您将看到8张单独的图纸.

All I want to do is animate the same 8 svg paths in a sequence, like a flip book, in which I can edit the loop speed easily. I want the image to change colors, so I would repeat the same 8 SVGs just saved with a different color, or maybe there's a better way to do that with the code, I don't know. I have included a sample GIF that I made demonstrating the exact effect I am looking for. Basically I want to recreate that GIF in scalable SVG format. What you see is 8 separate drawings.

我想将此动画作为主要图形显示在我的网站上，因此它需要可扩展.

I want to display this animation on my website as the main graphic, so it needs to be scalable.

在进行投资组合审核时，我需要尽快做到这一点.

I need to do this as soon as humanly possible for my portfolio review.

推荐答案

下面是使用CSS动画制作8个SVG帧的示例.

Here's an example of animating 8 SVG frames using CSS.

我们使group元素(即框架)可见1/8秒(12.5％)，然后使用 @keyframe 定义再次将其隐藏.随后的每一帧动画的延迟时间为0.125秒，以便按顺序显示.

We make the group element (ie. the frame) visible for 1/8th (12.5%) of a second, then hide it again, using a @keyframe definition. Each subsequent frame has it's animation delayed for an 0.125 seconds, so that they appear in sequence.

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>

这篇关于SIMPLE –对序列中的多个SVG进行动画处理(例如循环播放GIF)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！