Webentwicklung

jQuery Custom Easing – Generator für eigene Animationen

Veröffentlicht von

Das jQuery UI Plugin Easing hat von Haus aus schon einige brauchbare Easings, eine Vorschau bietet gibts auf der jQuery API Easing Seite.
Für manche Fälle würde man die Animationen aber gern an seine Bedürfnisse anpassen – und das geht auch ganz einfach:

  1. den Easing Function Generator von Timotheé Groleau aufrufen
  2. F5 / FMX rechts oben auswählen
  3. evtl. schon ähnlich passendes easing Preset wählen
  4. entweder Zahlen P1 – P4 anpassen, oder unten die gelben Quadrate verschieben
  5. Code function kopieren, zb: function(t, b, c, d) {
    var ts=(t/=d)*t;
    var tc=ts*t;
    return b+c*(4*tc + -6*ts + 3*t);
    }
  6. für jQuery easing anpassen:
    function(t, b, c, d) {
    erweitern durch die erste x Variable und der Funktionsdeklarierung:
    $.easing.nameDeinesEasings = function(x, t, b, c, d) {
  7. Diesen Code nun nach jQuery in deinen JavaScript einbinden. Und wie die üblichen Easings verwenden, zb:
    $('#element').animate({
    'left': '-=50px'
    },500, 'nameDeinesEasings');

Testen kann man die Funktion indem man einmal auf die rote Kugel klickt und dann an eine andere (gegenüberliegende) Position innerhalb des Flashbereichs.

Happy easing 😉