缓入缓出动画公式

Question

说，如果我正在做一个对象从 X1 坐标到 X2 坐标的运动的 Ease-Out 和 Ease-In 动画，时间间隔相等，步长为 S。有人可以建议计算此运动的 X 坐标的公式吗？

Answer 1

就个人而言，我宁愿使用一个在 [0; 中获取时间的函数； 1]并输出[0; 1]，这样我们就可以将结果应用于任何类型（2D 向量、3D 向量...）。

解决方案 1

对于二次缓入/缓出，曲线根据

t

的值分为两个不同的函数：

• when

  t

  <= 0.5:

  f(x) = 2 * x * x

  x 在 [0;0.5] (graph)
• 当

  t

  > 0.5 时：

  f(x) = 2 * x * (1 - x) + 0.5

  x 在 [0;0.5] 中（graph）

以下是图表：

由于第二个函数也在[0;0.5]，但是开始使用时

t

> 0.5，所以我们需要将

t

减少0.5.

这是结果，在C:

float InOutQuadBlend(float t)
{
    if(t <= 0.5f)
        return 2.0f * t * t;
    t -= 0.5f;
    return 2.0f * t * (1.0f - t) + 0.5f;
}

解决方案 2（贝塞尔曲线）

另一个有趣的混合曲线是 Bézier 给出的曲线，它的优点是可以非常优化（没有如果）。这是 Wolfram 的曲线：

这里是 C 代码：

float BezierBlend(float t)
{
    return t * t * (3.0f - 2.0f * t);
}

解法三（参数函数）

@DannyYaroslavski 提出的另一种方法是here提出的简单公式。

它是参数化的并且有很好的进/出加速和减速。

alpha = 2，你得到这个函数：

在 C 中这样翻译：

float ParametricBlend(float t)
{
    float sqt = t * t;
    return sqt / (2.0f * (sqt - t) + 1.0f);
}

Answer 2

二次缓和哪里：

t = 当前时间
b = 起始值
c = 价值变化
d = 持续时间

 function (float time, float startValue, float change, float duration) {
     time /= duration / 2;
     if (time < 1)  {
          return change / 2 * time * time + startValue;
     }

     time--;
     return -change / 2 * (time * (time - 2) - 1) + startValue;
 };

来源：http://gizma.com/easing/

Answer 3

以上所有解决方案都缺乏使用示例。

在这里找到好的解决方案：

 function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction goes from 0 to 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // calculate the current animation state
    let progress = timing(timeFraction)

    draw(progress); // draw it

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

使用示例：

animate({
  duration: 1000,
  timing(timeFraction) { // here you can put other functions
    return timeFraction;
  },
  draw(progress) {
    elem.style.width = progress * 100 + '%';
  }
});

其他功能：

function quad(timeFraction) {
  return Math.pow(timeFraction, 2)
}

更多在这里

Answer 4

我遇到了同样的问题：想为我的图表制作动画

(Ease in-out)

.

头脑风暴给了我两个方法：

1)三角函数公式。首先，我写了

y=(sin(x/π*10-π/2)+1)/2

，模拟是

sin^2((5*x)/π)

float TrygoEase (float x) {
    float y=(float)Math.pow(Math.sin(5*x/Math.PI),2);
    return y;
}

2) 两条抛物线。这并不难。我刚刚在

y=2*x*x

上使用了

[0;0.5]

，在

y=-2(x-1)^2+1

 上使用了 

[0.5;1]

float ParabolEase(float x) {
    float y=2*x*x;
    if(x>0.5f){
        x-=1;
        y=-2*x*x+1;
    }
    return y;
} 

对

x=[0;1]

使用这种方式，什么也返回

y=[0;1]

.

现在你可以比较这些图：

Answer 5

这里是一个以曲率量作为参数的版本，遵循 this general solution linked to by Creak.

/*
* applyCurve: apply an S-curve to an input value.
* The highest positive curvature will result in a step from 0 to 1,
* the most negative curvature will result in a constant of 0.5.
*
* progress: the input value between 0 and 1,
* curvature: the amount of curvature between -1 and 1.
*  Negative values curve the other way, 0 applies no curvature.
*/

double applyCurve(double progress, double curvature) {
    assert(progress >= 0.0 && progress <= 1.0);
    assert(curvature >= -1.0 && curvature <= 1.0);

    if (curvature >= 0.0) {
        if (curvature > 0.99999) return progress > 0.5 ? 1.0 : 0.0;

        float exp = 1.0 / (1.0 - curvature); // find s-curve exponent
        return pow(progress, exp) / (pow(progress, exp) + pow(1.0 - progress, exp)); // apply s-curve
    } else {
        if (curvature < -0.99999) return 0.5;

        float exp = 1.0 + curvature; // find s-curve exponent
        return pow(progress, exp) / (pow(progress, exp) + pow(1.0 - progress, exp)); // apply s-curve
    }
}

Answer 6

此版本允许您使用任何缓入和缓出功能（EaseIn 和 EaseOut）。 这两个函数都必须采用 0 到 1 之间的时间值参数，并返回 0 到 1 之间的缓和时间值。

float EaseInOut(float t)
{
    if (t <= 0.5f)
    {
        return EaseIn(t * 2) * 0.5f;
    }
    else
    {
        t -= 0.5f;
        return (EaseOut(t * 2) * 0.5f) + 0.5f;
    }
}