缓入和缓出动画公式

Question

比方说,如果我正在以相等的时间间隔执行Ease-Out然后Ease-In动画,对象从X1坐标到X2坐标的移动超过S步.有人可以建议计算这个运动的X坐标的公式吗？

Answer 1

实际上,我宁愿使用一个在[0; 1]并输出[0; 1],这样我们就可以将结果应用于任何类型(2D矢量,3D矢量......).

解决方案1

对于二次缓和输入/输出,曲线分为两个函数,具体取决于t:

• 当t<0.5时:f(t) = square(t)
• 当t> = 0.5时:f(t) = 1 - square(t - 1) + 0.5

减少后,在C中,它会给出:

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

解决方案2(Bezier)

另一个有趣的混合曲线是Bezier给出的曲线,它具有相当优化的优点(如果没有).你可以查看Wolfram上的曲线.这是C代码:

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

解决方案3(参数函数)

编辑:
@DannyYaroslavski提出的另一种方法是这里提出的简单公式.

它是参数化的,可以获得良好的输入/输出加速和减速.

使用alpha = 2,您将获得此功能:

在C中翻译如下:

float ParametricBlend(float t)
{
    float sqt = square(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/