javascript jQuery 弹性缓动方程
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5436684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery elastic easing equation
提问by Devon
How can I modify this jQuery easing function to produce a less exaggerated bounce?
如何修改这个 jQuery 缓动函数以产生不那么夸张的反弹？
$.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/
http://sandbox.scriptiny.com/tinyslider2/
tinyslider2 uses a similar function that looks something like this:
tinyslider2 使用类似的函数，如下所示：
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.
但是我今天似乎无法理解数学以将 tinyslider2 方程拟合到 jQuery 缓动格式中。如果有人能给我举个例子，我将不胜感激。
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.
我只需要结束反弹而不需要开始反弹。
采纳答案by Christopher Manning
http://timotheegroleau.com/Flash/experiments/easing_function_generator.htmallows 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.
http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm允许您直观地创建缓动函数。如果您切换右上角的 F5/FMX 单选按钮，它会提供 JavaScript 输出。
Without knowing exactlythe 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.phpfor more resources.
否则摆弄缓动函数生成器并尝试新选项或查找http://commadot.com/jquery/easing.php以获取更多资源。
jsfiddle
提琴手
This was fun to answer, I always wanted to find out how those easing functions worked.
回答这个问题很有趣，我一直想知道这些缓动函数是如何工作的。
回答by bpierre
Did you try the jQuery easing plugin?
您是否尝试过jQuery 缓动插件？
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.
如果你可以使用优雅降级，我建议你看看CSS transitions。它是硬件加速的，您可以使用预定义或自定义（带有贝塞尔曲线）过渡。
回答by Soft Bullets
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.
我知道这已经很老了，但我需要做出完全相同的效果，并且我在 UI 中非常成功地使用了两个缓动功能的组合。
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).
在 95% 的“时间”的 95% 过渡的线性动画，然后在剩余的 5% 的“时间”乘以 16 的 5% 的弹性动画（这看起来似乎是正确的 - 很多动画此效果的时间专门用于弹跳，因此需要更长的时间）。
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.
相当的解决方法，但我无法创建一个贝塞尔公式，我正在尝试撕裂我的头发。
