If you’re looking for an object-oriented, straightforward way to animate those alpha transparent PNGs, look no further.
Check out Devthought’s latest release, APNG 0.1
About Guillermo Rauch:
CTO and co-founder of LearnBoost, developer, open source enthusiast, blogger.
7 Comments
Very cool. I was just thinking last night that when I finally put up a blog to use a lot of animated PNGs. I use something similar for the bubbly tooltips on my portfolio and the spinning loader in the Slideshow. If you are handy with After Effects and motion blur you can render up some really good looking stuff with few frames. It’s not Flash and people won’t know what it is.
Please rename APNG to something else. Making a library named APNG to display APNG images is very confusing.
APNG is a type of image, please do not add more definitions to this name.
I don’t think it’s confusing, since it’s heavily related to the APNG format. One of the problems it tries to solve is animating APNGs in the browsers that don’t currently support the format.
I just looked at the source code and I noticed that you use browser sniffing to detect native APNG support. I recommend you use feature detection instead. I have a script you may use in yours for this purpose at http://eligrey.com/2009/03/03/apng-feature-detection/
Using browser sniffing requires you to manually update your code whenever another browser supports APNG, which won’t “push” your changes to people who already downloaded a previous version.
While I agree feature detection is clearly superior to relying on a list of browser engines known to support the format, your technique might not appeal to the general public.
One reason is that it relies on a HTTP request to an image. The more important reason, however, is that it relies on the canvas tag, which defeats the whole purpose of feature detection, since the script wouldn’t be future-proof as you seem to suggest. If a browser were to add APNG but not canvas, it would incorrectly detect its support. So we’d end up adding some sort of complementary engine detection…
Well if I think with the same idea as you with the “I’ll update it if another browser supports it”, I could just add browser sniffing if a browser that doesn’t support canvas eventually supports APNG but still keep in the feature detection code to make it 100% future proof for when Firefox 3000 comes out it will still work without me needing to modify the code.
Great stuff! Any plans to port this to Jquery?
Thanks!