2

我有一个在 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 时缓动函数完成，但我真正需要的是函数在运动速度低于某个阈值时返回，而不是等待时间到期。但是速度在哪里计算？（秒？）

您可以提供任何帮助来破译这将是很棒的！

4

2 回答 2

3

谁能告诉我参数：x，t，b，c，d代表什么？

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

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

速度在哪里计算？

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

速度也在不断变化（加速度被定义为速度随时间的变化）。对这个方程（曲线）而言，重要的是在何时何地放置一些东西……这最终是一个包含无限数量的速度（或更准确地说，“加速度”）的动画表示（输出）。

您也可能对我的回答感兴趣...

jQuery.easing - easeOutCubic - 强调轻松

编辑：

我认为您在操作方程式时遇到了困难，因为它需要以图形方式而不是编程方式进行可视化。这个在线工具使它变得容易。只需完全按照您的意愿绘制曲线，预览它，然后输出您的自定义函数。

您必须单击小图像，然后该工具会在弹出窗口中打开。

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

于 2011-10-13T18:07:45.987 回答
2

我可以建议一个解决方法吗？使用两个动画调用，一个用于移动元素大部分距离，一个用于最终的“反弹”效果。这样，您可以更改“反弹”效果的持续时间以使其看起来像您想要的那样，并且还可以尽可能快地进行水平滚动运动。

$('#element_id').animate({left : '20px'}, 1000, 'linear', function () {
    $(this).animate({left : '0px'}, 500, 'easeOutElastic');
});
于 2011-10-13T17:57:09.213 回答