Easing

[Kjell]

Quick port of Robert Penner's easing equations*



*Excluding bounce, since that's not really a equation.

Code: Select all

// Sine

float easeInSine(float T)
{
  return sin((T-1)*PI*0.5)+1;
}

float easeOutSine(float T)
{
  return sin(T*PI*0.5);
}

float easeInOutSine(float T)
{
  return 0.5*(1-cos(T*PI));
}

// Quadratic

float easeInQuad(float T)
{
  return T*T;
}

float easeOutQuad(float T)
{
  return 0-T*(T-2);
}

float easeInOutQuad(float T)
{
  if(T < 0.5)
  {
    return 2*T*T;
  }
  else
  {
    return -2*T*T+4*T-1;
  }
}

// Cubic

float easeInCubic(float T)
{
  return T*T*T;
}

float easeOutCubic(float T)
{
  float F = T-1;
  return F*F*F+1;
}

float easeInOutCubic(float T)
{
  if(T < 0.5)
  {
    return 4*T*T*T;
  }
  else
  {
    float F = 2*T-2;
    return 0.5*F*F*F+1;
  }
}

// Quartic

float easeInQuart(float T)
{
  return T*T*T*T;
}

float easeOutQuart(float T)
{
  float F = T-1;
  return F*F*F*(1-T)+1;
}

float easeInOutQuart(float T)
{
  if(T < 0.5)
  {
    return 8*T*T*T*T;
  }
  else
  {
    float F = T-1;
    return -8*F*F*F*F+1;
  }
}

// Quintic

float easeInQuint(float T)
{
  return T*T*T*T*T;
}

float easeOutQuint(float T)
{
  float F = T-1;
  return F*F*F*F*F+1;
}

float easeInOutQuint(float T)
{
  if(T < 0.5)
  {
    return 16*T*T*T*T*T;
  }
  else
  {
    float F = 2*T-2;
    return  0.5*F*F*F*F*F+1;
  }
}

// Exponential

float easeInExpo(float T)
{
  return T ? pow(2,10*(T-1)) : T;
}

float easeOutExpo(float T)
{
  return T == 1 ? T : 1-pow(2,-10*T);
}

float easeInOutExpo(float T)
{
  if(T == 0 || T == 1)return T;

  if(T < 0.5)
  {
    return 0.5*pow(2,(20*T)-10);
  }
  else
  {
    return -0.5*pow(2,(-20*T)+10)+1;
  }
}

// Circular

float easeInCirc(float T)
{
  return 1-sqrt(1-T*T);
}

float easeOutCirc(float T)
{
  return sqrt((2-T)*T);
}

float easeInOutCirc(float T)
{
  if(T < 0.5)
  {
    return 0.5*(1-sqrt(1-4*T*T));
  }
  else
  {
    return 0.5*(sqrt(0-(2*T-3)*(2*T-1))+1);
  }
}

// Back

float easeInBack(float T)
{
  return T*T*T-T*sin(T*PI);
}

float easeOutBack(float T)
{
  float F = 1-T;
  return 1-(F*F*F-F*sin(F*PI));
}

float easeInOutBack(float T)
{
  float F;

  if(T < 0.5)
  {
    F = 2*T;
    return 0.5*(F*F*F-F*sin(F*PI));
  }
  else
  {
    F = 1-(2*T-1);
    return 0.5*(1-(F*F*F-F*sin(F*PI)))+0.5;
  }
}

// Elastic

float easeInElastic(float T)
{
  return sin(13*PI*0.5*T)*pow(2,10*(T-1));
}

float easeOutElastic(float T)
{
  return sin(-13*PI*0.5*(T+1))*pow(2,-10*T)+1;
}

float easeInOutElastic(float T)
{
  if(T < 0.5)
  {
    return 0.5*sin(13*PI*T)*pow(2,10*(2*T-1));
  }
  else
  {
    return 0.5*(sin(-13*PI*T)*pow(2,-10*(2*T-1))+2);
  }
}

K

[y offs et]

Oh! I'm speechless.

That is so hugely useful!

[jph_wacheski]

Very nice Kjell,. this will save me some time for sure!

I had suggested these could be built in the animator component, in a little drop-down menu, quite a while back,. and I have ever since intended to build a library like this,. just never enough time.

These have many uses,. procedural animation is my first goal,. but acceleration, spawn rates, even audio mix levels,. or color cycles will all benefit from an easy to use set up like this.

Thanks a bunch.

[airpas]

can some one please put a small example showing how to use those formulas.

[Kjell]

Hi airpas,

can some one please put a small example showing how to use those formulas.

In order to use the functions you need to add a ZLibrary component to App.OnLoaded and paste them into the Source property. Then simply call any of the functions from a Expression using the following syntax.

Code: Select all

myVariable = easeInSine(myValue);

The value that you use with any of the functions should be in the 0 to 1 range. So for example ..

Code: Select all

myVariable = easeInOutSine(frac(App.Time));

.. gives you a value that eases in & out using a sine curve every second.

You can use these functions for a wide variety of things ( animation, rendering, physics, filtering etc. ), but attached is a simple use case. Use your mouse & left mouse button to move the circle.

K

[jph_wacheski]

ok, here is a little test thing I am using,. it just plots the curves so you can see them easily,. and moves a ball to show the motion you can get.

Simply change the easing types to see the different results.

the library just converts linear change to the curves you see.

[airpas]

this is really helpful:) , many thanks Kjell .

thanks jph for the useful example