html-анимации для iphone?

Question

Я создаю html-приложение для iPhone с использованием NimbleKit, и одна часть включает анимацию.Я построил последовательность кадров png размером 320 на 230 пикселей по 48 кадров, содержащую анимацию, и использую циклы javascript для ее воспроизведения.вот быстрый и грязный код

     var pic = 0;
    function stamp(){
        //alert("animated");
        //alert("Stamp");
        var image;
        if(pic<=48){
        image = "url('Animations/Smiley/"+pic+".png')";
        $('#animation').css("background-image",image);
        pic++;
        }

    }
    function beginStamp(){
        var stamp = window.setInterval("stamp()", 33.33);
        window.setTimeout("clearIt()", 1599.84);
    }

    function clearIt(){

        window.clearInterval(stamp);
        $('#animation').css("z-index",0);

    }

    var animated = setTimeout("animate()",600);
    var start = setTimeout("beginStamp()",1600);

проблема в том, что анимация очень прерывистая и мерцает тонну.Все изображения хранятся локально, поэтому не проблема скорости сети / загрузки.После первого запуска анимация работает более плавно, поэтому она кэшируется?все еще много мерцания.Кто-нибудь знает, как это исправить, или лучший метод (как я уверен, что есть) с использованием html, css, js, query и nimble kit sdk для создания итеративной анимации, оптимизированной для мобильных устройств?Спасибо!

Answer 1

Хотя изображения являются локальными, они все равно должны загружать их в память - т.е. когда вы устанавливаете правило background-image css для указания на новый URL-адрес, который он проверяет, чтобы увидеть, загружен ли требуемый ресурс - если нет, то он нуждается читать файл изображения перед его рендерингом, что занимает немного времени. Это, вероятно, проблема.

Попробуйте сначала загрузить все изображения, когда загружается программа, затем, когда вы хотите показать ее пользователю в первый раз, все должно быть в порядке. Вы должны быть в состоянии сделать это, запустив приведенный выше код с изображением, скрытым при запуске.