Thursday, March 12th, 2009

APNG Class: Get APNG going on all browsers

Category: JavaScript, Library, MooTools, UI, Utility

<p>

Guillermo Rauch, who has a really nice looking site at devthought has created APNG a class to bootstrap animating PNG images:

APNG provides simple frame-based animation functionality. It’s main goal is solve the problem of animating alpha-transparent images (PNG format).
Features

APNG is very flexible when it comes to the method of displaying the various animation frames.

The default behavior is taking the filename, for example spinner.png, and changing the src or background-image attribute to spinner-2.png, spinner-3.png and so on.

If the useNative functionality is in place, which is set to be on for Firefox 3 and Opera 9.5, the Javascript-based animation is not run. I encourage you to create an actual APNG for the default frame (spinner.png). If you do so, you’ll see increased performance for the browsers that support it -while also promoting the adoption of this new format-, and other browsers will just display the first frame and the animation will run via JavaScript.

You can also use background-position based animations to avoid making multiple requests, and avoid potential cache issues in old browsers.

The APNG class supports dynamic pausing, canceling, resetting and starting of animations. Frames can have a fixed interval or one can be assigned for each of them. Preloading is supported, which can prove useful for long animations or animations that are initialized and not run from the start.

Check out the demo page and see how to use it:

javascript
< view plain text >
  1. // new image
  2. img = new Element('img', { src: 'images/zoom-spin.png' }).inject(document.body);
  3. new APNG(img, { useNative: false, frames: 12, endless: false });
  4.  
  5. // existing images
  6. new APNG('imganimated', { useNative: false, frames: 12, endless: true });
  7.  
  8. // existing div
  9. new APNG('divspinner', { useNative: false, frames: 12, endless: true, property: 'background-image' });
  10.  
  11. // existing div, single image
  12. new APNG('divspinner2', { useNative: false, frames: 12, endless: true, property: 'background-position', axis: 'x', interval: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10] } );

Related Content:

  • Class invariants
    Examples of how to handle these...
  • Head of the Class
    Got your MBA study guide yet? More information security pros are going back to school and chasing down a graduate business...
  • Going OWA all the way
    For small businesses, using Outlook Web Access instead of Outlook is a way to save money on user hardware costs and simplify administrative updates...
  • Go directly to the class source
    When editing code, within WebSphere Studio, you can go directly to the source code for a class by doing a CTRL-click on the variable name for the...
  • Classes and conferences
    +++--
    3.3 rating from 17 votes

16 Comments »

Comments feed TrackBack URI

The naming is quite unfortunate, since APNG already stands for “Animated Portable Network Graphics”. Very confusing.

http://en.wikipedia.org/wiki/APNG

Comment by edwinm — March 12, 2009

Well, let’s delete my last post :-(

Comment by edwinm — March 12, 2009

APNG is a bad idea. It breaks the PNG standard and causes problems for sites that accept user content (a user might upload an APNG that has mickey mouse as the first frame and goatse as the second, and the staff would never know, unless they use a browser with a nonstandard PNG implementation).
If you like open standards, you can’t support this Microsofty stuff.

Comment by gao — March 12, 2009

Side note: margins.

Beautiful site though.

Comment by igaenssley — March 12, 2009

@gao
Please review your arguments of why APNG is a bad idea. Your first ‘argument’ is an opinion by someone. While that person considers it breaks the standard, I think it enhances the standard. And I think editing software should be upgraded to support that enhancement.

The second one is borderline ridiculous. Sites that allow user-uploaded content can decide either to allow APNGs or not easily. If they choose to do so, they have to use the proper browser to moderate (which they likely already have, Firefox3). If they want to use IE, they can block APNGs and the “problem” is solved. Since Firefox 3 is the most common choice for IT people and webmasters, the problem is also non-existent.

Finally, I fail to see why an open specification by the Mozilla foundation is remotely Microsofty stuff.

Comment by Appletalk — March 12, 2009

@gao – I like APNG over MNG because when you serve a multi frame APNG, to a standard PNG viewer, you do get the 1st frame. Any additional frames can be treated as progressive enhancement.

Comment by WillPeavy — March 12, 2009

Fun. Dojo did the same technique two years ago:

http://bugs.dojotoolkit.org/browser/trunk/src/widget/AnimatedPng.js

though it never made the migration to 1.0 because of it’s limited usefulness, it could very easily be ported.

Comment by phiggins — March 12, 2009

That’s funny.
I’ve created a mootools class for APNG to a while ago..

http://www.aryweb.nl/voorbeelden/apng/

Comment by ArianStolwijk — March 12, 2009

That is a terrible name to give this library. The only time you would name this library “APNG” (which even then, I would name it something like xAPNG, for cross-browser APNG) is when it’s a a script that actually parses APNG files and displays them.

Comment by EliGrey — March 12, 2009

@eli

it does for browsers that support them. rtfa.

Comment by rasmusfl0e — March 12, 2009

@rasmusfl0e
You seem to have not rtfa. This script does not parse APNG images. Also, it uses browser sniffing to detect APNG support so if IE implements APNG, you would have to know about it and modify the code to accept IE9.

Comment by EliGrey — March 14, 2009

http://www.germanyflowershop.com
Send gifts to India, Online delivery of flowers to India, gift to India, chocolates, cakes, watches, teddy, sweets, fresh fruits, dry fruits.
Anniversary, birthday, wedding gifts, cakes to Bangalore, Chennai, Delhi, Pune, Hyderabad, Kerala, Mumbai, Mithai Same day delivery to India, Gift Shop.

Comment by 111111111111 — March 17, 2009

@Appletalk “While that person considers it breaks the standard, I think it enhances the standard.” No, it breaks it, period. PNG is also known as ISO/IEC 15948:2003. APNG violates 15.2.1(c) “No chunks or other content follow the IEND chunk,” therefore, it cannot be considered a valid PNG datastream in the legal sense. You can call whatever bastardized form this is whatever you like, but it cannot be PNG.

“Sites that allow user-uploaded content can decide either to allow APNGs or not easily.” And how would they do that, exactly, when the MIME type, header, and file file extension are exactly the same as a “normal” PNG? You’d have to parse every PNG for acTL before an IDAT, adding more computational load to the server. As for manually policing via a compatible browser, are you joking?!

@WillPeavy: The problem comes with standard editors. If they strictly follow the ISO standard, they will end up truncating all frames but the first, thus effectively destroying the APNG. So much for “graceful degradation”. And speaking of which, whose bright idea was it that it is acceptable to show the first frame of an animation, yet still not show anything else, while it is unacceptable to not show anything at all? That’s so backwards! If my browser is broken somehow and can’t play a video format (and let’s not delude ourselves; that’s exactly what APNG is, contrary to its fraudulent MIME type) I want to KNOW it’s broken so I can take countermeasures to ensure it works in the future. APNG instead masks the deficiency so that the user isn’t even aware that there was supposed to be video there. Imagine their rightful confusion. Is this the right page? Is the image not animating because the browser doesn’t support it? Is it just locking up randomly?

Comment by PacoBell — March 19, 2009


function testing() {
the formatting here;
}

Comment by ExtAnimal — March 23, 2009

<a>

Comment by ExtAnimal — March 23, 2009


<a href="javascript:(function(){
alert('gotcha');
})()">Alert me<a>

Comment by ExtAnimal — March 23, 2009

Leave a comment

You must be logged in to post a comment.