Basics / Animation

Bewegte Präsenz

Wir stehen für dynamische Premium-Mobilität. Und so erhalten Bewegungen im Audi Erscheinungsbild einen typischen, dynamischen Charakter. Grundlage ist eine Animationskurve: Inspiriert von der Dynamik unserer Fahrzeuge basiert sie auf einer kraftvollen Beschleunigung am Anfang und schnellem Abbremsen am Ende.

Animationskurve

Definition CSS für Web-Anwendungen

transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);

Definition für Apple iOS Apps

[[CAMediaTimingFunction alloc] initWithControlPoints:0.75f:0.02f:0.5f:1.0f]

Definition für Google Android Apps

PathInterpolatorCompat

Definition für Motion Design in Adobe After Effects

Outgoing Velocity: 75%
Incoming Velocity: 95%

Anwendungsbeispiele

Bewegungsrichtung

Elemente werden entweder horizontal oder vertikal bewegt, jedoch nicht schräg

Skalierung

Die Transformation in einen anderen Zustand wird über Skalierung gesteuert. Die Skalierung kann mit anderen Animationsparametern, wie z. B. einer Bewegung, kombiniert werden.

Deckkraft

Das Ein- und Ausblenden von Elementen wird über die Deckkraft gesteuert. Die Veränderung der Deckkraft kann für ein dynamischeres Erlebnis mit anderen Animationsparametern, wie z. B. einer Bewegung, kombiniert werden.

Rotation

Die Rotation beschränkt sich auf kleine Elemente und wird nicht mit anderen Animationsparametern kombiniert.

Timing

Die Dauer einer Animation orientiert sich an der Größe eines Elements und an der Strecke, die es zurücklegt.

Bei mehreren Elementen oder Animationsschritten sollte eine nachvollziehbare Reihenfolge festgelegt werden. Dabei werden möglichst wenige Elemente zeitgleich animiert.

Animation