0

我可以看到有很多人问这样的问题。但没有明确的答案。我还没有找到任何简单可行的解决方案，这可能是因为我问的问题比我想的要困难得多。

我在制作动画以使对象落入屏幕时使用 jQuery UI 反弹缓动效果，然后我希望它只反弹两次，就好像它是一个重物而不是非常有弹性一样。有谁知道如何做到这一点？这是 UI 中原生的 Bounce 函数，关于要更改和协调哪些变量有任何想法吗？我试图自己弄清楚，但是我在这种函数和数学逻辑方面的能力很欠缺。

原生弹跳功能：

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

如果你想添加一大堆额外的代码，这真的很棒，而且我什至想出了如何获得我想要的反弹，但我宁愿做一个自定义缓动，让我实现我的目标. 比用一大堆无关代码重写上面的反弹函数。

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

4

1 回答 1

4

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

为此，您需要知道如何移动函数、如何翻转函数以及如何缩放/拉伸函数。阅读此网页：操作图。

回想一下，我们可以以因式形式写出多项式函数，以便轻松分配它们的根（y=0 截距）。让我们使用二次方程来保持简单。因此，例如，函数将采用以下形式：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 中制作的示例。我强烈建议您将这些方程式插入到类似的图形程序或计算器中并使用这些值（如果只是因为您可以想出一个看起来更平滑的反弹系统。您可能想要重新创建这个形状）。

弹跳图示例

所以我想你的代码可能是这样的

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 截距。

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

于 2013-10-08T07:53:07.713 回答