javascript - iphone html动画？

Question

我正在使用 NimbleKit 构建一个 html 原生 iPhone 应用程序，其中一部分涉及动画。我构建了一个包含动画的 320 x 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、查询和 nimble kit sdk 来做移动优化迭代动画的更好方法(我确信有一个)？谢谢!

Answer 1

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

尝试先加载所有图像，当程序加载时，然后当你想第一次向用户展示它应该没问题。您应该能够通过在启动时隐藏图像的情况下运行上述代码来执行此操作。