13日(米国時間)付けでMozilla Labs Blogにおいて「Better animations in Firefox 3」というタイトルの下、次期FirefoxであるFirefox 3におけるアニメーション機能に関する文書が公開された。Firefox 2までのアニメーションの代表格といえばアニメーテッドGIFだ。データロード時に表示されるアニメーションであるスロバー(Throbber)などはその代表的な活用例だ。

アニメーテッドGIFは便利な方法だが、色が256色しか使えないという制限があるほか、透過処理の機能を持たないという問題を抱えている。「Better animations in Firefox 3」にわかりやすい説明とサンプルがあるので読んでみてほしいが、次の例が一番わかりやすい。

GIFアニメーションだと表示が透過ではないため、背景色が一致していないと表示が汚くなってしまう。それに比べて下方の方のアニメーションは提案されているアニメーテッドPNG(APNG、Animated Portable Network Graphics)を使っているため表示が綺麗だ。APNGでは透過が使えるうえアニメーテッドGIFよりも優れたいくつもの機能が実現されている。

上がアニメーテッドGIF、下がアニメーテッドPNG。開発中のFirefox 3を使うと下のイメージはスムーズにアニメーションしている - Better animations in Firefox 3から引用

同ドキュメントでは開発中のFirefox 3で動作するAPNGエディタの紹介や、同エディタを使って作成されたAPNGアニメーションのサンプルが公開されている。背景が変わっても透過処理が活用されているため表示が汚くならない。

同じくアニメーテッドPNG。Firefox 3ではガブッと飛んでくるオブジェクトに噛みつくアニメーションが表示されている - Better animations in Firefox 3から引用

さらに画像エディタを使ってAPNGを生成するのではなく、JavaScriptとCanvas要素を使ってAPNGと同じ処理を実現する方法にも触れられている。依然開発中の機能だが、同発想はかなり興味深い。パラメータを変更して動的にアニメーションを生成できる。同文書ではさらに今後開発を目指しているほかの機能についても言及されている。これら機能はFirefox 3で動作するWebアプリケーションの表現力をより豊かなものにしそうだ。今後の開発にも注目していきたい。

JavaScript + CanvasでAPNGを生成すればいいんじゃないか、という発想 - Better animations in Firefox 3から引用

Firefoxのマスコットがグルグルまわっている - Better animations in Firefox 3から引用