Alex Rivera | Logout

Damping Effect of Spring-Mass System (or is this ElasticEase?)

Asked 2011-09-09T17:08:26.030
11

I'm trying to emulate an animation effect in code (almost any language would do as it appears to be math rather than language). Essentially, it is the emulation of a mass-spring system. I've been looking at WPF/Silverlight's ElasticEase and this appears to be pretty close to what I'm looking for, but not quite.

First of all, here's what I'm looking for - an object, travelling a certain number of seconds, hitting a location and immediately slowing down to ocsillate for a certain number of seconds to rest at the same point where damping was applied. So to visualize this, let's say I have a 600w/900h canvas and I have an square that begins to animate from 900px to 150px in a TranslateTransform.Y. It takes 4 seconds to reach 150px height (187.5px per second), at which stage it immediated gets damped and only travels about 35px more for 0.4 seconds (87.5px per second) to 115px height, then rebounds down for 1 second to 163px height (48px and 48px per second) and then rebounds back up to 146px (17px and 17px per second) and so on until the ocillations slow it to its final resting place of 150px. The ocillation period is 16 seconds.

The example I described above is the top left blue rectangle here: enter image description here

Here's what I will know in advance - the pixel distance and number of seconds it takes to get from point A to point B, the number of seconds for ocillation. Things like mass don't seem to matter.

I've tried ElasticEase and the issue seems to be that I can't get the object to travel with no easing for 4 seconds and then "bounce" for the next 16 seconds. The .Springiness is also always way too much, even if I set it to be a really high number like 20.

ILSpy show's its function as:

protected override double EaseInCore(double normalizedTime)
        {
            double num = Math.Max(0.0, (doubl
wpf silverlight animation physics
Edit
Report

1 Answer

9

Skip the physics and just go straight to the equation.

parameters: “Here's what I will know in advance - the pixel distance [D] and number of seconds [T0] it takes to get from point A to point B, the number of seconds for oscillation [T1].” Also, I'll add as free parameters: the maximum size of oscillation, Amax, the damping time constant, Tc, and a frame rate, Rf, that is, at what times does one want a new position value. I assume you don't want to calculate this forever, so I'll just do 10 seconds, Ttotal, but there are a variety of reasonable stop conditions...

code: Here's the code (in Python). The main thing is the equation, found in def Y(t):

from numpy import pi, arange, sin, exp

Ystart, D = 900., 900.-150.  # all time units in seconds, distance in pixels, Rf in frames/second
T0, T1, Tc, Amax, Rf, Ttotal = 5., 2., 2., 90., 30., 10. 

A0 = Amax*(D/T0)*(4./(900-150))  # basically a momentum... scales the size of the oscillation with the speed 

def Y(t):
    if t<T0:  # linear part
        y = Ystart-(D/T0)*t
    else:  # decaying oscillations
        y = Ystart-D-A0*sin((2*pi/T1)*(t-T0))*exp(-abs(T0-t)/Tc)
    return y

y_result = []
for t in arange(0, Ttotal, 1./Rf):  # or one could do "for i in range(int(Ttotal*Rf))" to stick with ints    
    y = Y(t)
    y_result.append(y)

The idea is linear motion up to the point, followed by a decaying oscillation. The oscillation is provided by the sin and the decay by multiplying it by the exp. Of course, change the parameters to get any distance, oscillation size, etc, that you want.

enter image description here

notes:

  1. Most people in the comments are suggesting physics approaches. I didn't use these because if one specifies a certain motion, it is a bit over-doing-it to start with the physics, go to the differen
answered 2011-09-13T15:45:38.243

Your Answer