Sprite PNG Javascript 動畫不起作用

Question

我正在嘗試使用下圖創建 Sprite 動畫：

為此，我將其用作背景，並在制作動畫時嘗試操縱背景的位置。 不知何故，我無法讓它工作 - 它從一開始就顯示了最后一幀。

圖片： https ://i.imgur.com/06vjVVj.png - 30800x1398 和 27 幀

這是一個代碼筆： https ://codepen.io/magiix/pen/MWwdYo

#skull {
  position: absolute;
  border: 1px solid red;
  width: 1140px;
  height: 1398px;
  background: url("https://i.imgur.com/06vjVVj.png") 1140px 0;
}

const animateSkull = () => {
    const interval = 50;
    let pos = 30800 / 27;

    tID = setInterval(() => {
        document.getElementById("skull").style.backgroundPosition = `-${pos}px 0`;
        if (pos < 30800) {
            pos = pos + 1140;
        }
    }, interval);
};

Answer 1

如果您檢查（例如使用控制台），您會看到您的animateSkull函數從未被調用，因為您的addEventListener不起作用。 將其更改為以下內容，以便調用它（但您的animateSkull函數有另一個錯誤（或者您的 css 我沒有檢查過），因此在那之后它不能完全正常工作，但您應該能夠輕松修復它）：

document.addEventListener('DOMContentLoaded', () => {
  animateSkull();
});

Answer 2

這應該可以完成工作，但是您的精靈中的框架不具有相同的寬度。 所以動畫看起來有問題。 （這是一張專為動畫制作的巨幅圖像）

 const animateSkull = () => { const interval = 1000; let pos = -1140; tID = setInterval(() => { if (pos > -30800) { pos -= 1140; } document.getElementById("skull").style.backgroundPosition = `${pos}px 0`; }, interval); }; animateSkull();

 #skull { position: absolute; border: 1px solid red; width: 1140px; height: 1398px; background-image: url("https://i.imgur.com/06vjVVj.png"); background-position: -1140px 0; background-size: cover; } </style>

 <p id="skull"></p>