Animationen

Grundprinzipien

Eine Animation beschreibt den Übergang zwischen zwei Zuständen. Sie definiert ihr Erscheinungsbild über die Beschleunigungskurve, die ihr Bewegungsverhalten über die Zeit abbildet. Alles was sich bewegt, ist Teil der Körpersprache von otto.de und muss sich somit zur Wahrung der Konsistenz gewissen Grundprinzipien unterwerfen.

Beschleunigungskurven

Eine Beschleunigungskurve definiert sich über die ausgeführte Bewegung und die dafür benötigte Zeit. Wir unterscheiden dabei zwei Grundprinzipien:

  • Direkte Interaktionen: Wird eine Animation durch eine Aktion des Nutzers direkt ausgelöst, startet sie mit maximaler Geschwindigkeit und bremst dann graduell ab.
    o_global.pali.presets.animationEasing: easeOutCubic

  • Automatische Animation: Wird eine Animation systemseitig gestartet, muss sie erst auf ihre maximale Geschwindigkeit beschleunigen.
    Anschließend bremst sie graduell ab.
    o_global.pali.presets.animationEasing: easeInOutCubic

Animationseigenschaften

Definierte Standard-Animationen mit Hilfe von Transitions als CSS-Klassen.

FadeOut (opacity)

FadeIn (opacity)

Interaktionspattern

Einzelne Seitenelemente, die unterschiedlich aussehen, sich in ihrer Funktion aber ähnlich verhalten, lassen sich zu Interaktionspattern zusammenfassen. Features, die den hier aufgeführten Kategorien in ihrer Funktionalität entsprechen, sollen den dort aufgeführten Animationsvorgaben folgen um ein konsistenten Nutzererlebnis zu gewährleisten.

Räumliches Auffahren

Das räumliche Auffahren betrifft alle Pattern, die bei Klick eine Fläche im Interface öffnen, die darunterliegende Elemente verdrängt.


Beim Auffahren dreht sich der Symbolbutton im Uhrzeigersinn, beim Schließen dreht er sich entgegen des Uhrzeigersinns zurück.
Bei einem erneuten Klick kehrt das Element in seinen Ausgangszustand zurück.

Beschleunigung: Die Bewegung startet mit maximaler Geschwindigkeit und wird dann stetig langsamer. Dies gilt sowohl beim Erscheinen als auch beim Verschwinden.

o_global.pali.presets.animationEasing: easeOutCubic

Punktskalierung

Die Punktskalierung betrifft alle Pattern, die bei Klick eine Fläche öffnen, die aus einem Punkt herausskaliert und sich über die anderen Seitenelemente drüberlegt.


Auf Klick skaliert das Objekt aus einem Punkt heraus. Der Skalierungsursprung (Ankerpunkt) liegt dabei zentriert mittig im Interaktionsobjekt Das Objekt skaliert auf Z-Achse hinter dem Interaktionsobjekt.

Beschleunigung: Das Flyout startet beim Erscheinen mit maximaler Geschwindigkeit und wird dann stetig langsamer. Beim Schließen beginnt die Animation langsam und wir dann schneller, um zu verdeutlichen wo das Objekt hingewandert ist.

Öffnen: o_global.pali.presets.animationEasing: easeInCubic

Schließen: o_global.pali.presets.animationEasing: easeInCubic

Sprungmarken

Das vertikale Scrollen betrifft alle Pattern, die bei Klick automatisch zu einem festen Zielpunkt auf der Seite scrollen.

Auf Klick wird automatisch einen definierten Ankerpunkt auf der Seite gescrollt. Bei gleichbleibender Scrolldauer, wird über die Geschwindigkeit die zurückgelegte Distanz ersichtlich. Außerdem garantiert eine feste Dauer für den Power-User keine zusätzlichen Verzögerungen

Beschleunigung: Das Scrollen beschleunigt sehr langsam auf Maximalgeschwindigkeit und bremst behäbig ab. Start und Zielpunkt des Nutzers werden dadurch stärker fokussiert.

o_global.pali.presets.animationEasing: easeInOutQuart

Nutzerinitiiertes Ausblenden

Das nutzerinitiierte Ausblenden betrifft alle Pattern, die bei Klick eine Fläche ausblenden und diese dadurch aus der Seitenhierarchie entfernen.

Auf Klick fadet das entfernte Objekt aus (es wird unsichtbar). Direkt im Anschluss schieben sich darunterliegende Objekte nach oben.
Das Nachrücken der darunterliegenden Seitenelemente benötigt weniger Zeit als das Ausfaden, da die primäre Interaktion das Löschen darstellt.

Beschleunigung: Die Transparenzveränderung verläuft linear ohne auffälliges Beschleunigen oder Abbremsen
Das Nachrücken beschleunigt am Anfang, und bremst am Ende ab. Die Beschleunigung sollte einer klassischen Sinuskurve gleichen

Ausblenden: linear (kein easing) Nachrücken: o_global.pali.presets.animationEasing: easeInOutCubic

Horizontales Scrollen

Das horizontale Scrollen betrifft alle Pattern, die sowohl bei einem Klick auf einen Symbolbutton, als auch beim direkten Swipen horizontal scrollen.

Beschleunigung: Das zu bewegende Objekt startet stets mit maximaler Geschwindigkeit und bremst immer mehr aus, bis es an seinem vorgesehenem Platz zum Stillstand kommt.

o_global.pali.presets.animationEasing: easeOutCubic

Für dieses Pattern ist kein Konfigurator verfügbar!

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!