Question

我在jQuery控件下有一个侧滚动网站，有几个页面，相距数千像素，水平。我正在使用easeOutElastic函数，但动画发生的速度很快，弹性反弹需要受到抑制。如果我增加持续时间参数，动画会变慢，但弹跳也会变慢。似乎持续时间控制着整个动画。

我需要做的是分别控制移动的速度和弹性的紧密度。我一直在插件中摆弄我自己的easeOutElastic函数副本，但我似乎无法做到正确，不知道所有参数是什么：

easeOutElastic: 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;
}

任何人都可以告诉我参数：x，t，b，c，d代表什么？

我假设（追踪函数）：

  t = time // passed from the duration
  d = distance // calculated from the current and move to positions passed from the css

看起来当t == 0时，缓动函数已经完成，但我真正需要的是当运动速度低于某个阈值时函数返回，而不是等待时间到期。但速度计算在哪里？（s？）

你能解密的任何帮助都会很棒！

Answer 1

任何人都可以告诉我参数：x，t，b，c，d代表什么？

x = null（方程不需要额外的参数，但jQuery是必需的）
t =当前时间
b =起始值
c =结束值
d =持续时间

来源：http://gsgd.co.uk/sandbox/jquery/easing/

速度计算在哪里？

“速度”定义为随时间的距离。该等式可以表示为曲线。曲线已经包含任何给定时刻的位置信息，因此速度不是您输入的参数（它是函数的输出）。

速度也在不断变化（加速度定义为速度随时间的变化）。对于这个等式（曲线）而言，重要的是其中和当来放置东西时...这最终成为一个包含无限速度的动画表示（输出）（或者更准确地说，“加速度”）。

您也可能对此答案感兴趣...

jQuery.easing - easeOutCubic - emphasizing on the ease

修改

我认为你在操纵方程式时遇到困难，因为它需要以图形方式而不是以编程方式进行可视化。这个在线工具使它变得简单。只需根据需要绘制曲线，预览它然后输出自定义函数。

您必须单击微小图像，然后弹出一个工具。

http://laco.wz.cz/tween/?page=customeasing

Answer 2

我可以建议一个解决方法吗？使用两个动画调用，一个用于移动大部分距离的元素，另一个用于最终的“反弹”效果。这样你就可以根据需要改变“反弹”效果的持续时间，并且可以根据需要快速进行水平滚动。

$('#element_id').animate({left : '20px'}, 1000, 'linear', function () {
    $(this).animate({left : '0px'}, 500, 'easeOutElastic');
});

自定义jQuery easeOutElastic函数

2 个答案: