图像精灵看起来断断续续/生涩

Question

我正在尝试将图像动画化到画布。

在 html 文件中，我有狗.png它是一个图像精灵。

<img id="dog" src="images/dog.png" alt="dog" />

在 CSS 文件中：

#dog{
    object-position: 0 0;
    width: 50px;
    height: 50px;
}

在javascript中有一个函数：

$("#dog").css("object-position",(incrementNum*-60) +"px 0");

其中增量数字从 0 开始。

问题是图像动画变得断断续续/生涩。

如何使图像看起来不错？谢谢

Answer 1

哎呀，我只是意识到 documentGetElementById 采用整个精灵图像并且不应用 css。这就是为什么断断续续的图像实际上是一张被压缩成 50 x 50 像素的长图像。