Easing Functions Cheat Sheet

by bpierre • 13 years ago

122 27 13 years ago

walid• 13 years ago

Love your idea and responsive design.

james33• 13 years ago

This is exactly what we've been needing and been thinking about putting together for some time. Thanks for saving us the time!

tieTYT2• 13 years ago

Is this purely for visuals? I'd like to use this to balance a game. EG: easeInQuad is a good graph shape for xp needed to level. But I can't tell if this can be used for that. Maybe if there were some examples of that function they always stub out it'd be easier to know.

roryokane• 13 years ago

I think these curves are meant only for animations. For game logic curves, you should choose an elementary function (https://en.wikipedia.org/wiki/List_of_mathematical_functions...) that fits your curve best and implement the math yourself. For an EXP-needed-to-level function, it would be simplest to implement an eponential curve (https://en.wikipedia.org/wiki/Exponential_growth) of the form c⋅b^x. In your game, that would be (initial_exp ⋅ (growth_rate ^ level_number)). Or you could implement the quartic function (https://en.wikipedia.org/wiki/Quartic_function), which represents the easeInQuad curve you liked on the web page.

tieTYT2• 13 years ago

Thanks for the info. Yeah, I've already done that. I was just wondering if this could be used as an alternative. Since it can't be... what's the purpose of this library?

ledneb• 13 years ago

Great stuff. It would be super useful if a mathematical definition of the easing was provided though (unless I'm missing something on my mobile browser).

Kronopath• 13 years ago

Agreed. This seems highly focused on web development, showing the CSS and jQuery function calls, but it could potentially be very useful for other things, like games, or animations in desktop applications.

jpitz• 13 years ago

I'm thinking of ramp-in / ramp-out for load simulations.

v13inc• 13 years ago

You can check out code samples in a bunch of different languages here: http://www.robertpenner.com/easing/

Funny note: That site and code has been around since the early Actionscript 2 days, and I went to hunt it down as a reply to ledneb. It looks like easing.net might actually be by the same guy ;)

forrestthewoods• 13 years ago

This x100. Show the actual equations no it can be useful for many more things.

cleverjake• 13 years ago

Also worth checking out http://cubic-bezier.com/

brandonbloom• 13 years ago

Very neat! Would be good to show the formula and/or code on the ease-function details page too.

rtkwe2• 13 years ago

http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

The plugin the author talking about and used is linked. Most of these can be described as variations on a handful of core functions: logarithmic, s-curve (logistic), and exponential. The stranger ones like the elastics aren't done with straight math formulas, or they're piecewise.

gohrt• 13 years ago

No animation for the linear evolution :(

Mithaldu• 13 years ago

There is one function i looked for and couldn't find. It would be easeInOutCirc, but instead of being a combination of first easeInCirc, then easeOutCirc, it would be the opposite: First easeOutCirc, going into easeInCirc.

rtkwe2• 13 years ago

These should fairly easy to combine just being js functions. It's a jQuery plugin:

http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

Dru89• 13 years ago

I love the page. I was kind of hoping the transition to the function page used the easing that I selected, though.

AsymetricCom• 13 years ago

A great illustration of why OOP style of development is wrong.

smoyer2• 13 years ago

These are really interesting and I never realized that there are so many of them. Railways use "easements" to guide trains in and out of curves, so rather than just changing from straight track to the radius of the curve, there's a section that approaches the radius. If the train is making a right angle turn, it will do somewhere around 85 degrees of that turn at the expected radius.

peter_l_downs2• 13 years ago

Very interesting! For anyone else that's curious, I found a Wikipedia article [0] with more information. It turns out that an "easement" can also be a right to use land that you don't own for things like roads and structural support [1], so it took a minute or two before I found it.

[0] http://en.wikipedia.org/wiki/Track_transition_curve

[1] http://en.wikipedia.org/wiki/Easement

peter_l_downs2• 13 years ago

One more link: http://en.wikipedia.org/wiki/Cant_(road/rail)#Rail

Someone• 13 years ago

Cars and bikes do that, too. You don't instantaneously go from 'axles parallel to each other' to 'constant angle A between front and rear axles'. Instead, you go from 'not turning the axles' to 'turning it at constant speed' to 'keeping it at a fixed angle' and back.

That's why road exits and a cloverleaf interchanges should never use perfect circle arcs to connect straight road parts. The curvature of the road should change continuously such as in various splines or parts of superellipses (http://en.wikipedia.org/wiki/Superellipse). An Euler spiral (http://en.wikipedia.org/wiki/Transition_curve) is optimal, but for cars, small deviations from the optimal aren't as bad as for railway cars.

smoyer2• 13 years ago

Though on a bike, you can lean to turn if you're going the right speed. The turn is made because you're riding on the sides of the tires which will give way to the side you're leaning towards.

jonah• 13 years ago

One of these days I'm going to translate Michael Herf's friction function to JS: http://stereopsis.com/stopping/

film42• 13 years ago

I never realized that simple graph functions can translate to animations... mind.. blown.

MindTwister• 13 years ago

Okay, thats pretty neat, but whats with the auto translation?

  Vælg easing for at se beskrivelsen sammen med en Bezier kurve.
  div {
     -webkit-transition: all 600ms easing funktionens Bezier kurve;
     transition:         all 600ms easing funktionens Bezier kurve; }

It hurts my brain, expecting to read english, then encountering danish with english mixed in.

Easing Functions Cheat Sheet

Related Stories