{"id":27,"date":"2007-08-13T15:45:52","date_gmt":"2007-08-13T23:45:52","guid":{"rendered":"http:\/\/mozillalabs.com\/2007\/08\/better-animations-in-firefox-3\/"},"modified":"2007-08-13T15:45:52","modified_gmt":"2007-08-13T23:45:52","slug":"better-animations-in-firefox-3","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/labs\/2007\/08\/better-animations-in-firefox-3\/","title":{"rendered":"Better animations in Firefox 3"},"content":{"rendered":"

One of the cool new features coming in Firefox 3 is support for a new animated image format. Browsers have supported animated GIFs for more than a decade, but the GIF image format<\/a> has a number of limitations and is overdue for replacement. The PNG image format<\/a> is now widely accepted as a superior replacement for static GIF images, but for animated GIFs there has not yet been a clear successor. The new Animated PNG format<\/a> (APNG) is a simple extension to PNG, making it superior for animations too.<\/p>\n

The problem<\/strong><\/p>\n

So, what’s wrong with GIFs? The two most apparent problems are that GIF images can only contain 256 colors, and lack support for partially-transparent<\/a> pixels. This results in images which often look grainy or rough, and which do not smoothly blend into their background. A clever designer can somewhat mitigate these problems, but the tricks used don’t always work well in different situations — especially if the image is animated. Let’s look at an example of this problem…<\/p>\n

Example: the Firefox “throbber”<\/strong><\/p>\n

In Firefox 2, the animation used to indicate that a page is still loading (affectionately known as a “throbber<\/a>“) is an animated GIF. Here’s the actual image used on OS X, placed against some different backgrounds:<\/p>\n

.demoimg1 { padding: 1em; background-color: #404040;} .demoimg2 { padding: 1em; background-color: #ebebeb;} .demoimg3 { padding: 1em; background-color: #40ff40;} .demoimg4 { padding: 1em; background-color: #dd0041;} .demoimg5 { padding: 1em; background-image: url(http:\/\/people.mozilla.com\/~dolske\/apng\/checker.png);}
\n <\/p>\n

You can see that when used on a light gray background (OS X’s default color), the throbber looks just fine. But against any other background, it looks terrible. Why? To antialias the image, in order to make it look smooth, pixels must be blended to a fixed color (the expected background). If partial transparency was supported, the antialiased pixels could be made appropriately transparent, and the animation would look fine against any background.<\/p>\n

Here’s the throbber, now rendered as an APNG: [If you’re viewing this page with Gran Paradiso, the development version of Firefox 3, you’ll see the images below as they, uhh, throb. If you’re not, you should just see the static first frame — APNG is backwards compatible with existing PNG viewers.]<\/p>\n

<\/p>\n

The APNG version clearly looks better against different backgrounds. And that’s useful to have in practice, as it allows Firefox themes and extensions (like Chromatabs<\/a> \ud83d\ude42 to change the browser’s chrome while reusing the existing throbber, and not end up with an ugly mess.<\/p>\n

A chicken and egg…<\/strong><\/p>\n

A spiffy new animation format is nice, but without an authoring tool no one will use it. But who’s going build such a tool before anyone is using the format? Chicken, meet egg.<\/p>\n

Luckily, here at Mozilla Labs we have the technology to build both the chicken and the egg! The Mozilla platform can encode as well as decode APNG images, runs on multiple platforms, and has familiar environment for dealing with UI\/scripting\/graphics. So, yadda yadda, I wrote a Firefox extension to make creating APNGs easy. It’s called “APNG Edit.” Not the most creative name, but it’ll do. Here’s what it looks like:<\/p>\n

<\/a><\/p>\n

My goal was to create a simple editor; the primary workflow being to load up a series of images (one for each frame), adjust the various settings for each frame, and then encode and save the finished animation as an APNG file.<\/p>\n

The red dinosaur head shown in the screenshot above is “Chompy,” who serves as an amusing interstitial while Bugzilla<\/a> processes a user’s search query. Chompy looks a little rough as an animated GIF<\/a>; problems similar to the GIF throbber above are visible, and it also shows some dithering artifacts.<\/p>\n

I obtained the individual frames as PNGs from Klowner<\/a>, the Mozilla community member who originally rendered Chompy, and was able to quickly load them into APNG Edit and save the resulting animation. Here’s Chompy as a high-quality APNG:<\/p>\n

<\/p>\n

…with a side of bacon<\/strong><\/p>\n

Oh, and “one more thing”!<\/p>\n

I quickly realized that while a simple editor to assemble frames was a good first step, a Mozilla-based editor could be a lot more powerful with some minimal effort. Why not take advantage of Javascript and <canvas><\/a>, so that animations can be dynamically created and modified? Instead of drawing each frame in Photoshop or Gimp (over and over, as you fine-tune how you want the animation to look), it’s far easier to script the drawing tools provided by <canvas> so that the animation can be generated automatically with the parameters you specify.<\/p>\n

For example, to make the OS X throbber, I wrote a script to draw lines with the appropriate shape, color, and rotation for each frame. I was curious what a larger version might look like, so I basically just changed the X and Y size specified in my script, and ran it again:<\/p>\n

<\/p>\n

Here’s an existing <canvas> demo<\/a>, which I easily converted into a script for generating an APNG:<\/p>\n

<\/p>\n

The first version of the clock animation resulted in a rather large file (about 450K) because each frame was a complete rendering. I wrote another script to optimize each frame by only encoding interframe differences, which knocked the size down to 79K. I could also make easy adjustments to the dimensions or frame count, by simply adjusting the script parameters and re-rendering the animation .<\/p>\n

Try it, extend it<\/strong><\/p>\n

Try out the editor for yourself. You’ll need:<\/p>\n