3 ms·

Absolutely agree. react-tween-state is less about the specific tweening function and more about the idea of a numeric value changing over time that can be inte

Absolutely agree. react-tween-state is less about the specific tweening function and more about the idea of a numeric value changing over time that can be interrupted. Instead of the standard Penner tweening functions you could just as easily substitute in some physics (like https://github.com/facebook/rebound-js https://github.com/facebook/rebound-js). And with the DESTRUCTIVE mode of react-tween-state you can seamlessly transition between direct manipulation mode and inertia mode. There's still a lot to do here, but I am pretty positive on the overall approach.

seanmcdirmid 12y ago
Reading the github page, though, this is really about tweening with no mention of interruption. However, using Verlet (not Newtonian like rebound-js!) you can easily combine both approaches since Verlet allows you to mess with a position directly (velocity is implicit in position deltas, so really stable although less accurate). I wrote a rejected paper about this a few years ago; it might be useful as a reference: http://research.microsoft.com/pubs/191705/uiphysics09.pdf http://research.microsoft.com/pubs/191705/uiphysics09.pdf I wrote that when I was doing a lot of work with WPF, whose animation/data binding system is fairly similar to what is being explored in Javascript today (with frameworks like React). But beyond data binding and canned animations, I think physics is the next step.
- dandelany 12y ago
  Re: interruption, from the docs: > stackBehavior (default: tweenState.stackBehavior.ADDITIVE). Subsequent tweening to the same state value will be stacked (added together). This gives a smooth tweening effect that is iOS 8's new default... The other option is tweenState.stackBehavior.DESTRUCTIVE, which replaces all current animations of that state value by this new one. So DESTRUCTIVE is what allows interruption.
  - seanmcdirmid 12y ago
    This is not much different from WPF's animation support, and I don't think it really helps. The interruptions are still not very natural looking. It was definitely useless for Surface (the table, not the tablet) when I was doing UX prototypes for it.
    - chenglou 12y ago
      Additive is a better "interruption" in a lot of cases from what I've seen. Destructive was added after the fact for completeness. What do you think?
    - peterhunt 12y ago
      I would love to chat with you about what you've learned working on this stuff. If you're interested, drop me an email at floydophone at gmail dot com

seanmcdirmid 12y ago

Reading the github page, though, this is really about tweening with no mention of interruption. However, using Verlet (not Newtonian like rebound-js!) you can easily combine both approaches since Verlet allows you to mess with a position directly (velocity is implicit in position deltas, so really stable although less accurate). I wrote a rejected paper about this a few years ago; it might be useful as a reference: http://research.microsoft.com/pubs/191705/uiphysics09.pdf http://research.microsoft.com/pubs/191705/uiphysics09.pdf I wrote that when I was doing a lot of work with WPF, whose animation/data binding system is fairly similar to what is being explored in Javascript today (with frameworks like React). But beyond data binding and canned animations, I think physics is the next step.

dandelany 12y ago
Re: interruption, from the docs: > stackBehavior (default: tweenState.stackBehavior.ADDITIVE). Subsequent tweening to the same state value will be stacked (added together). This gives a smooth tweening effect that is iOS 8's new default... The other option is tweenState.stackBehavior.DESTRUCTIVE, which replaces all current animations of that state value by this new one. So DESTRUCTIVE is what allows interruption.
- seanmcdirmid 12y ago
  This is not much different from WPF's animation support, and I don't think it really helps. The interruptions are still not very natural looking. It was definitely useless for Surface (the table, not the tablet) when I was doing UX prototypes for it.
  - chenglou 12y ago
    Additive is a better "interruption" in a lot of cases from what I've seen. Destructive was added after the fact for completeness. What do you think?
  - peterhunt 12y ago
    I would love to chat with you about what you've learned working on this stuff. If you're interested, drop me an email at floydophone at gmail dot com