How can I modify this jQuery easing function to produce a less exaggerated bounce?
$.easing.easeOutElasticSingleBounce = function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
I'm looking to produce an easing function that emulates this:
http://sandbox.scriptiny.com/tinyslider2/
tinyslider2 uses a similar function that looks something like this:
new Function(this.n+'.slide('+(i==1?t+(12*d):t+(4*d))+','+(i==1?(-1*d):(-1*d))+','+(i==1?2:3)+','+a+')')
But I can't seem to get my head around the math today to fit tinyslider2 equation into the jQuery easing format. If someone can show me an example, I would appreciate it very much.
UPDATE
This equation is very close:
$.easing.custom = function (x, t, b, c, d) {
var s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
I just need only the ending bounce without the beginning bounce.
The jQuery easing functions are used to specify the speed at which an animation show at different points within the animation. The jQuery easing functions are built-in functions in the jQuery UI library. In simple words, the jQuery easing functions specify the speed of animation progress.
An easing function just defines a transition between a start and end values. Those could be x coordinates, or a color, or the transparency of an object. And in fact, in theory, you could apply different easing function to interpolate for different properties. Hopefully this helps shed some light on the basic idea.
jQuery core ships with two easings: linear , which progresses at a constant pace throughout the animation, and swing (jQuery core's default easing), which progresses slightly slower at the beginning and end of the animation than it does in the middle of the animation.
Easing functions specify the rate of change of a parameter over time. Objects in real life don't just start and stop instantly, and almost never move at a constant speed.
http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm allows you to visually create an easing function. If you toggle the F5/FMX radio button in the top right, it gives the output in JavaScript.
Without knowing exactly the effect you want, this should get you pretty close.
$.easing.tinyslider = function(x, t, b, c, d) {
ts=(t/=d)*t;
tc=ts*t;
return b+c*(-8.1525*tc*ts + 28.5075*ts*ts + -35.105*tc + 16*ts + -0.25*t);
}
Otherwise fiddle around with the easing function generator and try new options or look up http://commadot.com/jquery/easing.php for more resources.
http://jsfiddle.net/XRF6J/
This was fun to answer, I always wanted to find out how those easing functions worked.
Did you try the jQuery easing plugin?
It adds a lot of new easings (you can try them on the website).
If you can use graceful degradation, I suggest you to take a look at CSS transitions. It’s hardware accelerated, and you can use predefined or custom (with a bezier curve) transitions.
I know this is pretty old, but I needed to make the exact same effect and I used a combination of two easing functions in UI quite successfully.
A linear animation for 95% of the transition at 95% of the 'time', then an elastic animation over the remaining 5% at 5% of the 'time' times 16 (this just seemed to look right - a lot of the animation time for this effect is devoted to bouncing around so it needs to be considerably longer).
d = [transition 'distance' or whatever];
t = [transition time ms]
da = d * 0.95;
db = d * 0.05;
ta = t * 0.95;
tb = (t * 0.05) * 16;
var anima = {left: "+="+da+"px"};
var animb = {left: "+="+db+"px"};
$(element).animate(anima,ta).animate(animb,tb);
Quite the workaround, but I couldn't create a bezier formula and I was tearing my hair out trying.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With