Firefox 3 のアニメーション機能
この記事は Mozilla Labs Blog » Blog Archive » Better animations in Firefox 3 の翻訳です。
なお、最初の throbber のアニメーションを除けば、APNG をサポートしていないブラウザではすべて静止画表示となります。現在、APNG をサポートしているブラウザは Firefox 3 Alpha 7 以降と、Post-Alpha Opera 9.5（いずれも開発版）です。ご了承ください。
Firefox 3 のクールな新機能の一つが新しいアニメーション画像フォーマットのサポートです。ブラウザは10年以上もアニメーション GIF をサポートしてきましたが、GIF 画像フォーマットは多くの制限があり置き換える時期に来ています。PNG 画像フォーマットは今では静止 GIF 画像の優れた代替として広く採用されていますが、アニメーション GIF に関してはまだ明確な後継がありませんでした。この新しい アニメーション PNG フォーマット（日本語版） (APNG) は単純な PNG の拡張ですが、アニメーションとして非常に優れています。
問題
では GIF の何が問題なのでしょうか? GIF 画像の二つの明らかな問題は、256色しか扱えないことと、半透明色の欠落です。その結果、画像はしばしば粗く見え、背景にうまく溶け込みません。かしこいデザイナーはこれらの問題をいくらか軽減することはできますが、そのワザは異なる状況 - とくにアニメーションしているときには - いつもうまくいくとは限りません。問題の例を見て見ましょう…
例：Firefox の“throbber”
Firefox 2 では、ページがまだ読み込み中であることを示すために使用されるアニメーション（親しみを込めて“throbber“と呼ばれます）はアニメーション GIF です。ここに、OS X で使用されている実際の画像を背景の異なる状況でいくつか示します。
明るい灰色の背景上で使用された場合（OS X のデフォルト色です）、throbber はきれいに見えます。しかし他の背景色ではひどいものです。なぜでしょうか? 画像をアニメーションするとき、それがなめらかに見えるようにするには、ピクセルは固定色（背景色）にブレンドされる必要があります。もし、半透明がサポートされていれば、アンチエイリアスされたピクセルは適切な透明色となり、アニメーションはどんな背景色に対してもきれいに見えます。
こんどは APNG で表示された throbber を見てみましょう（もしこのページを Gran Paradiso、Firefox 3 の開発バージョン、で見ていれば下の画像は動いて見えます。そうでなければ、最初のフレームが単なる静止画として見えます — APNG は既存の PNG ビューワと後方互換性を持っているのです）
APNG 版は異なる背景画像でもきれいに見えます。Firefox のテーマや拡張機能が既存の throbber を再利用してブラウザの chrome を変更するとき（例えば Chromatabs）、これが実際に役に立つのです。もう悲惨な結果になることはありません。
ニワトリとタマゴ…
このしゃれたアニメーションフォーマットはすばらしいのですが、オーサリングツールがなければ誰も使うことができません。ところが、みんながそのフォーマットを使い始める前に、だれがそのようなツールを作るのでしょうか? まさに、ニワトリとタマゴです。
幸いなことに、ここ Mozilla Labs は、ニワトリとタマゴの両方を作り出す技術を持っています。Mozilla プラットフォームは APNG 画像のデコードだけでなく、エンコードも行うことができるのです。それは複数のプラットフォームで動き、UI、スクリプティング、画像を扱うのになじみのある環境をもっています。ということで、APNG を簡単に作成することのできる拡張機能を作ってみました。これは“APNG Edit”と呼ばれます。あまり創造的な名前ではありませんが、とにかくやるべきことはやります。それはこんな風に見えます:
ゴールは簡単なエディタをを作ることです; 主要な流れは一連の画像を読み込み（1フレームに1個）、それぞれのフレームにさまざまな設定を施し、APNG ファイルとしてアニメーションを保存します。
上のスクリーンショットに見えていえる赤い恐竜の頭は“Chompy”で、Bugzilla でユーザのクエリを処理している間のお楽しみとして表示されているものです。Chompy はアニメーション GIF なので、少し粗くなっています。問題は上で述べた GIF の throbber と同じで、ディザリングによる不自然さが見られます。
私は Chompy のオリジナルを書いた Mozilla コミュニティメンバーの Klowner から個別フレームを PNG 形式で入手したので、すぐに APNG Edit に読み込んでアニメーションとして保存することができました。これが高画質 APNG 版の Chompy です:
…ベーコンの付け合せ
オー、そして、“もう一つ”!
フレームを組み立てる簡単なエディタは最初の一歩としては良いものですが、Mozilla ベースのエディタは最小の手間でより強力になることに気が付きました。アニメーションを動的に生成・変更するのに JavaScript と <canvas> を使わない手はありません。個別のフレームを Photoshop や Gimp で（何度も何度も、アニメーションが期待通りになるよう細かく調整しながら）描く代わりに、 <canvas> によって描画するツールを書くほうがはるかに容易です。それにより、アニメーションは設定したパラメータどおりに自動的に生成されます。
例として、OS X の throbber を作るために、適切な形状、色、各フレームに応じた角度で線を描画するスクリプトを書きました。私はもっと大きなバージョンがどんな風に見えるか興味があり、単にスクリプトで X と Y の値を変更して、再度実行してみました:
ここに APNG を生成するスクリプトに簡単に変換できるエキサイティングな <canvas> のデモがあります。
最初の時計のアニメーションは、各フレームがフルに描画されていたのでかなり大きなものでした（約450K）。私は、フレーム間の違いだけをエンコードしてフレームを最適化する別のスクリプトを書き、それは 79K まで小さくなりました。スクリプトのパラメータを変更して、サイズとフレーム数を調整したアニメーションを再作成するのも容易です。
試してみよう、拡張してみよう
自分自身でエディタを使ってみてください。必要なものは:
- Gran Paradiso Alpha 7（またはそれ以降）。APNG Edit は Firefox 2 では動きません。
- Mozilla Addons から APNG Edit 拡張機能
- （オプション）実験するためのサンプルスクリプトと画像
まだエディタには改善すべき荒削りな部分があり、また魅力的な新しい機能の可能性もあります。残念ながら、私は Firefox 3 の作業にほとんどの時間を割かれそうです。しかし、だれからでもパッチやスクリプトを歓迎します。将来に向けてのアイデアを示します:
- 既存の APNG または アニメーション GIF のフレームを編集する機能（imgIDecoder の変更が必要）
- ドラッグ＆ドロップでフレームを並べ替え
- APNG を 8-, 4-, or 2-bit 色の画像で保存（ファイルサイズ削減のため）
- より多くのフレーム操作のためのスクリプト
- 悪意あるコードを防ぐためのスクリプトのサンドボックス化
- フレームの切り取り
- フレームのスケーリング
- 新 <canvas> drawString() API によるアニメーションテキスト
- SVG ベースのフレーム描画
回転するロゴ
翻訳部ここまで
関連リンク
