Проблема CSS Sprite Animation в мобильном браузере (остаточное изображение) - PullRequest
Новая
       14

Проблема CSS Sprite Animation в мобильном браузере (остаточное изображение)

2 голосов
/ 19 сентября 2011

Попробуйте следующую ссылку в любом веб-браузере на вашем рабочем столе, а затем попробуйте ее в любом мобильном браузере (пробовал на Android, iPhone и iPad - у всех такая же проблема), и кто-то может сказать мне, почему первый «кадр» (хорошо исходная позиция спрайта) всегда отображается за анимацией?

http://24hours -in.lincoln.ac.uk / проекты / мус / animate2.html

Спасибо!

Ответы [ 2 ]

1 голос
/ 19 сентября 2011

Решено! (с помадкой) 

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;

Я полагал, что из-за прозрачности использовался фоновый запас исходного изображения. Поэтому вместо того, чтобы начинать с фонового изображения, я начал с применения прозрачного PNG-файла размером 1px (при этом присваивая оставшуюся часть CSS, готовую для символа PNG), а когда дело доходит до анимации, я затем заменяю фоновое изображение на версия char.PNG.

Я уверен, что есть более элегантные способы, но это делает работу!

0 голосов
/ 19 сентября 2011

Вы знаете, если честно, я не знаю, , что вызывает проблему, но проблема в том, что фоновое изображение character является статическим - то есть оно установлено в камне(через 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...