自定义jQuery easeOutElastic函数

我有一个侧面滚动的网站在jQuery控制之下，几个页面相隔数千像素，水平。我正在使用easeOutElastic函数，但动画发生的速度很快，弹性反弹需要被抑制。如果我增加持续时间参数，动画会减慢，但反弹也会减慢。看起来持续时间控制着整个动画。自定义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？）

任何帮助你可以破译这将是伟大的！

来源

2011-10-13 Gordon

你可能喜欢这篇文章.. http://www.brianwald.com/journal/creating-custom-jquery-easing-animations – commonpike

我可以提出一个解决方法吗？使用两个动画调用，一个用于移动元素的大部分距离，另一个用于最终的“反弹”效果。通过这种方式，您可以将“反弹”效果的持续时间更改为您想要的效果，并且还可以根据需要快速进行水平滚动动作。

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

来源

2011-10-13 17:57:09 Jasper

辉煌。我已经给它一个镜头。昨晚没有睡觉，所以我的大脑正在寻找复杂的解决方案。 – Gordon

任何一个可以告诉我是什么参数：X，T，B，C，D代表什么？

X = NULL（不需要的方程额外的参数，但必要的jQuery）
吨=当前时间
B =起始值
C =最终值
d =持续时间

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

其中是速度计算？

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

速度也在不断变化（加速度定义为随时间变化的速度）。所有这些问题这个方程（曲线）为，其中和当装上去...这最终被包含速度无限数量的（或更准确地，“加速度”）的动画表示（输出）。

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

jQuery.easing - easeOutCubic - emphasizing on the ease

编辑：

我觉得你有操纵方程式困难，因为它需要图形，而不是编程方式可视化。这个在线工具使其变得简单。只需根据需要简单地绘制曲线，预览它，然后输出您的自定义功能。

您必须点击微小的图像，并在弹出窗口中打开该工具。

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

来源

2011-10-13 18:07:45 Sparky

是的，我意识到速度正在隐含在函数中处理。谢谢！ – Gordon

@戈登，用一个在线工具的链接更新了我的答案，该工具将根据曲线创建任何缓动函数。 – Sparky

感谢您的jQuery工具链接。我不认为代码正常工作，但检查动画效果不错 – Jake

自定义jQuery easeOutElastic函数

回答

相关问题