Jquery UI Bounce Easing功能可以减少弹跳和/或控制弹跳次数

Question

我可以看到有很多人在问这样的问题。但是没有明确的答案。我还没有找到任何易于使用的解决方案，这可能是因为我问的是一个更难的问题，我想我是。

我正在使用jQuery UI反弹缓动效果，当动画让一个对象掉入屏幕然后我希望它只反弹两次，好像它是一个重物并且不是很有弹性。有谁知道如何做到这一点？这是Bounce功能，因为它本身就在UI中，有关哪些变量要更改并协调在一起的任何想法？我试图自己解决这个问题，但我缺乏这种函数和数学逻辑的能力。

原生弹跳功能：

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 );
},

我发现了其他反弹功能，如：

for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
    if (p >= (7 - 4 * a) / 11) {
        return (-Math.pow((11 - 6 * a - 11 * p) / 4, 2) + Math.pow(b, 2) );
    }
}

在这两个函数中，我知道“p”最基本的形式是你离目标有多远的百分比。

有没有人有任何想法？

我也发现了这个：

https://github.com/clark-pan/Bounce-Function

如果你想添加一大堆额外的代码，哪个非常好用，我甚至想出了如何获得我想要的反弹，但我宁愿做一个自定义的缓动，这让我可以实现我的目标。而不是用一大堆无关的代码重写上面的弹跳函数。

感谢任何有解决方案的人。

Answer 1

从您已经提供的源代码中可以看出，反弹缓动函数只是沿着域0到1的一组n个不连续函数，其中n是您想要的反弹次数。你需要做的就是设计这些函数，使它们的y = 1截取所有相互接触，并操纵它们的最大值/顶点来模仿一个漂亮的衰变反弹。

要做到这一点，您需要知道如何移动功能，如何翻转功能以及如何缩放/拉伸功能。阅读此网页：Manipulating Graphs。

回想一下，我们可以用因子形式写出多项式函数，以便轻松分配它们的根（y = 0截距）。让我们使用quadratics来保持简单。因此，例如，函数将具有以下形式：f(x) = scalar * (x-root1)(x-root2) + constant。因为我们希望反弹发生在y = 1而不是y = 0，所以我们为所有函数添加一个常数值1。为了使我们的反弹函数的y = 1截距对齐，你必须将一个函数的最右边的y = 1截距输入到下一个。假设我们想要四次反弹。我们的方程看起来像

f1(x)=a1(x+r0)(x-r1)+1 // Note: make r0 = r1 to center function's maxima at x=0
f2(x)=a2(x-r1)(x-r2)+1
f3(x)=a3(x-r2)(x-r3)+1
f4(x)=a4(x-r3)(x-1) +1 // r4 = 1 because bounce ends at x=1

一旦你建立了这个方程组，只需要调整你的y = 1截距（r0到r3）和你的标量（a1到a4）的位置来给出所需的间距和幅度。你的反弹。这是我在Apple实用程序Grapher中创建的一个示例。我强烈建议你将这些方程插入到类似的图形程序或计算器中并使用这些值（如果只是因为你可以提供更平滑的反弹系统。你可能想要重新创建this形状）

所以我想你的代码可能就像

bounce(x):
    x = clamp(x,0,1)
    if x >= 0 and x < r1 then
        return f1(x)
    elseif x >= r2 and x < r3 then
        return f2(x)
    ... 
    else
        return fn(x)
    end

其中f1，f2，...，fn是你的函数（但是尽可能多地增加东西，合并常量等）和r1，r2，...，rn是函数的y = 1截距

注意：这是一个简化的解决方案，因为我们假设我们只想要二次平滑的缓动。您可以使用更高阶的函数，例如一个四分之一，但是现在我认为如果你只需要为每个函数担心两个根就会更容易。