jQuery 弹性缓动方程答案

【问题标题】：jQuery elastic easing equationjQuery 弹性缓动方程
【发布时间】：2011-03-25 18:36:40
【问题描述】：

如何修改这个 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;
};

我正在寻找一个模拟这个的缓动函数：

http://sandbox.scriptiny.com/tinyslider2/

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+')')

但是我今天似乎无法理解数学以将 tinyslider2 方程拟合到 jQuery 缓动格式中。如果有人能给我举个例子，我将不胜感激。

更新

这个等式非常接近：

$.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;
}

我只需要结束弹跳而不需要开始弹跳。

【问题讨论】：

为什么不能使用 UI 动画？ jqueryui.com/demos/effect
它们都没有我正在寻找的确切动画。
为你的勇敢+1。真是个英雄！
对于它的价值，我真的不喜欢 tinyslider2 的缓动。不是很轻松。这让我头疼。

标签： javascript jquery animation easing-functions jquery-easing

【解决方案1】：

http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm 允许您直观地创建缓动函数。如果您切换右上角的 F5/FMX 单选按钮，它会以 JavaScript 格式输出。

在不知道确切你想要的效果的情况下，这应该会让你非常接近。

$.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);
}

否则，请使用缓动函数生成器并尝试新选项或查找http://commadot.com/jquery/easing.php 以获取更多资源。

jsfiddle

http://jsfiddle.net/XRF6J/

这个回答很有趣，我一直想知道这些缓动函数是如何工作的。

【讨论】：

谢谢！函数生成器让我可以将其调整为我想要的。

【解决方案2】：

你试过jQuery easing plugin吗？

它增加了很多新的缓动（你可以在网站上尝试）。

如果你可以使用优雅降级，建议你看看CSS transitions。它是硬件加速的，您可以使用预定义或自定义（带有贝塞尔曲线）过渡。

【讨论】：

我做到了。这就是上述等式的来源。这是我能找到的最接近我正在寻找的东西。但没有一个是完全正确的。

【解决方案3】：

我知道这已经很老了，但我需要制作完全相同的效果，并且我在 UI 中使用了两个缓动函数的组合非常成功。

在“时间”的 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);

相当的解决方法，但我无法创建贝塞尔公式，我正在努力尝试。

【讨论】：