SVG 矢量图像动画

Question

我在 Adobe Illustrator 中创建了 3 个矢量图像。

我想用与 gif 相同的方式制作此矢量质量图像的动画，在浏览器 mypage.php <img src="assets/img/logo.svg" alt="" alt="" width="65" height="45"/> 中以 .svg 格式的 3 张图像的快速无限循环序列。

为 .svg 获取此类动画的最正确方法是什么，我是否必须使用所有给定的方法来创建矢量动画，或者在我的场景中我可以用一些不同的方式来做

Answer 1

对于你想要的，它是 svg 图片这一事实是无关紧要的。

您可以创建一个元素并通过不同的文件制作动画作为背景。

div{
  width: 102px;
  height: 102px;
  border: 1px solid black;
  animation:  rotateImages 1s infinite; 
}

@keyframes rotateImages {
  0%   { background: url("https://www.placecage.com/g/100/100"); }
  32%   { background: url("https://www.placecage.com/g/100/100"); }
  33%  { background: url("https://www.placecage.com/100/100"); }
  65%  { background: url("https://www.placecage.com/100/100"); }
  66% { background: url("https://www.placecage.com/c/100/100"); }
  100% { background: url("https://www.placecage.com/c/100/100"); }
}

<div></div>

Answer 2

有几种方法可以做到这一点。根据您提供的信息，这是一种方法。

我们将帧一个接一个地堆叠起来。然后让它们一次可见。

.sequence {
  position: relative;
}

.sequence img {
  position: absolute;
  top: 0;
  opacity: 0;  /* start all frames invisible */
  animation: cycle 3s steps(1) infinite;
}

/* three images, so each gets made visible for 1/3 of the time */
@keyframes cycle {
  0%  { opacity: 1; }
  33% { opacity: 0; }
}

/* start (ie. show) the second frame 1 sec after the first */
.sequence img:nth-child(2) {
  animation-delay: 1s;
}

/* start (ie. show) the third frame 2 sec after the first */
.sequence img:nth-child(3) {
  animation-delay: 2s;
}

<div class="sequence">
  <img src="https://placeimg.com/300/200/animals"/>
  <img src="https://placeimg.com/300/200/nature"/>
  <img src="https://placeimg.com/300/200/people"/>
</div>

这些图像恰好是 JPEG，但它们是什么类型并不重要。您的 SVG 应该可以工作。

鉴于您有 SVG，您可能会发现将它们合并到一个 SVG 中会更好。将每一帧的内容放在它自己的组中（<g> 元素）。然后使用与上述类似的方法，但一次显示一个组。

SVG 矢量图像动画

SVG vector image animation

html

css

animation

svg

vector-graphics