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

> On Jun 30, 2016, at 6:20 PM, Maciej Stachowiak <mjs@apple.com> wrote:
> 
>> 
>> 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.

I just realized that the difference between the start position and the end position must logically be the initial displacement.

Regards,
Maciej

Received on Friday, 1 July 2016 07:30:33 UTC