使用 css 为 spritesheet 设置动画答案

【问题标题】：Animating a spritesheet using css使用 css 为 spritesheet 设置动画
【发布时间】：2015-06-04 13:27:37
【问题描述】：

我在使用 css 为 spritesheet 设置动画时遇到问题我看到的每个示例都包含一个只有 1 行精灵或 1 列的精灵表像这样：

他们使用keyframes 对其进行动画处理

@keyframes play {
100% { background-position: -1900px; }
}

但对我来说，spritesheet 是一个 10x8 的网格

他们是否无论如何都要为这个特定的 spritesheet 使用 css 来实现动画？还是我应该改用 HTML5 画布？

每一帧都是90x96像素

这是我的照片

【问题讨论】：

肯定有办法，但计算每个位置可能比将它们放在一行或一列上更复杂
这个 spritesheet 是由纹理打包器完成的，你对纹理打包器有什么想法，我可以将所有这些精灵对齐在一行或一列中吗？
AFAIK 应该有一个文件 .plist 来存储位置和其他选项
正如公认的答案所暗示的那样，这是以下内容的副本：stackoverflow.com/questions/22571983/…?

标签： javascript css html

【解决方案1】：

在网格精灵上处理动画的方法是使用 2 个动画。一横一竖

Live Demo

.hi {
    width: 90px;
    height: 96px;
    background-image: url("http://i.stack.imgur.com/G7o8R.jpg");
    -webkit-animation: playv 6s steps(7) infinite, playh 1s steps(9) infinite; 

}


@-webkit-keyframes playv {
     0% { background-position-y:   0px; }
   100% { background-position-y: 100%; }
}

@-webkit-keyframes playh {
     0% { background-position-x:   0px; }
   100% { background-position-x: 100%; }
}

我的答案是基于这个答案： CSS animations with Spritesheets in a grid image (not in a row)

【讨论】：

【解决方案2】：

我建议的最简单、最 KISS（保持超级简单）的方法是获取从纹理打包器生成的图像，然后将每一行复制并粘贴到 1 长行中，这样你就有 1 长行。将其另存为新文件以供使用。更类似于您在开始时的 1 行/1 列示例。

如果可能的话，我还建议在每个 fuzzball 之间添加更多的填充/空间（我能想到的最佳描述）。否则，在边缘没有出血的情况下定位每一帧可能会很困难。例如第 9 行第 9 列，绒毛球的手臂几乎接触。

【讨论】：