CODEWITHSUNDEEP
javascriptjquerycssiosanimation
roozbubu
roozbubu

Reputation: 1176

iphone html animations?

I am building an html native iPhone app using NimbleKit, and one portion involves an animation. I built a 320 by 230px 48 frame png sequence containing the animation, and am using javascript loops to play through it. here is a quick and dirty on the code

     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);

the problem is, the animation is very choppy and flickers a ton. All the pictures are locally stored, so its not a network speed/ downloading issue. After the first run the animation runs smoother, so is it being cached? there is still a lot of flickering. does anybody know how to fix this, or a better method (as I'm sure there is one) using html,css,js, query, and nimble kit sdk to do mobile optimized iterating animations? Thanks!

Upvotes: 0

Views: 318

Answers (1)

Mark Rhodes
Mark Rhodes

Reputation: 10217

Although the images are local, it still has to load them into memory - i.e. when you set the background-image css rule to point to a new URL it checks to see if the required resource is already loaded - if not it needs to read the image file before rendering it which takes a bit of time. That is probably the problem.

Try loading all the images first, when the program is loading, then when you want to show it to the user first time it should be ok. You should be able to do this by running the above code with the image hidden on start up.

Upvotes: 1

Related Questions