I need to create a Javascript-Fallback for CSS3-Animations and try to make it as close as possible to the CSS-Version. In CSS3, there are 4 predefined easing-functions:
cubic-bezier(0.25, 0.1, 0.25, 1)cubic-bezier(0.42, 0, 1, 1)cubic-bezier(0, 0, 0.58, 1)cubic-bezier(0.42, 0, 0.58, 1)Does anybody know an exact algorythmical equivalent to those easings, that could used in a Javascript function? I know there are alot of easings like Sine, Quad, Expo etc. (see http://easings.net/), but they all seem to differ.
Geometrically equivalent? As in a curve traced with the points given in the webkit easing examples you supplied is equivalent to one that would be traced by some JS function?
Here's a way to define your own Pn for a cubic bezier easing.
An explanation: http://st-on-it.blogspot.com/2011/05/calculating-cubic-bezier-function.html
There's a git linked by the the author of the article which I can't ref b/c I don't have the rep, but ignore it. It's a hog.
Buuut: Same math, better event loop management, and way more recent commits than the above script, using jquery.easing: https://github.com/rdallasgray/bez