2

いくつかの変換を適用して、アニメーションGIFをキャンバスに表示したいと思います。テストするために、私は現在、アニメーションGIFをキャンバスに表示しようとしているだけなので、基本的にgifを通常の<img>タグとして表示するのと同じです。

Chromeとを使用してwebkitRequestAnimationFrameいます。リクエストフレームごとに、画像を描画します。gifフレームが変更された場合、これはキャンバスに反映されます。これは部分的にしか機能しません：

  • キャンバスを見ているだけでは更新されません。代わりに、1つの静止フレームが描画され始めます。
  • タブを再度選択すると（つまり、別のタブを選択してキャンバスタブを再度選択すると）、新しいフレームに更新されますが、その後は再びフリーズします。

これは私が設定したフィドルです：http：//jsfiddle.net/eGjak/93/。

実際にアニメーション化したアニメーションGIFをキャンバスに描画するにはどうすればよいですか？

4

1 に答える 1

3

回答が無効になりました

ここで説明されている動作 (imgアニメーション gif を参照するタグをキャンバスに書き込むと、それimgが DOM の一部であるか表示されている場合、gif のさまざまなフレームが書き込まれます) が少なくとも Chrome で変更されたようです。これに対する正しい動作についてのドキュメントがある場合とない場合があります。:)

また、webkitRequestAnimationFrameX が表示されていない場合、要求された関数が実行されないように、1 つの追加の引数 (要素 X) を取る動作がなくなりました。パフォーマンスとバッテリー寿命の理由から、requestAnimationFrame描画を必要とする何かを実行する前に、渡す関数の多くで可視性をチェックする必要がある場合があります。

前：

修正済みバージョンをチェックアウトします。

http://jsfiddle.net/eGjak/96/

画像を描画する関数に a を追加するconsole.log()と、それが呼び出されていることがわかります。問題は、おそらくブラウザがDOMの一部ではないアニメーション画像を更新することを気にしないため、画像自体がアニメーション化されないことです.

私の解決策は、アニメーション GIF を DOM の一部にし、サイズを 0 にすることでした。これは問題なく動作します。

http://jsfiddle.net/eGjak/96/show/をロードし、Windows または Linux で ctrl-shift-I を使用して要素を検査することで、アニメーションがイメージ タグではなくキャンバスに表示されていることを確認できます。alt-cmd-I。

編集：ここにボーナスがあります！

webkitRequestAnimationFrameは、アニメーション化されている要素が表示されている場合にのみアニメーションを実行できるようにするために、Mozilla の同等のものよりも 1 つ多い引数を取ります。チェックアウト

http://jsfiddle.net/kmKZa/8/

コンソールを開きます。キャンバスを非表示にすると、アニメーション関数の呼び出しが停止することがわかります。キャンバスを再び表示に切り替えると、アニメーション関数が再度呼び出されます。

于 2011-09-02T12:37:37.653 に答える