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

【问题标题】：Jquery UI Bounce Easing function make bounce less and/or control number of bouncesJquery UI Bounce Easing 功能减少弹跳和/或控制弹跳次数
【发布时间】：2013-07-26 13:50:33
【问题描述】：

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

我在制作动画时使用 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

如果你想添加一大堆额外的代码，这真的很棒，而且我什至想出了如何从中获得我想要的反弹，但我宁愿制作一个自定义缓动，让我能够完成我的目标。比用一大堆无关代码重写上面的bounce-function。

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

【问题讨论】：

标签： jquery function user-interface easing bounce

【解决方案1】：

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

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

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

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

【讨论】：