Bug 73410 – Standardized API to animate spritesheets

• Status: NEW
• Component: CSS

[Paul Bakaus]

The currently fastest way to animate spritesheets (pngs with individual frames on a large sheet) on browsers that hardware accelerate 3D css transformed content is to put the actual spritesheet into a <div> with overflow hidden (set to the target frame size) and "shift" the spritesheet programmatically in JS via translate3d(). This is non-trivial, and my guess is that not only would a standardized API add clarity, but also might be further optimized.

[Dean Jackson]

For reference: http://www.starling-framework.org/  and http://www.adobe.com/devnet/flashplayer/articles/introducing_Starling.html

Not really what Paul is asking for, but still interesting.

I think such an API needs a few things:

- obviously support for arbitrary sprite sheets (width height rows colums)
- ability to set a frame
- for animations, set a target fps

Should this be in CSS? It seems very-much content to me.

[Paul Bakaus]

Hey Dean,

yeah, I've seen starling. Nice project, would be lovely to have this on top of WebGL.

There's more you can do with the sprite animation API:

- easing
- b-frame (delta) support

It would be interesting to learn from you if you see this as purely API/abstraction win, or if you think, like me, that it can aid performance. Maybe I'm wrong, and above solution can't be accelerated much.

Thanks,
Paul