Ben's Sandbox
  • Projects
  • Tags

Javascript Physics - Using Easing to Animate Acceleration


View Blog   View Source  
A quick example of how easing functions can make animating realistic physics effects very simple. The first box is animated using no easing (linear) and all the calculations for accelerating and decelerating box are done in the step function. The second box uses the jQuery UI Quad In/Out easing to do the same effect. Acceleration follows a quadratic curve (t^2) when plotting the distance traveled over time. The curves are plotted below the boxes as they animate to show they are the same curves. You can adjust the slider to manipulate the distance accelerated before slowing to the stopping point.


acc (px/ms^2) pos dcc (px/ms^2)
Calculated
d t
Easing
d t



© Ben Olson 2012 with help from Jekyll Bootstrap and Twitter Bootstrap