Re: [css-transitions] Proposal and RFC: spring() timing function

> On Jun 29, 2016, at 9:32 PM, Dean Jackson <dino@apple.com> wrote:
> 
> Proposal: spring() timing function in CSS and Web Animations
> =======================
> 
> We propose adding a new timing function for transitions and animations to
> simulate the effect of a spring-based motion between the endpoints.
> 
> Over the past few years, Apple's designers have moved to more physically-based
> motion effects. Not only do these look more natural and fun, they also are
> often easier to tweak to get a desired effect. By far the most common type of
> motion we've seen is a simulation of a spring.
> 
> There are a lot of online resources discussing why this is good. Here is one of
> my favourites: Creating Animations and Interactions with Physical
> Models --> https://iamralpht.github.io/physics/
> 
> We're still discussing what is the best way to expose springy animations.
> Some internal feedback has suggested that our parameterisation below is
> too hard to author, and that we should favor a more simple F = -kx approach.
> I'm sure there are lots of people reading who have opinions. Please
> share these opinions!
> 
> Here is what we propose today as a starting point:
> 
> spring(mass stiffness damping initialVelocity)
> 
>  Simulate a spring using the solving algorithm defined by this JavaScript
>  function [1].
> 
>  mass: The mass of the object attached to the end of the spring. Must be greater
>  than 0. Defaults to 1.
> 
>  stiffness: The spring stiffness coefficient. Must be greater than 0.
>  Defaults to 100.
> 
>  damping: The damping coefficient. Must be greater than or equal to 0.
>  Defaults to 10.
> 
>  initialVelocity: The initial velocity of the object attached to the spring.
>  Defaults to 0, which represents an unmoving object. Negative values
>  represent the object moving away from the spring attachment point, positive
>  values represent the object moving towards the spring attachment point.

Would it make sense to also have an initial displacement? I'd guess an animation for something snapping back after you pull it best modeled as a critically damped spring with no initial velocity but a nonzero initial displacement. At the very least it seems weird for this to be missing.

While the mass unit here is arbitrary, perhaps the implied time and distance units don't have to be, so perhaps they should be something logical. For example, if an object is already moving at some speed across the screen and you want it to act as if it ran into a spring to stop, it might be nice to know how to pass in your initial velocity.

Regards,
Maciej

Received on Friday, 1 July 2016 01:21:14 UTC