Question

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:

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, (double)this.Oscillations);
            double num2 = Math.Max(0.0, this.Springiness);
            double num3;
            if (DoubleUtil.IsZero(num2))
            {
                num3 = normalizedTime;
            }
            else
            {
                num3 = (Math.Exp(num2 * normalizedTime) - 1.0) / (Math.Exp(num2) - 1.0);
            }
            return num3 * Math.Sin((6.2831853071795862 * num + 1.5707963267948966) * normalizedTime);
        }

I’ve included 2 videos and and an Excel file in a zipped folder on DropBox. I guess this question will be more of a work-in-progress as folks ask more clarifying questions.

(DISCLAIMER: I don’t know what I’m talking about when it comes to much of this stuff)

Answer 1

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.

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 differential equations, and then calculate the motion, and tweak the parameters to get the final thing. Might as well just go right to the final thing. Unless, that is, one has an intuition for the physics that they want to work from.
2. Often in problems like this one wants to keep a continuous speed (first derivative), but you say “immediately slows down”, so I didn’t do that here.
3. Note that the period and amplitude of the oscillation won’t be exactly as specified when the damping is applied, but that’s probably more detailed than you care about.
4. If you need to express this as a single equation, you can do so using a “Heaviside function”, to turn the contributions on and off.

At the risk of making this too long, I realized I could make a gif in GIMP, so this is what it looks like:

I can post the full code to make the plots if there’s interest, but basically I’m just calling Y with different D and T0 values for each timestep. If I were to do this again, I could increase the damping (i.e., decrease Tc), but it’s a bit of a hassle so I’m leaving it as is.