移动浏览器上的 CSS Sprite 动画问题（残留图像）答案

【问题标题】：CSS Sprite Animation problem on Mobile Browser (residual image)移动浏览器上的 CSS Sprite 动画问题（残留图像）
【发布时间】：2011-09-19 20:28:55
【问题描述】：

在您桌面上的任何网络浏览器中尝试以下链接，然后在任何移动浏览器上尝试（在 Android、iPhone 和 iPad 上尝试过 - 都产生相同的问题），有人可以告诉我为什么第一个“框架”（嗯原始精灵位置）总是显示在动画后面？

http://24hours-in.lincoln.ac.uk/projects/mus/animate2.html

谢谢！

【问题讨论】：

标签： css animation mobile sprite

【解决方案1】：

解决了！（软糖）

var character = null; 
var xOffset = 0;

function animate() {
    if(xOffset < 360){
        xOffset += 30;
    } else {
        xOffset = 0;
    }
    character = document.getElementById("character");
    character.style.backgroundImage = "url('char2.png')";
    character.style.backgroundPosition = xOffset + "px 0px";
    setTimeout(animate,250);
}

function init() {
    var character = document.createElement("div");
    character.id = "character";
    character.style.backgroundImage = "url('spacer.png')";
    character.style.position = "absolute";
    character.style.width = "30px";
    character.style.height = "65px";
    document.getElementById("stage").appendChild(character);
    animate();
}

window.onload = init;

我认为它使用了原始图像的背景后备，因为它具有透明度。因此，我没有从背景图像开始，而是从应用一个 1px 透明 PNG 文件开始（但将 CSS 的其余部分分配给 char PNG），当涉及到动画时，我将背景图像替换为char.PNG 版本。

我相信还有更优雅的方法，但这确实有效！

【讨论】：

【解决方案2】：

你知道，老实说，我不知道 是什么 导致了这个问题，但问题是 character background-image 是静态的 - 也就是说，它设置在石头（通过 CSS）。

解决您的问题的方法是使用 javascript 动态添加背景图像。这是您修改后的代码。

CSS

<style type="text/css">
body {
    padding: 0px;
    margin: 0px;
}

#character {
    position:absolute;
    width:30px;
    height:65px;
    background-position: center center;
    overflow: hidden;
}
</style>

Javascript

<script type="text/javascript">

var character = null; 
var xOffset = 0;

function animate() {
    if(xOffset < 360){
        xOffset += 30;
    } else {
        xOffset = 0;
    }
    character.style.backgroundImage = "url('char.png')";
    character.style.backgroundPosition = xOffset + 'px, 0px';
    setTimeout(animate,250);
}

function init() {
    character = document.getElementById("character");
    animate();
}

window.onload = init;

</script>

HTML

<body>
<div id="character"></div>
</body>

【讨论】：

虽然你说的有道理，但仍然没有解决问题。如果您再次检查链接，您会看到精灵的初始位置仍然存在残留。
全是移动浏览器似乎很奇怪。如果只是其中之一，我会理解的！
我什至让一切都变得动态：24hours-in.lincoln.ac.uk/projects/mus/animate3.html 仍然出现上述问题。也许您只是不允许在移动浏览器中使用透明背景图像:(
詹姆斯 - 哎呀！我忘记了我为图像添加了白色背景。当我在我的手机（在我的服务器上）上测试它时，这就是它起作用的原因。您不能为此图像设置背景颜色是否有特殊原因？
是的，这是一个精灵，需要覆盖在背景上。这是我正在为移动设备试验的 JS 游戏。但是，如果他们的浏览器不能正确支持透明背景，那就注定了！