Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

Wie kann man ein SVG-Band zum Welttag der psychischen Gesundheit animieren?

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

Der „Welttag der psychischen Gesundheit“ der Weltgesundheitsorganisation findet am 10. Oktober 2018 statt, um das Bewusstsein für psychische Gesundheitsprobleme zu schärfen. In diesem Jahr liegt der Schwerpunkt darauf, uns alle zu ermutigen, Programme und Dienstleistungen zu unterstützen und sich daran zu beteiligen, die junge Menschen erreichen und Probleme im Idealfall so früh wie möglich effektiv behandeln.

An diesem Tag werden wir CSS verwenden, um eine SVG zu animieren, die auf dem grünen Band zentriert ist, das viele Menschen tragen, um das Bewusstsein für psychische Gesundheit zu symbolisieren.

Wir haben zwei Hände, die von der linken und rechten Seite der Bühne zusammenkommen, um sich zu fassen. Dies zeigt, welche Unterstützung sich die Menschen gegenseitig leisten können. Danach erscheint das grüne Band zusammen mit einem beschreibenden Text.

Wenn Sie fertig sind, haben Sie diese Animation (drücken Sie bei Bedarf RERUN):

1. Holen Sie sich den Starter-Code

Ich habe den SVG- und HTML-Code im Voraus für Sie vorbereitet, damit Sie sich nur auf die Verwendung von CSS konzentrieren können, um verschiedene Elemente zu animieren, aus denen die Abbildung besteht.

Erstellen Sie zunächst eine leere HTML-Datei und kopieren Sie den folgenden Code und fügen Sie ihn ein:

Speichern und zeigen Sie Ihre Datei in einem Browser in der Vorschau an. Sie sollten dieses Bild mit allen sichtbaren SVG-Elementen sehen, von denen einige über anderen gestapelt sind:

World Mental Health Day 2018 first image

Beginnen wir mit einer Aufschlüsselung aller in der SVG enthaltenen Elemente, damit Sie wissen, womit wir arbeiten.

Zuerst haben wir die vordere Hand, die von der linken Seite der SVG eintritt:

World Mental Health Day 2018 the hand

Dann haben wir die hintere Hand, die von rechts eintreten wird:

World Mental Health Day 2018 right hand

Nachdem sich die beiden offenen Hände in der Mitte des Bildschirms gekreuzt haben, werden wir sie durch die gefalteten Hände ersetzen:

World Mental Health Day 2018 clasped hands

Wir haben dann das grüne Bewusstseinsband für psychische Gesundheit, das eingeblendet wird:

World Mental Health Day 2018 green ribbon

Der Haupttext zum „Welttag der psychischen Gesundheit“, der danach eingeblendet wird:

World Mental Health Day 2018 text label

Und der Datumstext, der das letzte Element zum Einblenden sein wird:

World Mental Health Day 2018 subtitle

2. Starten Sie das Hinzufügen von CSS

Alles, was wir für unsere Animation benötigen, befindet sich bereits im SVG-Code. Wir müssen nur die darin enthaltenen Elemente über ihre IDs erreichen und gezielt darauf abzielen.

Das erste, was wir tun müssen, ist, alle Elemente auszublenden, damit wir sie später zum richtigen Zeitpunkt anzeigen können. Fügen Sie den folgenden Code zwischen die <style></style>-Tags ein, die bereits in der gerade erstellten HTML-Datei vorhanden sind.

3. Lassen Sie die vordere Hand von links eintreten

Wir werden für jeden Teil unserer Sequenz @keyframes-Animationen verwenden. Die erste Animation, die wir erstellen, ist eine, mit der ein Element von einer Position außerhalb des linken Randes der SVG zu seiner ursprünglichen Position in der Mitte verschoben werden kann.

Fügen Sie Ihrem CSS den folgenden Code hinzu.

Lassen Sie uns durchgehen, was wir mit diesem Code machen.

Wir müssen unser Element nur von einer Position zur anderen bewegen, anstatt es im Zickzack durch Zwischenpositionen zu bringen. Aus diesem Grund können wir nur from und to verwenden, anstatt prozentuale Keyframes angeben zu müssen.

Im from-Keyframe verwenden wir die transform-Eigenschaft zu translate, um das Element ganz nach links zu verschieben, d. h. Neu zu positionieren, eine Position, die als -100% ausgedrückt wird. Im to-Keyframe geben wir die ursprüngliche Position des Elements mit 0% an. Die Keyframe-Animation behandelt automatisch das Verschieben des Elements zwischen den Zuständen from und to.

Sie werden auch feststellen, dass die opacity in beiden Keyframes auf 1 gesetzt ist. Dies bedeutet, dass das Element am Anfang der Animation angezeigt wird, bis zum Ende sichtbar bleibt und dann auf die zuvor festgelegte Standard-opacity von 0 zurückgesetzt wird und wieder verschwindet. Wir brauchen dies, um Platz für das Element mit den gefalteten Händen zu machen, das danach erscheint.

Jetzt können wir die Animation auf das Front-Hand-Element unserer SVG anwenden, das die ID #fronthand verwendet. Fügen Sie Ihrem Code das folgende CSS hinzu.

