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.

uh... really hard to describe. i guess it is called cubic bezier? — Lim SY, Jul 20 '16 at 03:58
In case you can do this with jQuery... http://stackoverflow.com/a/13501577/362536 — Brad, Jul 20 '16 at 04:00
So, you want a cubic bezier with points (0,0), (0.42,0), (0.58,1), (1,1), like in [transitions](https://drafts.csswg.org/css-transitions/#valdef-transition-timing-function-ease-in-out)? — Oriol, Jul 20 '16 at 04:06
@Oriol not four point only though. the loop can be much more — Lim SY, Jul 20 '16 at 04:09
No, these are the points which define the curve, and the two at the middle don't even belong to it. Then the curve contains infinite points, and you can get as many as you want. I don't know enough about bezier curves to say how, though. — Oriol, Jul 20 '16 at 04:13

score 1 · Answer 1 · answered Jul 20 '16 at 04:00

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]

actually... using the above function gave me the complete opposite effect for my function — Lim SY, Jul 20 '16 at 04:35

Ayan · Answer 2 · 2016-07-20T04:09:31.827

Hey take a note of this snippet

/*\
 * Raphael.easing_formulas
 [ property ]
 **
 * Object that contains easing formulas for animation. You could extend it with your own. By default it has following list of easing:
 # <ul>
 #     <li>“linear”</li>
 #     <li>“&lt;” or “easeIn” or “ease-in”</li>
 #     <li>“>” or “easeOut” or “ease-out”</li>
 #     <li>“&lt;>” or “easeInOut” or “ease-in-out”</li>
 #     <li>“backIn” or “back-in”</li>
 #     <li>“backOut” or “back-out”</li>
 #     <li>“elastic”</li>
 #     <li>“bounce”</li>
 # </ul>
 # <p>See also <a href="http://raphaeljs.com/easing.html">Easing demo</a>.</p>
\*/
var ef = R.easing_formulas = {
    linear: function (n) {
        return n;
    },
    "<": function (n) {
        return pow(n, 1.7);
    },
    ">": function (n) {
        return pow(n, .48);
    },
    "<>": function (n) {
        var q = .48 - n / 1.04,
            Q = math.sqrt(.1734 + q * q),
            x = Q - q,
            X = pow(abs(x), 1 / 3) * (x < 0 ? -1 : 1),
            y = -Q - q,
            Y = pow(abs(y), 1 / 3) * (y < 0 ? -1 : 1),
            t = X + Y + .5;
        return (1 - t) * 3 * t * t + t * t * t;
    },
    backIn: function (n) {
        var s = 1.70158;
        return n * n * ((s + 1) * n - s);
    },
    backOut: function (n) {
        n = n - 1;
        var s = 1.70158;
        return n * n * ((s + 1) * n + s) + 1;
    },
    elastic: function (n) {
        if (n == !!n) {
            return n;
        }
        return pow(2, -10 * n) * math.sin((n - .075) * (2 * PI) / .3) + 1;
    },
    bounce: function (n) {
        var s = 7.5625,
            p = 2.75,
            l;
        if (n < (1 / p)) {
            l = s * n * n;
        } else {
            if (n < (2 / p)) {
                n -= (1.5 / p);
                l = s * n * n + .75;
            } else {
                if (n < (2.5 / p)) {
                    n -= (2.25 / p);
                    l = s * n * n + .9375;
                } else {
                    n -= (2.625 / p);
                    l = s * n * n + .984375;
                }
            }
        }
        return l;
    }
};
ef.easeIn = ef["ease-in"] = ef["<"];
ef.easeOut = ef["ease-out"] = ef[">"];
ef.easeInOut = ef["ease-in-out"] = ef["<>"];
ef["back-in"] = ef.backIn;
ef["back-out"] = ef.backOut;

This is a snippet from Raphael. Here you see you have a list of animation ease-in formulas.

Lets try one of them, e.g. ease-in

var pow = Math.pow;

function easeIn(n) {
  return pow(n, 1.7);
}

function easeOut(n) {
  return pow(n, .48);
}

function process(min, max, intervals, fN) {
  var diff = 1 / intervals,
    difference = max - min,
    curve = [];
  for (i = diff; i <= 1; i += diff) {
    curve.push(min + (difference * fN(i)));
  }
  return curve;
}

console.log('easeIn: \n', process(0, 400, 5, easeIn));
console.log('easeOut: \n', process(0, 400, 5, easeOut));

This might not be in sync with the output you have expected. But these are the formulas a renowned JS SVG library like Rapahel uses. You would love this demo

Ease in and out curve in for loop

2 Answers2