帮助与定制jQuery的缓解作用 [英] Help with custom jquery easing function
问题描述
我需要一个相当典型的jQuery缓解作用。它基本上是你的传统easeInOut相反的宽松,因为我想这个过程从一个快速介绍去一个较慢的中间部分为快速结尾(你可以称之为speedInOut)。
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.
一个双曲线正弦曲线(双曲正弦)变为在有些什么我正在寻找正确的方向,但我需要在两个轴,而是有限的0和1之间。
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.
下面是jQuery的缓动函数骨架我的工作。
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
};
任何帮助将大大AP preciated!
Any help would be greatly appreciated!
推荐答案
我想通的事情与我的$ P $的帮助pviously提到的,辉煌的同事(它实际上他谁做所有繁重的任务)。
I figured things out with the help of my previously mentioned, brilliant colleague (it was actually him who did all the heavy lifting).
最后的数学公式推我最终使用是:
(双曲正弦((X - 0.5)* 5)+双曲正弦( - (X - 0.5))+(双曲正弦(2.5)+罪(-2.5)))/(双曲正弦(2.5)* 1.82)
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)
我还需要落实在JavaScript中的sinh因为它不是数学对象的一部分,但是这是相当容易:
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);
};
这篇关于帮助与定制jQuery的缓解作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!