Bug 73410
| Summary: | Standardized API to animate spritesheets | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Paul Bakaus <pbakaus> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Enhancement | CC: | cmarrin, dino, mdelaney7, shanestephens, simon.fraser |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | All | ||
| OS: | All | ||
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
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