JavaScript 中的缓动函数 - 将值的变化设置为 0

Question

// t: current time, b: beginning value, c: change in value, d: duration
function easeInQuad(t, b, c, d) {
    return c*(t/=d)*t + b;
}
function easeOutElastic(t, b, c, d) {
    var s = 1.70158;
    var p = 0;
    var a = c;
    if (t == 0) return b;
    if ((t /= d) == 1) return b + c;
    if (!p) p = d * .3;
    if (a < Math.abs(c)) {
        a = c;
        var s = p / 4;
    } else var s = p / (2 * Math.PI) * Math.asin(c / a);
    return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
}

easeInQuad(100, 20, 0, 1000)  // 20
easeInQuad(500, 20, 0, 1000)  // 20

easeOutElastic(0, 20, 0, 1000)  // 20
easeOutElastic(500, 20, 0, 1000)  // NaN
easeOutElastic(1000, 20, 0, 1000)  // 20

如果值变化为 0，easeInQuad 总是 return 20，easeOutElastic 也是 return 错误值。

值的变化不能为0？ jQuery 如何处理 animate({top: 0})，将 0 设置为 0.0001？

我误解了价值变化的意思。如果我希望最终值是 0，参数 c 应该是 -20

Answer 1

下面执行easeInQuad

easeInQuad(100, 20, 0, 1000)

我得到 20，因为你的大部分公式都乘以 0。

0*(100/=1000)*100 + 20 = 20

在查看了其他缓动公式后，我认为这是预期的行为。请参阅 jQuery 来源 here

进一步的测试表明，将 0 更改为 1 应该会产生 20.01，并且这种趋势仍在继续。我再次认为这是预期的行为。

JavaScript 中的缓动函数 - 将值的变化设置为 0

Easing Function in JavaScript - set change in value to 0

javascript

easing-functions

easing