Adding dedicated `spring` action #189

mattgperry · 2017-08-05T11:15:30Z

This is a port of @skevy's React Animated PR facebook/react-native#15322

A "closed-form damped harmonic oscillator algorithm" simulates spring motion using stiffness, mass and damping.

This allows the creation of a great range of springs, with a smoother motion than our current (fast) physics approximation.

mattgperry

Hey @skevy, I've added some questions on the algo in here. My maths is really rudimentary so apologises for any daft questions!

mattgperry · 2017-08-05T11:21:27Z

src/actions/spring.js

+  onStart() {
+    const { velocity, to } = this.props;
+    this.t = 0;
+    this.initialVelocity = velocity / 1000;


@skevy Popmotion uses per-second measurements for velocity. Before I divided by 1000 the spring would jump to its to value, afterwards it worked nicely. The 1000 is an assumption that React Animated must be using per-millisecond velocities - is this correct, or is there a better way for me to convert per-second to the velocity expected by the simulation?

What's an example set of values you were using (before you divided v0 by 1000? I coded the velocity in Animated to also be per second...for example I usually get values for velocity in the 0-10 (+/-) px/sec range. This whole function is calculated in per second values (t is in seconds, thus dt (velocity) is also per second).

I've been using your example of { stiffness: 1000, damping: 500, mass: 3 } as a control, as I know that's a spring that's meant to look normal.

The velocity calculation in this update loop does seem to output values +/-0-10 and it works fine if I feed this value back into the next spring (like React Animated).

However we use a standard velocity calculation across every action for interoperability: speedPerSecond(current - prev, timeDelta)

The numbers I've historically received from that are closer to +/-500-5000 unit/sec. This kind of magnitude makes more sense to me because if we're making a spring that moves from 0 - 800 and it takes ~ half a second to do so, then at it's fastest you're expecting a velocity of at least ~ 1600 px/sec rather than something in the 10s.

mattgperry · 2017-08-05T11:25:33Z

src/actions/spring.js

+    const { stiffness, damping, mass, from, to, restSpeed, restDisplacement } = this.props;
+    const { delta, initialVelocity } = this;
+
+    const timeDelta = timeSinceLastFrame() / 1000;


@skevy We divide by 1000 here, this originally confused me as at first glance I thought the original PR was dividing by 1000 to get a ms value. Then I realised it looks like you're dividing milliseconds by 1000? When I applied this, the spring worked! Is there a reason for this? I'm confused about the units here.

We want t to be in units per sec. If were to just let this loop run with no animation inside of it and log t, you'd see it just counts up by fractions of a second.

Ah I see - I naturally think about this value in milliseconds, this makes sense if t is in seconds.

mattgperry · 2017-08-05T11:30:12Z

src/actions/spring.js

+
+    const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
+    const angularFreq = Math.sqrt(stiffness / mass);
+    const expoDecay = angularFreq * Math.sqrt(Math.abs(1.0 - (dampingRatio * dampingRatio)));


@skevy I added Math.abs here as with certain combinations of damping and stiffness (inc the 500/1000 in your original example) dampingRatio * dampingRatio came out as more than 1.0, which then lead to a negative number (throwing a NaN with sqrt)

This makes me think there's an error in my implementation, but I can't find it? Is this expected?

The error is in your "critically damped" branch (I pointed it out below)...expoDecay is only used when the spring is underdamped (in which case the math will work out correctly, because dampingRatio^2 will be less than one).

Yep fixing this sorted it, thanks!

skevy

Left some thoughts! Awesome to see this coming over to another lib!

skevy · 2017-08-05T17:06:47Z

src/actions/spring.js

+        ((dampingRatio * angularFreq * envelope) * ((((Math.sin(expoDecay * t) * (initialVelocity + dampingRatio * angularFreq * x0)) ) / expoDecay) + (x0 * Math.cos(expoDecay * t)))));
+    // Critically damped
+    } else {
+      const envelope = Math.exp(-expoDecay * t);


This should be Math.exp(-angularFreq * t)

skevy · 2017-08-05T17:09:21Z

src/actions/spring.js

+    // Critically damped
+    } else {
+      const envelope = Math.exp(-expoDecay * t);
+      oscillation = envelope * (x0 + (initialVelocity + (expoDecay * x0)) * t);


Should be oscillation = envelope * (x0 + (initialVelocity + (angularFreq * x0)) * t);

Doh! I was so concerned with finding an error up till that abs line that I didn't check later on. Thanks for your clear explanations, I'll take a look and make them amendments.

skevy · 2017-08-05T17:10:55Z

src/actions/spring.js

+
+    const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
+    const angularFreq = Math.sqrt(stiffness / mass);
+    const expoDecay = angularFreq * Math.sqrt(Math.abs(1.0 - (dampingRatio * dampingRatio)));


The error is in your "critically damped" branch (I pointed it out below)...expoDecay is only used when the spring is underdamped (in which case the math will work out correctly, because dampingRatio^2 will be less than one).

skevy · 2017-08-05T17:25:00Z

src/actions/spring.js

+    const { stiffness, damping, mass, from, to, restSpeed, restDisplacement } = this.props;
+    const { delta, initialVelocity } = this;
+
+    const timeDelta = timeSinceLastFrame() / 1000;


We want t to be in units per sec. If were to just let this loop run with no animation inside of it and log t, you'd see it just counts up by fractions of a second.

skevy · 2017-08-05T17:33:16Z

src/actions/spring.js

+  onStart() {
+    const { velocity, to } = this.props;
+    this.t = 0;
+    this.initialVelocity = velocity / 1000;


What's an example set of values you were using (before you divided v0 by 1000? I coded the velocity in Animated to also be per second...for example I usually get values for velocity in the 0-10 (+/-) px/sec range. This whole function is calculated in per second values (t is in seconds, thus dt (velocity) is also per second).

appsforartists · 2017-09-13T04:44:51Z

FWIW, this also exists as its own independent library: https://npmjs.com/package/wobble

in case you're interested in sharing a dependency (and any improvements) with other motion libs vs. inlining it yourselves.

Matt Perry added 2 commits August 5, 2017 12:11

adding spring

818476a

updating stats on homepage, and react storybook example

2f128e7

mattgperry commented Aug 5, 2017

View reviewed changes

skevy suggested changes Aug 5, 2017

View reviewed changes

Matt Perry added 2 commits August 6, 2017 12:17

spring updates

71aec89

updating spring calc

2e0f569

mattgperry merged commit 77269a7 into master Aug 7, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding dedicated `spring` action #189

Adding dedicated `spring` action #189

mattgperry commented Aug 5, 2017

mattgperry left a comment

mattgperry Aug 5, 2017 •

edited

Loading

skevy Aug 5, 2017

mattgperry Aug 6, 2017

mattgperry Aug 5, 2017 •

edited

Loading

skevy Aug 5, 2017

mattgperry Aug 6, 2017

mattgperry Aug 5, 2017 •

edited

Loading

skevy Aug 5, 2017

mattgperry Aug 6, 2017

skevy left a comment

skevy Aug 5, 2017

skevy Aug 5, 2017

mattgperry Aug 5, 2017

skevy Aug 5, 2017

skevy Aug 5, 2017

skevy Aug 5, 2017

appsforartists commented Sep 13, 2017

Adding dedicated spring action #189

Adding dedicated spring action #189

Conversation

mattgperry commented Aug 5, 2017

mattgperry left a comment

Choose a reason for hiding this comment

mattgperry Aug 5, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mattgperry Aug 5, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mattgperry Aug 5, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skevy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

appsforartists commented Sep 13, 2017

Adding dedicated `spring` action #189

Adding dedicated `spring` action #189

mattgperry Aug 5, 2017 •

edited

Loading

mattgperry Aug 5, 2017 •

edited

Loading

mattgperry Aug 5, 2017 •

edited

Loading