search

jeremyckahn / shifty

The fastest TypeScript animation engine on the web
https://jeremyckahn.github.io/shifty/doc/
MIT License
1.54k stars 87 forks source link

Frame-based animation support (DOM scenario: sprite sheet background-image shifting) #80

Closed ghost closed 9 years ago

ghost commented 9 years ago

What about frame-based animation support right in the "core" of Shifty? It is a very common scenario to make operations (addition/subtraction) by X steps (values/pixels/etc.), something like: every 50ms, shift (decrease) a value by 32 which translates visually into shifting the background image containing the sprite sheet by 32 pixels, to advance to the next sprite-frame. Please take a moment to think about how we could do this with high performance (not with tokens and other non-core features of Shifty). This should be a first-class feature.

jeremyckahn commented 9 years ago

Hi @adrianvoica, thanks for the suggestion. I don't feel that this is something that belongs in the Shifty core library, as it is pretty specific to a particular type of rendering use case. One of my goals for Shifty is to be renderer-agnostic. However, I believe that this functionality can be achieved with a filter. I think all a filter would need to do for this is round down the tweened values to specific key points based on a given position in the timeline. What do you think?

The sprite use case is compelling. For common web developer needs like this, I would be open to providing an additional "deluxe" build that includes a few renderer-specific extras like that.

ghost commented 9 years ago

Actually, it's not frame-based "animation" support, but rather frame-based tweening/stepping support. Yes, a filter would do the trick. I was thinking maybe at a lower level, but a filter is good enough. You can close this. Cheers!

jeremyckahn commented 9 years ago

Sure! Just let me know if you'd like to coordinate an "extras" package for non-core, but commonly useful additions like this.