如何在 HTML / Javascript 中的单个文件中使用 PNG 序列？

Question

我说过 PNG 序列文件要么是多个文件，要么是包含所有序列的单个文件。我无法弄清楚这两种类型的序列是否具有不同的名称（如果是，这些名称是什么）。此外，我试图找出如何使用图像序列 j 像这里这样的单个文件

用于 HTML / javascript 动画。我想我需要一个 div 来移动 png 文件（剪辑路径），但我找不到任何示例。也许你知道一些？谢谢！

Answer 1

抱歉，我只能水平（或垂直）设置动画。如果你水平地并排堆叠你的图像，那将是完美的。

.animatedImage {
  background-image: url(https://i.stack.imgur.com/kuEev.png);
  height: 300px;
  width: 500px;
  
  animation: png-animation 1s steps(3) forwards; /* To change speed of animation, change firs number; To include more images, change number in steps() */
  animation-iteration-count:infinite; /* Make animation never ends */
}

@keyframes png-animation {

  to {
    background-position: -1500px 0px;
  }

}

<div class="animatedImage"></div>

Answer 2

您也可以在两个方向上设置动画！这里有一篇很棒的文章 (https://medium.com/jspoint/creating-css-animations-using-sprite-sheet-47e2b7a3793c)，但我已经为下面的示例编辑了代码。

div#cat {
    height: 256px;
    width: 512px;
    background-image: url("https://i.stack.imgur.com/kuEev.png"); /* width: 2048px; height: 512px; */
    animation: playX 0.5s steps(4) infinite, playY 1s steps(2) infinite; /* The seconds for playX should be the playY divided by the amount of rows */
}
@keyframes playX {
  from {background-position-x: 0px;}
  to {background-position-x: -2048px;}
}
@keyframes playY {
  from {background-position-y: 0px;}
  to {background-position-y: -512px;}
}

<div id="cat"></div>

如何在 HTML / Javascript 中的单个文件中使用 PNG 序列？

How to use the PNG sequence in a single file in HTML / Javascript?

html

animation

png

sequence

clip-path