问题
I need a rather atypical jquery easing function. It's basically the opposite of your traditional easeInOut easing because I want the process to go from a fast intro to a slower middle part to a fast outro (you might call it speedInOut).
Unfortunately my math is a little rusty and I need someone to point me in the right direction in terms of how to get started.
A hyperbolical sinus curve (sinh) goes somewhat in the right direction of what I'm looking for , but I need it limited between 0 and 1 on both axis.
Here is the jquery easing function skeleton I'm working with
$.easing.speedInOut = function(t, millisecondsSince, startValue, endValue, totalDuration) {
if(t = 0) return startValue;
if(t = 1) return startValue + endValue;
// custom function should go here
};
Any help would be greatly appreciated!
回答1:
I figured things out with the help of my previously mentioned, brilliant colleague (it was actually him who did all the heavy lifting).
The final math formular I ended up using was: (sinh((x - 0.5) * 5) + sinh(-(x - 0.5)) + (sinh(2.5) + sin(-2.5))) / (sinh(2.5) * 1.82)
I also needed to implement sinh in javascript because it's not part of the math object, this however is fairly easy:
function sinh(aValue) {
var myTerm1 = Math.pow(Math.E, aValue);
var myTerm2 = Math.pow(Math.E, -aValue);
return (myTerm1-myTerm2)/2;
}
The easing function itself looks like this:
$.easing.speedInOut = function(x, t, b, c, d) {
return (sinh((x - 0.5) * 5) + sinh(-(x - 0.5)) + (sinh(2.5) + Math.sin(-2.5))) / (sinh(2.5) * 1.82);
};
来源:https://stackoverflow.com/questions/7243065/help-with-custom-jquery-easing-function