- From: Maciej Stachowiak <mjs@apple.com>
- Date: Fri, 01 Jul 2016 00:29:56 -0700
- To: Dean Jackson <dino@apple.com>
- Cc: www-style list <www-style@w3.org>
- Message-id: <B4F8DAED-0440-4B6D-A143-2FB8535EEC13@apple.com>
> 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