Ich habe einige Stunden lang versucht, eine einfache JavaScript-Implementierung zu finden, konnte aber keine finden. Diejenigen, die nahe kamen, ergaben keinen Sinn. Alles, was ich finden konnte, war eine Reihe von Beschleunigungsfunktionen ohne Implementierung.

Zum Beispiel funktioniert wie folgt:

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

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

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

Eines der Dinge, die mich beunruhigen, ist, woher FPS kommt, um zu spielen? Es hängt direkt mit der Dauer zusammen. Ich habe keine Erwähnung davon gesehen.

Wie würde ich die obigen Beschleunigungsfunktionen in der folgenden Animation implementieren?

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>