为什么这个 easeOutCubic 在开始时返回较大的变化跳跃而在结束时返回较小的变化跳跃？

Question

我想我用错了这个缓动函数。缓出功能应该 return 开始时有更大的变化，但我在最后跳跃得更大：

//Current value = Change
25 = 0
27.227575000000005 = 2.227575000000005
31.63817500000001 = 4.410600000000006
38.187700000000014 = 6.549525000000003
46.83250000000002 = 8.644800000000004
57.52937500000003 = 10.696875000000013
70.23557500000004 = 12.70620000000001
84.90880000000004 = 14.673225000000002
101.50720000000004 = 16.598399999999998

我做错了什么？

我想要的：

它应该从 25 开始（25%，但我使用整数 25）
它应该以 100 结束（可以超过 100，因为我会将它限制为最多 100）
它应该开始得快，结束得慢

https://jsfiddle.net/pqLddvzo/1/

function easeOutCubic(t, b, c, d) {
  t /= d;
  t--;
  return c*(t*t*t + 1) + b;
}

var x = 25;
var i = 0;
while ( x < 100 && i < 500 )
{
    let last = x;

    //Calculate our new percentage
    x = easeOutCubic( i, x, 75, 100 )

    //The new value and the change in value
    console.log( x + " = " + ( x - last ) );

    //move to next step
    i++;
}

//Also, why doesn't it take the full number of steps?
console.log( i );

Answer 1

您可能想要 Math.sqrt()

// Given a scale function that accepts whatever and return a number between 0 and 1
// Returns a function that accepts the same whatever and returns a number between min and max
function mapScale(scale, min, max) {
  return (...args) => {
    const original = scale(...args);
    return min + (original * (max - min));
  };
}

// Accepts a number between 0 and 1
// Returns a mapped number between 0 and 1
function sqrtScale(n) {
  n = Math.min(1, Math.max(n, 0)); // stay within the borders of 0 and 1
  return Math.sqrt(n);
}

const sqrtScaleBetween25And100 = mapScale(sqrtScale, 25, 100);

for (let i = 0; i < 1; i = i + .1) {
  console.log(sqrtScaleBetween25And100(i));
}

请注意前 5 个构成 50 个单位，而后 5 个仅构成 25 个单位。您可以通过应用更强的根来制作更陡峭的曲线，例如，n ** (1/3) 或事件 Math.sqrt(Math.sqrt(n))

Answer 2

问题是我将返回的值作为 "original" 值传递回下一个调用：

x = easeOutCubic( i, x, 75, 100 );

应该是：

x = easeOutCubic( i, 25, 75, 100 )

该字段需要保持不变。每次调用时只有第一个参数应该改变。

为什么这个 easeOutCubic 在开始时返回较大的变化跳跃而在结束时返回较小的变化跳跃？

Why is this easeOutCubic returning larger jumps in change at the beginning and smaller at the end?

javascript

easing