iphone htmlアニメーション？

Question

NimbleKitを使用してHTMLネイティブのiPhoneアプリを構築していますが、その一部にアニメーションが含まれています。アニメーションを含む320 x 230ピクセルの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); 

問題はアニメーションが非常に不安定で、ちらつきが1トンあります。すべての画像はローカルに保存されているため、ネットワーク速度/ダウンロードの問題ではありません。最初の実行後、アニメーションはよりスムーズに実行されるため、キャッシュされますか？まだまだちらつきがたくさんあります。誰かがこれを修正する方法、またはhtml、css、js、query、およびnimble kit sdkを使用してモバイル最適化アニメーションを実行するためのよりよい方法を（私は確信しているので）知っていますか？ありがとう！

Answer 1

イメージはローカルですが、メモリにロードする必要があります。つまり、新しいURLを指すようにbackground-image CSSルールを設定すると、必要なリソースが既にロードされているかどうかを確認します。それをレンダリングする前にイメージファイルを読んで少し時間がかかります。それはおそらく問題です。

最初にすべての画像をロードしてください。プログラムがロードされているときに、最初にユーザーに表示したいときは、OKにしてください。あなたは、起動時に隠された画像を使って上記のコードを実行することでこれを行うことができます。