11
\$\begingroup\$

I started to involve myself with easing functions (Flash AS3), came about in trying to understand TweenLite and Robert Penner's website: http://www.robertpenner.com/easing/

The question I have is what is the math basis for these functions. I've seen other sites modify the functions to create custom easing function.

\$\endgroup\$
1

2 Answers 2

6
\$\begingroup\$

Well tweening in the general case is just parametric movement (specifically, defining a function f(x) where x can be 0..1 for position/rotation/scale/whatever) with a modifier on the parametric value you pass in. The modifier also has the range 0..1.

If you plot the algorithm on a graph you'll get something that starts at 0, ends at 1, and the slope of the curve defines the velocity at that point in time.

If you want the math for the easing functions themselves, check this out: http://iphonedevelopment.blogspot.com/2010/12/more-animation-curves-than-you-can.html

\$\endgroup\$
4
\$\begingroup\$

I've written a primer on interpolation, which may be of some use - http://iki.fi/sol/interpolation/

Another great resource is this interactive tool: http://www.gizma.com/easing/

\$\endgroup\$
3
  • \$\begingroup\$ That first link is very informative. Good article. \$\endgroup\$
    – bummzack
    Jan 5, 2011 at 12:10
  • \$\begingroup\$ @JariKomppa I have to ask, where does the (3-2(x)) come from? And why does x have parentheses? Doesn't it always result in 3-(2*x)? \$\endgroup\$
    – Sidar
    Oct 14, 2012 at 23:02
  • \$\begingroup\$ @Sidar Can't remember offhand where the formula comes from, but basically it's a special case spline (which leads to a simple formula). The (x) is due to the macro form - 'x' may be anything, for example '3+7', which would lead to (3-2*(3+7)) and not (3-2*3+7). \$\endgroup\$ Oct 23, 2012 at 9:57

You must log in to answer this question.