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.
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.
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.
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.
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).
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 ;)
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.
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.
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.
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.
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.
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.
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?