Hier geben wir den Namen der Animation an, d. h. infromleft, wodurch die gerade erstellte Animation ausgelöst wird. In der zweiten Zeile teilen wir der Animation mit, dass sie über einen Zeitraum von 1,5 Sekunden ausgeführt werden soll. In der dritten Zeile wird empfohlen, die easy-out-Animations-Timing-Funktion zu verwenden, mit der die Bewegung schnell beginnt und gegen Ende langsamer wird.

Wenn Sie Ihre Seite jetzt speichern und aktualisieren, sollten Sie sehen, dass die vordere Hand von der Seite kommt und in der Mitte anhält, wie unten abgebildet, für einen kurzen Moment, bevor sie verschwindet:

World Mental Health Day 2018 hand

4. Lassen Sie die hintere Hand von rechts eintreten

Wir werden jetzt eine weitere fast identische Animation wie die erste erstellen, mit dem Unterschied, dass das Element von rechts statt von links eingezogen wird. Fügen Sie dieses CSS Ihrem Stil hinzu:

Sie werden sehen, dass wir im from-Keyframe zu 100% anstatt zu -100% übersetzen, wodurch der Startpunkt der Animation über den rechten Rand hinaus verschoben wird. Alles andere in diesem Code entspricht der letzten Animation.

Wir werden diese Animation auf das hintere Element in der SVG anwenden, indem wir diesen Code hinzufügen:

Jetzt sollten Sie sehen, wie die beiden Hände zusammenkommen, bis sie sich in der Mitte kreuzen, bevor sie wieder verschwinden.

World Mental Health Day 2018 hands crossing over

5. Machen Sie den Handverschluss

Wir haben bereits die beiden offenen Hände verschwunden, sobald sie sich bewegt haben. Als nächstes müssen wir das Element der gefalteten Hände sofort genau in dem Moment erscheinen lassen, in dem die offenen Hände verschwinden.

Um dies zu erreichen, erstellen wir eine weitere Keyframe-Animation mit dem Namen instantappear. Diese Animation setzt lediglich die opacity während der gesamten Animation auf 1. Fügen Sie dieses CSS zu Ihrer Datei hinzu:

Wenden Sie die Animation mit dem folgenden Code auf das Element #claspedhands an:

Hier rufen wir in den ersten beiden Zeilen unsere sofort  instantappear Animation auf und setzen ihre duration auf 1 Sekunde. 

In der dritten Zeile weisen wir die Animation an, sich um 1,5 Sekunden zu delay, was der Dauer unserer ersten beiden Animationen entspricht. Auf diese Weise beginnt diese Animation, sobald sie fertig ist.

In der vierten Zeile setzen wir die Eigenschaft animation-filll-mode auf forwards. Dadurch wird die Animation angewiesen, bei ihrem letzten Frame anzuhalten und dort zu bleiben. Dadurch bleibt das Element bei der im End-Keyframe festgelegten opacity von 1, anstatt wie bei unseren vorderen und hinteren Händen auf die Standard-opacity von 0 zurückzukehren.

Zeigen Sie eine Vorschau Ihrer Animation an, und wenn sie fertig ist, sollten Sie Folgendes sehen:

World Mental Health Day 2018 clasped hands

6. Verbleibende Elemente mit wiederverwendbaren Keyframes einblenden

Für die drei verbleibenden Elemente benötigen wir nur noch eine Animation, die alles einblendet, worauf sie angewendet wird. Wir können es für jedes Element mit unterschiedlichen Einstellungen verwenden, um unsere Sequenz zu vervollständigen.

Erstellen Sie eine neue Animation mit dem Namen fadein und stellen Sie sie so ein, dass sie von opacity 0 zu opacity 1 übergeht:

Das grüne Band ist das nächste Element, das angezeigt werden soll. Wenden Sie daher unsere neue fadein-Animation mit dem folgenden CSS darauf an:

Hier wird die Überblendung für eine Dreiviertelsekunde wirksam und so eingestellt, dass sie nach Abschluss der vorhergehenden Animationen bei 1,75 Sekunden beginnt. Wieder verwenden wir den animation-fill-mode:forwards; um sicherzustellen, dass die opacity des Elements bei 1 bleibt, anstatt standardmäßig auf 0 zurückzusetzen.

Wenn Ihre Sequenz abgeschlossen ist, sollten Sie Folgendes sehen:

World Mental Health Day 2018 final animation

Jetzt wird auch der Haupttext eingeblendet. Wir haben bereits einen #wmhd-Stil im Dokument. Aktualisieren Sie ihn daher auf Folgendes:

Wir verwenden denselben Code wie für das Element #ribbon und verschieben die Verzögerung auf 2,25 Sekunden, damit das Erscheinungsbild der Elemente gestaffelt wird.

Ihre Animation sollte nun in diesem Zustand beendet sein:

World Mental Health Day 2018 finish state

Schließlich müssen wir das Datum anzeigen lassen, also aktualisieren Sie den vorhandenen #date-Stil auf:

Auch hier besteht die einzige Änderung darin, die Startzeit der Animation zu verschieben.

Einpacken

Mit diesem letzten Code ist Ihre Animation nun vollständig und sollte nach Abschluss der Ausführung folgendermaßen aussehen:

World Mental Health Day 2018 complete clasping hands animation

Weitere Informationen zum Welttag der psychischen Gesundheit finden Sie auf der Website der WHO.

Erfahren Sie alles über CSS-Animation:

Erfahren Sie mehr über SVG Animation:


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.