javascript - for循环中的缓入缓出曲线

Question

我有一个这样的 for 循环:

var speed = 100; 
var curve = [];

for (var i = 0; i < 5; i++) {
        curve.push(i*speed);
}

所以最后一个循环是 400，问题是我如何在 for 循环中实现缓入缓出？大致结果应该是这样的？ [0,52,200,348,400]

编辑:

var defaultSpin = 24;
var totalSlices = 12;

for (var i = 0; i < defaultSpin; i++) {
            highlight(divs[i%totalSlices], i*100, 100);
    }

function highlight(el, delay, duration) {
    setTimeout(function() {
        el.className += ' active';
        setTimeout(function() {
            el.className = 'pie';
        }, duration)
    }, delay)
}

它是一个带有高光的旋转轮，而不是实际旋转它。我用循环调用上面的函数。现在它只有恒定的速度，因为每个循环差异只有 100，所以第一个高亮延迟为 0，它立即开始。第二个是 100，第三个是 200，依此类推。

Answer 1

此处显示了许多常见的缓动函数:

http://gizma.com/easing/

这是一个如何使用的例子:

// from http://gizma.com/easing/
var easeInOutQuad = function (t, b, c, d) {
  t /= d/2;
  if (t < 1) return c/2*t*t + b;
  t--;
  return -c/2 * (t*(t-2) - 1) + b;
};

var steps = 4
var speed = 100
var curve = []
for (var i = 0; i < steps+1; i++) {
  var stepValue = easeInOutQuad(i, 0, speed*steps, steps);
  curve.push(stepValue);
}

console.log(curve); // [0, 50, 200, 350, 400]