如何修改这个缓动函数以减少弹跳？

Question

我正在尝试修改 Flash CS3 提供的

fl.motion.easing.bounce

函数以使生成的动画弹跳更少。我知道“减少弹跳”有点模糊，但我希望能帮助您理解该功能。

谢谢。

 /**
 *  @param t Specifies the current time, between 0 and duration inclusive.
 *
 *  @param b Specifies the initial value of the animation property.
 *
 *  @param c Specifies the total change in the animation property.
 *
 *  @param d Specifies the duration of the motion.
 *
 *  @return The value of the interpolated property at the specified time.     
 */  
public static function easeOut(t:Number, b:Number,
                               c:Number, d:Number):Number
{
    if ((t /= d) < (1 / 2.75))
        return c * (7.5625 * t * t) + b;

    else if (t < (2 / 2.75))
        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;

    else if (t < (2.5 / 2.75))
        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;

    else
        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
}

Answer 1

基本上，该函数根据 4 个因素返回新位置的插值：动画的当前时间、动画属性的初始值、要完成的动画的总变化以及动画的总持续时间。

您所拥有的是对不同时间的检查：如果动画仍然没有达到总持续时间的大约 36% (1 / 2.75)，则应用第一个方程；如果在 36% 到 72% 之间，则应用第二个；等等

每个方程都是一个取决于第一个树参数的函数，所以基本上你需要稍微调整它们。

我建议使用硬编码的 7.5625（将其调大或调低以查看结果），直到您满意为止。

---

7.5625

是

Math.pow(2.75, 2);

，但经过硬编码以节省处理时间。

Answer 2

尽量加大第一次落地时间，减少弹跳时间，我先把整个距离设为1.4/2.7，然后1.4~2.1，这个范围是0.7，半个范围是0.35，0.35*0.35=0.1225,1- 0.1225=0.8775，看起来不错，如果你想降低弹跳范围，尝试使用这个概念：缩小两个时间点的范围。

    t /= d;
    if (t < 1.4 / 2.75) {
        return 3.858419 * t * t;
    }
    else if (t < 2.1 / 2.75) {
        t -= 1.75f / 2.75;
        return 7.5625 * t * t + 0.8775f;
    }
    else if (t < 2.5 / 2.75) {
        t -= 2.3f / 2.75;
        return 7.5625 * t * t + 0.96f;
    }
    t -= 2.625f / 2.75;
    return 7.5625 * t * t + 0.984375f;

Answer 3

我知道这也不会给您一个明确的答案，但这些方程最初是由 Robert Penner 在他的书 Programing Macromedia Flash MX 中提出的。我知道这不是一个简单的答案，但他在他的书中详细解释了这些功能是如何工作的。要真正理解，您可能需要拿起一本并深入研究。

Answer 4

对于那些仍然想知道弹跳如何工作的人来说，它们是抛物线，并且以一种非常奇怪的方式书写。它只不过是 (x - 水平)^2 * 宽度 + 垂直，并且在某些预定义范围内限制为 0-1。

https://www.desmos.com/calculator/0t2a24dcrh

我做了苦劳，你可以用它来或多或少地调整弹跳。您必须确保不超过 1 并将其置于范围的中心，以便具有连续性

Answer 5

您还可以通过重新映射输入值以适应您想要的跳出次数来作弊。

float easing_bounce_count(float t, int bounces)
    {
      switch (bounces) {
        case 0:
          return easing_bounce(map(t, 0.0f, 1.0f, 1.0f - (1.0f / 2.75f), 1.0f));
        case 1:
          return easing_bounce(map(t, 0.0f, 1.0f, 1.0f - (2.0f / 2.75f), 1.0f));
        case 2:
          return easing_bounce(map(t, 0.0f, 1.0f, 1.0f - (2.5f / 2.75f), 1.0f));
        default:
          return easing_bounce_in(t);
      }
}

Answer 6

对于任何正在寻找好方法来做到这一点的人，请查看此 desmos 图：

https://www.desmos.com/calculator/uyfe8x7zrj

这是它的 C# 代码。

bounceMult

是一个从0到1的数字，用于调整所有反弹的高度，但如果您愿意，您可以轻松地独立调整参数。

如果您更改任何截止值（只要 0 <

cutoff0

<

cutoff1

<

cutoff2

< 1) or the bounces (as long as each bounce is between 0 and 1) the math still works and the animation is smooth.

static float EaseOutBounceAtPoint(float x, float bounceMult)
{
    float cutoff0 = 1f / 2.75f;
    float cutoff1 = 2f / 2.75f;
    float cutoff2 = 2.5f / 2.75f;

    float bounce1 = MultiplyBounce(.75f, bounceMult);
    float bounce2 = MultiplyBounce(.9375f, bounceMult);
    float bounce3 = MultiplyBounce(.985375f, bounceMult);



    if (x < cutoff0)
        return x * x / (cutoff0 * cutoff0);
    if (x < cutoff1)
    {
        return OneBounce(x, cutoff0, cutoff1, bounce1);
    }
    if (x < cutoff2)
    {
        return OneBounce(x, cutoff1, cutoff2, bounce2);
    }
    else 
    {
        return OneBounce(x, cutoff2, 1, bounce3);
    }

}

static float OneBounce(float x, float previousCutoff, float thisCutoff, float thisBounce)
{
    float height = (previousCutoff + (thisCutoff - previousCutoff) / 2);
    float inverseHeight = height - previousCutoff;
    float multiplier = (1 - thisBounce) / (inverseHeight * inverseHeight);
    return multiplier * Mathf.Pow(x - height, 2) + thisBounce;
}

static float MultiplyBounce(float currentBounce, float bounceMult)
{
    return 1 - ((1 - currentBounce) * bounceMult);
}

显然，这种计算的效率比原来低很多，但它更灵活并且硬编码值更少。如果您需要效率，您可以使用这些值，然后对您喜欢的常量进行硬编码。

如果您愿意，也可以很容易地了解如何添加额外的退回邮件。