Ease in and out curve in for loop

Question

I have a for loop like this:

var speed = 100; 
var curve = [];

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

So for the last loop its 400, the question is how do i implement ease in and out in the for loop? roughly in the end the result should be like this? [0,52,200,348,400]

EDIT:

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)
}

It is a spin wheel with highlight instead of actually spinning it. I'm calling the above function with the loop. for now it only has constant speed because each loop difference is only 100 so the 1st hightlight delay is 0 and it start immediately. 2nd is 100, 3rd is 200 and so on.

Answer 1

Lots of common easing functions are shown here:

http://gizma.com/easing/

Here is an example of how to use one:

// 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]