Easing-Funktionen (Tween)

Sieben Easing-Familien, jede mit einer easeIn- und einer easeOut-Form. Sie sind reine Mathematik: kein DOM, keine eigene RAF-Schleife. Du gibst aus deinem eigenen Animationsbild die aktuelle Zeit hinein und bekommst den Wert zurück, den dieses Bild verwenden soll.

Die Argumente folgen der klassischen Konvention von Robert Penner:

• t: aktuelle Zeit (wie viel schon vergangen ist)
• b: Anfangswert
• c: Änderung des Werts (der Endwert ist b + c)
• d: Dauer

Jede Funktion begrenzt intern bei t >= d; ein Aufruf über das Ende hinaus liefert also den Endwert, statt aus dem Bereich hinaus zu extrapolieren.

Verwendung

import { cubic } from 'ranuts/utils';

const start = performance.now();
const tick = (now: number) => {
  const x = cubic.easeOut(now - start, 0, 300, 600); // von 0 auf 300 in 600 ms
  el.style.transform = `translateX(${x}px)`;
  if (now - start < 600) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

Verfügbare Kurven

API

Jeder Export hat dieselbe Form:

interface SpeedType {
  easeIn: EasingFn;
  easeOut: EasingFn;
}

type EasingFn = (t: number, b: number, c: number, d: number) => number;

easeIn / easeOut

Parameter

Rückgabe

Hinweise

easeIn beginnt langsam und beschleunigt, easeOut beginnt schnell und bremst ab. Für eine Oberfläche, die auf eine Handlung antwortet, wirkt easeOut meist besser: Das Element setzt sich sofort in Bewegung und kommt zur Ruhe, statt erst zu zögern.

Mit Dank an zhangxinxu/Tween.