pngが一連のDIV（または1つのdiv）にロードされ、フレームごとにシーケンスされるボタンクリックまたはスクロールに基づいています。私はコードを覗いてみましたが、JavaScriptが重い作業をしていることを理解していますが、まだ少し失われています。このテクニックに関するチュートリアルはありますか？例？アニメーション（複数のdiv） のjQuery（スクロールまたはトリガーアニメーションのいずれか）を使用してPNGシーケンスをアニメーション化するには
例：アニメーションの
例（1つのDIV）：アニメーションのスクロール http://www.hyundai-veloster.eu/
例： http://discover.store.sony.com/tablet/#design/ergonomics
あなただけスワップアウトしたいですsrc属性のsetIntervalタイマーを使用して
var myAnim = setInterval(function(){
$(".myImageHolder").attr('src', nextImage);
}, 42);
トリックはnextImageの生成方法です。これは主にあなたのイメージの命名規則に依存し、またはどの方向あなたが使用し、異なる画像を切り替えるのではなく、おそらくplugin
を
更新
で実行したり、使用するアニメーションを望みますHow to show animated image from PNG image using javascript? [ like gmail ]
まだ回答がありませんが、ファイルサイズの問題に答えるために担当者がいませんでした：とにかくすべての画像を読み込む必要がある場合は、そのデータを送信することにすでにコミットしています。少なくとも、HTTPオーバーヘッドを節約してスプライトにイメージをバンドルすることによって実現しました。また、イメージがロードされるとすぐにアニメーションを開始できるという利点があります。すべてのイメージを個別にチェックする必要はありません。 – Zugbo
それは本当かもしれないが、私はそれが最適でない理由が他にもあると思う。 1万で10,000のイメージを移動することは、可視性を切り替えるか、div内のイメージの名前を交換するよりレンダーする方がはるかに高価です... – user379468
HTTP要求の数に対してファイルサイズの重みを付けなければなりません。あなたのイメージが完全にトランスアポイントになる必要がなければ、それらを大きなJPEGにスプライトすることができます....しかし、PNG-24にする必要があれば、それらを一緒に組み合わせるにはかなり巨大なものになるでしょう。 HTTPリクエストはもっと価値があるかもしれません。 –
ええ、画像シーケンスは、実際にはアニメーションを作成するために移動されている大きな画像です。私はそれがもっと複雑な画像シーケンスの場合にはうまくいくとは思っていません。 – user379468
ええ、ファイルサイズは大であるでしょう。 –
よく、おそらく個々の画像すべてよりも累積的に小さいでしょう。 –