イメージアニメーションを制御するJavaScript？

Question

私はページ上にアニメーションキャラクターを持ち、異なる動作のために異なるアニメーションが必要です。私は現在、どのように動作するかについて2つのアイデアを持っています：

IDEA 1：それぞれの動作をアニメーションGIFとして、JavaScriptを使用して動作を切り替えるときにGIFファイルを切り替えます。上向き：アニメーションはイメージそのものにあり、JSの仕事は少なくなります。欠点：GIFがどのフレームにあるか、アニメーションが終了する/ループするかなどをJavaScriptが知らせる（私が知っている）方法はありません。

IDEA 2：各アニメーションの各フレームをPNGイメージとして、JSアニメーションの開始前にすべての画像が準備されていることを確認するために、いくつかのプリローダーを使ってフレーム間を切り替えることができます。上向き：アニメーションシーケンスをもっと制御します。欠点：たくさんのフレーム...

これらの2つのアイデアのどちらが良いでしょうか？ （私はこのためにフラッシュを使用しないでください、btw）
私は自分自身に、より良いコントロールを提供するために自分自身に傾いています。サイトには既に50msごとにタイマーが設定されているため、このアニメーションをそのタイマーシステムに追加することはあまりありません。

Answer 1

私はこれが古かったと知っていますが、オプション2に似ているものの、オプション3を与えています。

フレームを読み込む代わりに、大きなスプライトマップにすべてのフレームと、すべてのアニメーション+座標のマップをロードする必要があります。あなたは正しいディメンションを使ってdivの背景としてスプライトを持っています。あなたはちょうど右のフレームに背景画像を移動する必要があります。

異なる行にすべてのイベントを設定し、それぞれのアニメーションを異なる列にフレームすることができます。これにより、簡単に制御できるグリッドが作成されます。あなたはすべてのアニメーションをロードするために、サーバへの複数の接続を作成する必要はありません

プラス

• おそらく速くロードよりもアニメーションやフレーム
• 以上の良好な制御や画像
• を切り替える
• PNGはgifよりも優れたアルファ結果を表示します

マイナス

• あなたはfreezeframe.jsを見てみることをお勧めします自分で

Answer 2

JavaScriptはAnimated GIFの現在のフレームを制御する方法がありません。ブラウザ間でも、私が知っている特定の（ActiveX/Mozillaに固有の）拡張機能を使用することもできません。

あなたはアイデア2が残っていると思います。この方法で達成できる結果がどれほど滑らかであるかはわかりませんが、テストする必要があります。

Answer 3

アイデア1では、GIFがループする時間の後にイベントをトリガーするために、setTimeOut()メソッドを使用できます。しかし、この問題は、GIFがJavaScriptとは別の時間に開始することがあるということです。

個人的には、私はアイデア2に行きます。フレームが比較的小さい限り、クライアントはすべてのイメージをかなり素早くダウンロードします（16x16px PNGは〜500バイトです）。クライアントコンピュータはフレームの移動に問題はありません。

もう1つの考え方は、1つの長いイメージ内にすべてのフレームを下に置き、CSSとjQuery（またはバニラのJavaScript）を使用してCSS background-positionプロパティを50msごとに変更することです。これは画像が小さく、コーディングが少し少なくなることを意味します。

Answer 4

をすべてのアニメーションを処理する必要があります。 canvas要素を使用して、GIFから最初のフレームを抽出し、一時停止します。