iphone html animations?

Question

我正在使用NimbleKit构建一个html原生iPhone应用程序，其中一部分涉及动画。我构建了一个包含动画的320×230px 48帧png序列，并使用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和敏捷工具包sdk来做移动优化的迭代动画吗？谢谢

Answer 1

尽管图像是本地的，但它仍然必须将它们加载到内存中——也就是说，当您将background-image css规则设置为指向新的URL时，它会检查所需资源是否已经加载——如果没有加载，它需要在渲染图像文件之前读取图像文件，这需要一些时间。这可能就是问题所在。

当程序加载时，先尝试加载所有图像，然后当你想第一次向用户显示时，它应该是可以的。你应该能够通过运行上面的代码来做到这一点，在启动时隐藏图像。