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

Posted 2023-03-28

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

【英文标题】：How to use the PNG sequence in a single file in HTML / Javascript?

【发布时间】：2021-10-02 07:25:03

【问题描述】：

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

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

【问题讨论】：

你不想用那张图片制作一个 gif 吗？

感谢您的回答！可能是，这是实际的问题：包含多堆序列的此类文件的用途是什么。是否直接在 HTML 中使用（javascript、node、angular、css...）？

你的意思是：如何使用例如。 HTML中的GIF？通常：<img src="someImage.gif">。如果你这样使用它，它会正常动画。

不，我的意思是，如何在前端直接使用图像序列，不是 GIF，而是包含多个序列的 .png 文件。这有可能吗？

所以你不想要这样的东西：***.com/questions/22962329/… 吗？

【参考方案1】：

您也可以双向制作动画！这里有一篇很棒的文章 (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>

【参考方案2】：

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

.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>