UI Animation and Springs

[B-Reif]

Motivation

I’m writing this thread to advocate for a UI animation approach based on springs. From the popular js library react-spring:

Why springs and not durations

... [a spring] does not have a defined curve or a set duration... We think of animation in terms of time and curves, but that in itself causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that.

We are so used to time-based animation that we believe that struggle is normal, dealing with arbitrary curves, easings, time waterfalls, not to mention getting this all in sync.

Usage

As usual, the user specifies key values to interpolate from and to. These keys are provided with a spring value, which describes interpolation in terms of forces and resistance. The animation system generates the actual timings and interpolates values from the spring. This abstraction helps ensure the end animation moves in a natural way.

Implementation

Springs can be implemented on top of other lower-level animation APIs. A pure function can map a spring value to other kinds of values, including curves or a simple collection of key values. In some cases, this mapping could even be done ahead of time in a build step, which would allow a ‘zero-cost’ implementation. In cases where the parameters aren’t known at build time (or if the mapping isn’t expensive) this mapping can happen during runtime.

[alice-i-cecile]

@lassade has done some work on related lines in #1770 and https://github.com/lassade/bevy_gizmos I believe :)