Verbesserte Animations-Darstellung dank FLIP-Prinzip
Kommentare

Kaum eine Web-App kommt heutzutage mehr ohne Animationen aus. Idealerweise sollten sie 60 Frames pro Sekunde enthalten, um vom Betrachter flüssig wahrgenommen zu werden.

Allerdings ist das nicht immer leicht zu erreichen, und unterbrechungsfreudige oder schleppende Animationen sind oft die Folge. Paul Lewis zeigt, wie man das FLIP-Prinzip nutzen kann, um die gewünschten 60 FpS zu erreichen und dabei gleichzeitig für eine verbesserte wahrgenommene Seitenperformance zu sorgen.

So funktioniert das FLIP-Prinzip

Normalerweise werden Elemente direkt animiert und dabei aufwändige Kalkulationen auf jedem einzelnen Frame ausgeführt. Das sorgt oft für längere Ladezeiten und eine schwache Seitenperformance. Stattdessen kann die Animation allerdings auch vorkalkuliert und dann deutlich dynamischer abgespielt werden. Hier kommt das sogenannte FLIP-Prinzip ins Spiel, das für First, Last, Invert und Play steht.

First bezeichnet dabei den Ausgangstatus der in der Animation beinhalteten Elemente, Last den Endstatus der Elemente. Invert umfasst die Änderungen, die zwischen First und Last eintreten, also beispielsweise Veränderungen der Breite, Höhe und Dichte. Sie werden dann mit einem transforms– und opacity-Attribut versehen und so umgekehrt. Play meint, dass zunächst die Übergänge zwischen allen zuvor veränderten Properties eingeschaltet und dann alle Umkehr-Änderungen entfernt werden.

Einsatzmöglichkeiten von FLIP

FLIP lässt sich für eine Vielzahl von Animationen einsetzen, etwa als Reaktion auf User-Input. Interagiert ein User mit einer Seite, gibt es ein Zeitfenster von 100ms, in der Aktionen im Hintergrund ausgeführt werden können, ohne dass der User es merkt. Wird die Kalkulation innerhalb dieses Zeitfensters abgeschlossen und die Animation dargestellt, wirkt es auf den User so, als würde die Seite sofort reagieren.

Gerade für Animationen, die mit JavaScript oder CSS erstellt werden, bietet sich der Einsatz des FLIP-Prinzips an. Allerdings gibt es einige Faktoren, die man dabei im Hinterkopf behalten sollte. So sollte das 100ms-Zeitfenster nicht überschritten werden; zudem sollte die Vorkalkulation so abgeschlossen werden, dass sich nicht zwei Animationen überschneiden.

FLIP kann also dazu beitragen, dass Animationen reibungsloser angezeigt werden, indem die pro-Frame-Komplexität reduziert wird. Für den User bedeutet das vor allem eine bessere User Experience. In seinem Blogpost gibt Paul Lewis weitere Informationen zu den Nutzungsmöglichkeiten und zeigt mit Code-Beispielen, wie sich FLIP praktisch einsetzen lässt.

Aufmacherbild: switch electrically on the wall von Shutterstock / Urheberrecht: PHOTOBUAY

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -