Javascript Physics - Using Easing to Animate Acceleration
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