0

I'm learning Easingfunction's application in XNA. But I can't understand the mathematical equations of it.

For Example, the formula used for BackEase:

f(t) = t^3 - a * t * sin (t * pi)

SinEase:

f(t) = 1 - [Sin (1 - t) * (pi / 2)]

and BounceEase, ElasticEase (I couldn't find its formula)... Why did they apply it?

Bernhard Barker
  • 54,589
  • 14
  • 104
  • 138
user2360585
  • 1
  • 3
  • 2
    what do you mean by "can't understand"? The point of an easing function is to provide a smooth transition from 0 to 1, which these equations ought to produce if you put them into any interactive graphing application (e.g. wolfram alpha) – Alnitak May 08 '13 at 08:50

1 Answers1

2

I am not an expert on this, but it's all about having smooth transition effects.

E.g. going from yellow to blue, linear easing gives you an abrupt start from yellow to greenish, then a perfect smooth gradation from yellow greenish to blue greenish, and then an abrupt at blue.

For bounce easing, it bounces from yellow to a little greenish and back to yellow, then to a little more greenish and back, then to blueish green and back, then to completely blue.

The graphs at http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html gives you an overview of which other transitions are possible.

Each of these transitions is implemented as a mathematical function or a set of functions that gives you a percentage transition in function of the time t.

For BackEase, the function with e.g. a=1/3, gives: http://www.wolframalpha.com/share/clip?f=d41d8cd98f00b204e9800998ecf8427elqqoohmvph

In pseudo-code, this is what happens during a transition:

int yellow = ...
int blue = ...
float a = ...
for(int i = 1 to 100)
{
  float t = i/100

  float f = t^3 - a * t * sin (t * pi)  //--> BackEase function

  set color = yellow + f * (blue - yellow)
  sleep 
}
GeertPt
  • 16,398
  • 2
  • 37
  • 61