CODEWITHSUNDEEP
javascriptanimation
coure2011
coure2011

Reputation: 42404

How to use this easeOutBounce method?

here is the method for easeOutBounce 

    easeOutBounce: function (t, b, c, d) {  
  if ((t/=d) < (1/2.75)) {  
   return c*(7.5625*t*t) + b;  
  } else if (t < (2/2.75)) {  
   return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;  
  } else if (t < (2.5/2.75)) {  
   return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;  
  } else {  
   return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;  
  }  
 }

I want to make my own custom method, cannot use jquery or other library.

Where t: time, b: begining position, c: total change in position, d: duration.
Can any one explain how can i use this method for easeOutBounce value? I mean what i will pass as parameter and how i will use the return value?

Upvotes: 1

Views: 7905

Answers (2)

Smig
Smig

Reputation: 693

Very old question, but for anyone that stumbles on it (like I just did) and since it requires not to use a library, I feel this needs another answer.

I'm just now tackling the same problems, and I don't know about javascript, but this might apply as well. What I'm doing is this:

  1. Execute that method repeatedly with some time interval that you find comfortable. The lower the value, the more fluid the animation, but the more load it puts on the system.

  2. Use the following parameters:
    b = 0
    c = 1
    d = animation duration in some time unit
    t = time passed since start in the same tu

  3. The returned value will be a number between 1 and 0. 0 meaning it's at the start position, and 1 meaning it's at the end. From here, all you need to do is multiply it by the total distance in each coordinate, and add that value to each current coordinate value to put the object in the correct position during the animation.

Further info:

This link was very useful for me, in understanding these functions.

Upvotes: 0

Tim
Tim

Reputation: 7056

Using jQuery, you can simply call this event in any animation. Make sure that you include the relevant JS files and put something like:

$('#your-div').click(function() {
  $(this).animate({height: "100px"}, 500, 'easeOutBounce');
});

Upvotes: 2

Related Questions