jQuery UI 'easeoutbounce' 需要更有弹性答案

【问题标题】：jQuery UI 'easeoutbounce' needs to be more bouncyjQuery UI 'easeoutbounce' 需要更有弹性
【发布时间】：2013-02-05 12:29:58
【问题描述】：

我创建了一个 div，点击后会下降到屏幕底部。它需要反弹，所以我使用了“easeOutBounce”作为缓动效果。它工作得很好，但客户要求它“更有弹性”。我知道我可以减慢动画的速度，但我真的不希望物体移动得更慢，我只是想让它弹跳得更多。我想，重力更小。

这是 jQuery：

$( document ).click(function() {
    $( "div" ).animate({ top: 400 }, { duration: 2000, easing: 'easeOutBounce' });
});

这是一个小提琴：http://jsfiddle.net/NtkNB/1/

我真的很难找到有关此特定效果的文档，并想知道是否有人可以建议如何配置当前设置以获得所需的效果，或者是否有任何更高级的动画效果可以做到这一点我可以插入。

谢谢

【问题讨论】：

最简单的方法是获取easeOutBounce的来源，根据需要自行修改，并创建新的缓动效果。
谢谢罗里。所以我发现了这个，这就是我认为神奇发生的地方：Bounce: function ( p ) { var pow2, bounce = 4; while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {} return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 ); } 但是，我的数学技能真的有很多不足之处，我根本不明白这一点。什么与“重力”有关？与此同时，我会反复试验，但这通常不会太顺利;)
摆弄fiddle中的数字，看看你能不能弄明白。
感谢 adeneo。虽然我不确定初始变量是什么，但该方程似乎没有考虑重力（或者我认为“恢复原状”是描述我想要改变的更准确的术语）。

标签： jquery jquery-ui jquery-effects jquery-easing

【解决方案1】：

这个问题很老，但似乎没有得到回答。发生在它身上，因为我只有相反的问题（div需要“不那么有弹性”）。我想出的解决方案是一个二次方程来控制每次反弹（也许不是最优雅的）。这是一个 jsfiddle：http://jsfiddle.net/NtkNB/194/ 这个比默认的 jquery 动画更有弹性。为了让它更有弹性，你只需要改变方程，这有点痛苦。

var thing = (-17.34*x*x)+(14.351*x)-2.944;

我用wolfram确定：http://www.wolframalpha.com/input/?i=quadratic+through+%28.343%2C0%29%2C%28.4715%2C.1%29%2C+%28.6%2C0%29

【讨论】：