Tim’s
Bandwagon

4 Comments

1. Hi, I am amazed how you guys manage to work out easing calculation like that of robert penner….

   I mean fully grasp the logical part of the equation.

   Please do give me a hint in that aspect….

   Certainly hope that I don’t have to be a math expert to do that….

   Comment by Lame at 8:40 am on January 30th, 2004 #link

2. Hey Tim, nice blog! Thanks for the link

   Lame,

   An easing equation is a “grand” name for a simple thing: the thoughest part is to find a Math function f(x) that is continuous for x on [0,1] such that f(0) equals 0 and f(1) equals 1. Example of such function:

   f(x) = x; // for x in [0,1]
   f(x) = x^2; // for x in [0,1]
   f(x) = sin(x*PI/2); // for x in [0,1], right Tim ;)?

   You can create functions as complicated as you like or even functions that use different formulas for different intervals to create complex effect (Robert Penner’s bounce equation for example). Typically, you’d have things like:

   f(x) = f1(x); for x in [0, 0.5];
   f(x) = f2(x); for x in ]0.5, 1];

   In that case, the only requirements are that f1(0) equals 0 and f2(1) equals 1. it’s good if f1(0.5) equals f2(0.5), for a continuous looking curve, but it is not a requirement.

   Once you have found a function f(x) that you like, the rest is easy: just plug it in Robert Penner’s function signature:

   myEasingEquation = function(t, b, c, d) {
     t/=d;
     return b+c*(f(t));
   }

   Replace f(t) by the actual implementation of the function you have chosen above (x becomes t). The bit of code above serves to do a change of coordinate system.

   Here is a test case: if you want your tween to move over 20 iterations, ‘t’ should be passed changing from 1 to 20 and ‘d’ should always be passed as 20. the lines “t/=d;” transform ‘t’ so that it fits in the range [0, 1] (to be used by the function). In your tween, say you want to change the _alpha value from ‘50′ to ‘75′, the line “return b+c*(f(t));” will transform the output of the function to add it to the starting value and modify the amplitude to match your total change (75-50). In this example, as t=20, the steps will be:

   
   t = 20/20; // 1
   return 50+(75-50)*(f(1));

   since f(1) = 1, you end up as

   50+(75-50)*1
   50+75-50
   75

   You’ve reached your destination

   Tim.

   Comment by Timothee Groleau at 9:02 am on March 5th, 2004 #link

3. hi there…………….

   u know what……. u r great….

   who says, maths is so cold……………..

   u r the great example of graphics and mind

   sohail

   Comment by sohail at 1:36 pm on April 20th, 2004 #link

4. pffft

   i’ll leave the maths to the experts

   Comment by nat at 2:32 pm on June 25th, 2006 #link

Leave a Comment