Responsive Layout: Animation - Google Web Designer

Mein Name ist Lucas
und ich arbeite als Entwickler

für Google Web Designer.

Dieses Video ergänzt
vorherige Videos zur Erstellung

von Responsive-Dokumenten
mithilfe von Medienregeln.

Ich werde Ihnen zeigen, wie Sie
Animationen und Medienregeln kombinieren.

Wir beginnen mit einem einfachen Dokument.

Es hat ein vertikales Layout
bei einem schmalen Darstellungsbereich

und ein horizontales Layout
bei einem breiteren Darstellungsbereich.

Ich werde jetzt dieses Layout erweitern,

sodass im horizontalen Layout

und bei ausreichender Höhe

zwei Bilder angezeigt werden.
Diese werden zuerst

übereinandergelegt und dann
mithilfe einer Animation getrennt.

Da in Web Designer CSS3-Keyframes

für Animationen genutzt werden,

können wir das Ganze
mit Medienregeln codieren.

Zuerst wechsle ich zum Hauptinhalt.

Dann kopiere ich das Bild und füge es ein.

Für das neue Bild
verweise ich auf ein anderes Asset.

Dazu ändere ich den Pfad zu diesem Asset.

Außerdem lege ich fest,
dass es standardmäßig ausgeblendet ist.

Dann kehre ich zu den Medienregeln zurück

und lege einen Haltepunkt für die Höhe fest.

Wir bearbeiten die Anzeige für größere Höhen.

Ich füge also einen Keyframe

für jedes der beiden Bilder hinzu.

Ich verschiebe sie vertikal
mithilfe des Verschiebungstools –

und zwar so.

Zum Schluss ändere ich
die Einstellung für das zweite Bild,

damit es wieder sichtbar ist.

Jetzt kann ich per Scrubbing
eine Vorschau der Animation abspielen.

Diese Animation verhält sich responsiv,

da beide Bilder zentriert angezeigt werden,

selbst wenn die Größe
das Darstellungsbereichs verändert wird.

Wenn ich jedoch
eine andere Medienregel verwende,

wird die Animation nicht angezeigt.

Sie sehen auch, dass auf der Zeitachse

keine Tracks angezeigt werden.
Diese erscheinen nur in der

Medienregel rechts unten.

Nehmen wir an, ich möchte
eine Standardanimation erstellen,

bei der das Bild mit einer Deckkraft
von 0 bis 1 eingeblendet wird.

Dazu füge ich in den Hauptregeln

einen Keyframe ein.

Für die Standarddeckkraft lege ich 0 fest.

Für den Keyframe
setze ich die Deckkraft auf 1.

Im Hauptinhalt
wird jetzt das Bild eingeblendet.

Wenn wir zu den Medienregeln zurückgehen,

sehen wir, dass in jeder Medienregel

dieselbe Animation vorkommt.

Das ist die erste,

hier ist die zweite

und da ist die dritte.

Die einzige Ausnahme ist
die Medienregel unten rechts,

für die ich eine überschreibende
Animation festgelegt habe.

Wir müssen nur eine Einstellung korrigieren:

Wir haben für die
Standarddeckkraft im ersten Bild

0 ausgewählt.

Das müssen wir einfach wieder in 1 ändern

und dann funktioniert die Animation wieder.

Sie können ganz einfach überprüfen,
ob eine Animation

eine Medienregel überschreibt,
da das entsprechende Label

auf der Zeitachse markiert ist.

Wenn Sie auf dieses Label klicken,
wird ein Pop-up-Menü angezeigt.

Damit können Sie die
überschreibende Animation entfernen

und, sofern vorhanden,
nur die Standardanimation verwenden.

Das war alles von meiner Seite
zur Kombination von Animationen

mit Medienregeln.

Vielen Dank für Ihre Aufmerksamkeit.