He estado tratando de encontrar una implementación de facilidad de JavaScript pura durante algunas horas, pero no pude encontrar ninguna. Los que se acercaron no tenían ningún sentido. Todo lo que pude encontrar fue un montón de funciones de facilitación sin implementación.

Por ejemplo, funciones como estas:

function linear(time, begin, change, duration) {
    return change * time / duration + begin;
}

function easeInQuad(t) {
    return t*t
},

function easeOutQuad(t) {
    return t*(2-t)
},

Una de las cosas que me preocupan es dónde entran los fps para jugar. Está directamente relacionado con la duración. No he visto ninguna mención al respecto.

¿Cómo implementaría las funciones de aceleración anteriores en la siguiente animación?

JSFiddle

var box = document.getElementById("box");

var fps		= 60;
var duration	= 2; // seconds
var start	= 0; // pixel
var finish	= window.innerWidth - box.clientWidth;
var distance	= finish - start;
var increment	= distance / (duration * fps);

var position = start;

function move() {
  position += increment;
  if (position >= finish) {
    clearInterval(handler);
    box.style.left = finish + "px";
    return;
  }
  box.style.left = position + "px";
}

var handler = setInterval(move, 1000 / fps);

body {
  background: gainsboro;
}
#box {
  width: 100px;
  height: 100px;
  background: white;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  position: absolute;
  left: 0;
}

<div id="box"></div>