So erstellen Sie die VueConf-Ladeanimation (während Sie sich mit Vue.js und SVGs vertraut machen)

Vue.js hat kürzlich eine neue Landingpage für die VueConf 2017 veröffentlicht, die eine nette Animation enthält. Wie wäre es, wenn wir diese Animation erstellen und mehr über Vue.js und SVGs erfahren?

Worauf Sie sich einlassen: Eine Anleitung zum Erstellen der Animation auf der Zielseite für VueConf 2017. Im Einzelnen werde ich die Erstellung von SVGs, die Aufschlüsselung der Animation, die Verwendung von CSS-Animationen zum Replizieren der Animation und die Steuerung durchführen die Anwendung / das Timing von Animationen mit Vue.js. Es ist sehr lang und detailliert. Ich empfehle dies bei Bedarf in Stücken zu tun. Mit Pocket können Sie diesen Artikel einfach für später speichern, damit Sie nicht vergessen, dorthin zurückzukehren.

(Update 27.03.17): Ich habe damit begonnen, einen Videokurs zu erstellen, der eine sehr klare und detaillierte Aufschlüsselung der SVGs ermöglicht. Ich werde SVGs „unter der Haube“ erklären und mit Affinity Designer detaillierte Vektorgrafiken, Animationen mit CSS, GreenSock, Mo.js und Anime.js sowie einige praktische Anwendungen von UX-Animationen erstellen. Hier können Sie den Zugang buchen.

Letzte Demo / Code: http://codepen.io/mikemang/pen/JWNOrr/

Die Hintergrundgeschichte

Dieses Tutorial ist besonders reizvoll für mich, weil Vue.js mich vor dem Betrugssyndrom bewahrt hat.

Nach meinem Abschluss in Informatik hatte ich keine Ahnung, was ich in der Welt der Entwicklung machen wollte, und fühlte mich immer noch nicht sicher in meinen Fähigkeiten. Schnell sank ich in Betrugssyndrom. Kurz vor meinem Abschluss wurde ich jedoch durch einen Podcast mit dem Titel Smart Passive Income Podcast von Pat Flynn in Online-Unternehmen, Unternehmertum und Start-ups eingeführt.

Aufgrund dieser Erfahrung war das Entdecken der modernen Webentwicklung nach meinem Abschluss ein Hauch frischer Luft aufgrund seines wunderbaren Aromas von Energie, Enthusiasmus, unternehmerischer Neigung und Selbststartermentalität. Dies hat mich dazu bewogen, mich darauf zu konzentrieren, eine Karriere in der Webentwicklung zu finden.

Also habe ich mich sofort mit der modernen Webentwicklung beschäftigt, insbesondere mit React. Wie viele Leute hatte ich die Messlatte gesetzt, um ein Full-Stack-Webentwickler zu werden.

Ich pflügte mich durch Videokurse, mittlere Beiträge und alle anderen Arten von Leckereien und fühlte mich, als würde ich anständige Fortschritte machen. Schließlich konnte ich diese interaktive Wrigley Field-Anzeigetafel erstellen.

Während ich React lernte, beschäftigte ich mich auch intensiv mit dem Erstellen von Vektorgrafiken mit Affinity Designer. Das Erstellen von Vektorgrafiken begann mit einer unterhaltsamen mentalen Pause von einer stressigen 9- bis 5-jährigen Arbeitsunterstützung, obwohl ich wusste, dass ich Webentwickler und Unternehmer werden wollte und beides auch nicht tat.

Zu meiner Überraschung stellte ich fest, dass Vektorgrafiken und Designkenntnisse im Allgemeinen nicht allzu kompliziert waren und nur für Menschen mit einem künstlerischen Hintergrund. Ich machte coole, mutige Bilder aus einfachen Formen und einer mutigen Auswahl an Farben.

Mir wurde klar, dass meine Designfähigkeiten tatsächlich legitim wurden. Ich gewann das Selbstvertrauen zurück. Ich habe jedoch immer noch versucht zu lernen, wie ich meine Designfähigkeiten auf das Web übertragen kann.

Nach einigem Experimentieren und Selbstlernen mit reinen CSS-Bildern, SVGs und dem Erstellen von Websites mit Bootstrap stieß ich schließlich auf Vue.js. Vue.js war ein weiterer Hauch frischer Luft. Ich fand es so einfach, meinen Kopf herumzuwickeln. Es war zugänglich, lesbar und weitaus weniger einschüchternd als alles, was mir beim Lernen der Webentwicklung begegnet war.

Ich habe angefangen, Vue.js mit einem Schwerpunkt auf Design zu kombinieren. Ich habe Mini-Apps wie eine Pokemon-Kampf-App, eine Mad Libs-App, eine Pomodoro-Uhr und mehr erstellt. Ich habe Vue.js auch verwendet, um Animationen und andere sehr spezielle Fähigkeiten zu besprühen. Das Tolle an Vue.js ist, dass es von Animationen bis hin zu dynamischen Webanwendungen eingesetzt werden kann.

Während ich Vue.js lernte und dies alles erreichte, wurde ich schließlich vollständig vom Betrüger-Syndrom geheilt. Ich wusste, dass ich eine marktfähige, spezifische Fähigkeit in der Frontend-Entwicklung mit Schwerpunkt auf Design und Kreativität gefunden hatte.

Coding Artist entstand aus dem Wunsch heraus, Ressourcen für Ressourcen bereitzustellen, um Menschen dabei zu helfen, den soeben beschriebenen Weg zu gehen und zu lernen, wie man marktfähige Fähigkeiten in der designintensiven Frontend-Entwicklung findet.

Angesichts dieser Hintergrundgeschichte musste ich lächeln, als ich diese coole Animation auf der VueConf-Landingpage von Damian Dulisz sah.

Vue.js ist einer der Hauptgründe, warum ich das Betrüger-Syndrom besiegt, das Selbstvertrauen gewonnen habe, neue Herausforderungen wie Animationen anzugehen, und Coding Artist gegründet habe. Jetzt habe ich die Möglichkeit, eine ausführliche Anleitung zum Erstellen der Animation zu schreiben, die auf ihrer neuen Zielseite für die VueConf verwendet wird. Wie bereits erwähnt, freue ich mich sehr über dieses Tutorial.

Darüber hinaus hoffe ich, dass dieses Tutorial ein weiterer praktischer Leitfaden für die Verwendung von SVGs, Animationen und Vue.js in realen Anwendungen ist. Es ist wirklich eine marktfähige Fähigkeit, auf die Sie sich zu 100% konzentrieren können.

Lassen Sie uns gleich loslegen.

Das Problem auflösen

Als ich zum ersten Mal begann, die Verwendung von SVGs und Animationen zu sehen, wie wir sie in diesem Beitrag behandeln, hatte ich die Reaktion "Oh, das ist so cool! Ich wünschte nur, ich hätte eine Ahnung, wie das geht. “

Nachdem ich mir die Zeit genommen hatte, um zu lernen, wurde mir klar, dass das Erstellen einer solchen Animation nicht sehr schwierig ist, wenn Sie das Problem richtig auflösen können. Also lass uns das machen.

Folgendes müssen wir im weitesten / offensichtlichsten Sinne aufschlüsseln:

  1. So erstellen Sie die Grafiken
  2. So erstellen Sie die Animationen

Lassen Sie uns nun für jeden Punkt genauer erläutern, was zu tun ist.

Was müssen wir tun, um die Grafiken zu erstellen:

  1. Teilen Sie auf, welche Grafiken erstellt werden müssen
  2. Teilen Sie die Formen der einzelnen Grafiken auf
  3. Erstellen Sie die Formen, um jede Grafik als Vektorgrafik mit einem Werkzeug wie Illustrator, Sketch oder Affinity Designer zu formen (letzteres werde ich verwenden).
  4. Optimieren Sie die Bilder für den Export
  5. Exportieren Sie Bilder als SVGs
  6. Importieren Sie die SVGs und fügen Sie ein Styling hinzu, um die Grafiken an der Position anzuordnen, an der sie sich nach Abschluss der Animation befinden

Was müssen wir tun, um die Animationen zu erstellen:

  1. Verlangsamen Sie die gesamte Animation
  2. Bestimmen Sie die Animationen für jede bestimmte Grafik im nichttechnischen Sinne
  3. Schreiben Sie die CSS-Animationen, um die in Schritt 2 ermittelten Animationen auszuführen
  4. Finden Sie heraus, wie Sie die Animationen mithilfe von Vue.js organisieren

Hinweis: Die Grafiken werden mit Affinity Designer erstellt und über Codepen codiert.

Letzte Demo / Code: http://codepen.io/mikemang/pen/JWNOrr/

Aufschlüsselung der Grafiken, die wir erstellen müssen

Versuchen Sie als gute Übung herauszufinden, welche Grafiken erstellt werden müssen und welche Formen die einzelnen Grafiken bilden. Schreiben Sie dies auf und dann werden wir es durchgehen.

VueConf-Logo

Das VueConf-Logo ist das umgedrehte Vue.js-Logo. Es hat sich herausgestellt, dass ein Blick nach unten möglicherweise leichter erkennen lässt, welche Formen wir benötigen.

Wir brauchen drei Dreiecke übereinander: ein kleines weißes Dreieck, ein mittelblaues Dreieck und ein großes grünes Dreieck.

Sonne

Die Sonnengrafik ist sehr einfach. Es sind zwei Kreise übereinander: ein kleinerer weißer Kreis und ein größerer grüner Kreis.

Buchse

Der Busch ist auch sehr einfach. Es sind zwei Kreise: ein größerer grüner Kreis und ein kleinerer grüner Kreis, der sich auf der rechten Seite des größeren Kreises befindet.

Bäume

Die Bäume setzen das Muster der Einfachheit fort. Der linke Baum ist eine blaue Linie, ein größerer grüner Kreis und ein kleinerer grüner Kreis oben. Der rechte Baum ist nur eine blaue Linie und ein großer Kreis.

Titel

Der Zeit halber werde ich in diesem Tutorial nicht auf den Titel eingehen.

Grafik erstellen

Wir werden die Formen für jede Grafik erstellen. Wir können dies mit einer Vektorgrafik-GUI tun.

In diesem Lernprogramm verwende ich Affinity Designer. Alternativ können Sie auch Sketch, Adobe Illustrator oder Inkscape verwenden. Affinity Designer ist die günstigste der bezahlten Optionen bei 50 US-Dollar und mein persönlicher Favorit, aber jeder wird es tun. Inkscape ist kostenlos, aber begrenzt.

Wenn Sie fertig sind, können Sie loslegen.

VueConf-Logo

Beginnen wir mit dem größeren äußeren Dreieck.

In Affinity Designer kann ich das Dreieckswerkzeug folgendermaßen auswählen:

Ziehen Sie ein großes Dreieck heraus und aktualisieren Sie die Farbe mit diesem Hex-Code für die grüne Farbe:

# 41B883

Wir haben nun:

Als nächstes können Sie entweder ein anderes Dreieck herausziehen, um es ein bisschen kleiner zu machen, oder Sie können mit CMD + J duplizieren und die Größe ändern, indem Sie eine Ecke ziehen, während Sie die UMSCHALTTASTE gedrückt halten. (Sie können alle Verknüpfungen hier sehen)

Dieses Dreieck sollte am unteren Rand des größeren Dreiecks einrasten. Beachten Sie, dass Sie möglicherweise die Ebenen anpassen müssen, damit sich dieses Dreieck oben befindet. Verwenden Sie dazu Folgendes:

Hier ist die blaue Farbe:

# 35495E

Wir sollten am Ende folgendes feststellen:

Wir können wiederholen, um ein kleineres weißes Dreieck hinzuzufügen. Hier ist der Hex-Code:

#FFFFFF

Wir haben jetzt das komplette Logo.

Jetzt möchten wir unser Logo für den Zeitpunkt des Exports optimieren.

Sie können das Verschieben-Werkzeug auswählen und über jedes Dreieck ziehen, um sie auszuwählen.

Hier ist ein Clip dieses Konzepts in Aktion:

Drücken Sie anschließend CMD + G (oder Ebene → Gruppieren), um die ausgewählten Formen zu gruppieren.

Schauen Sie sich als Nächstes die Registerkarte Ebenen auf der rechten Seite des Bildschirms an:

Wir können sehen, dass wir unsere Ebenen / Formen gruppiert haben. Bewegen Sie den Mauszeiger als Nächstes über (Gruppe), doppelklicken Sie und nennen Sie dieses "VueConf-Logo".

Lassen Sie uns die Gruppe für eine gute Übung auch auseinanderbrechen:

Benennen Sie nun jedes Dreieck mit der folgenden Syntax:

VueConf Dreieck [Farbe]

Wir sollten jetzt haben:

Durch die Gruppierung des Logos haben wir im Wesentlichen gesagt: "Hey, diese Formen gruppieren sich zu einer Grafik". Jetzt können wir diese Grafik exportieren und es wird ein Block SVG-Code generiert. Der SVG-Block für unsere gesamte Logo-Grafik enthält Tags für jede Form. Durch die Benennung jeder Form können wir die Tags für jede Form in unserem SVG-Code unterscheiden.

Dies ist sinnvoller, wenn wir den SVG-Code untersuchen und in unser Codepen-Projekt importieren.

Lassen Sie uns vorerst alle diese Schritte für unsere anderen Grafiken wiederholen.

Sonne

Die Sonne sollte wirklich leicht sein.

Mit dem Ellipsen- (Kreis-) Werkzeug können wir einen größeren grünen Kreis herausziehen.

Anschließend können Sie einen weiteren kleineren weißen Kreis duplizieren und in der Größe ändern oder herausziehen.

Zuletzt können Sie den weißen Kreis einfach in die Mitte des grünen Kreises ziehen.

Hier ist ein Video zu diesem Konzept in Aktion:

Auch hier sind die Farben erforderlich:

//Grün
# 41B883
//Weiß
#FFFFFF

Wir sollten jetzt haben:

Beachten Sie, dass die Positionierung der Grafiken keine Rolle spielt, da wir dies letztendlich mit CSS in unserem Codepen-Projekt tun werden.

Der letzte Schritt besteht darin, jede Form erneut zu gruppieren und zu benennen:

Buchse

Ziehen Sie einen grünen Kreis heraus. Erstellen Sie dann einen weiteren grünen Kreis mit Ihrer bevorzugten Methode.

Verwenden Sie das Verschieben-Werkzeug, um den kleineren Kreis an die richtige Stelle zu ziehen.

Grüne Farbe:

# 41B883

Wenn Sie fertig sind, gruppieren Sie die Grafik, benennen Sie die Grafik und benennen Sie dann jede einzelne Form in dieser Grafik. Hinweis: Ich habe die Kreise Bush Circle Left und Bush Circle Right benannt, da sie dieselbe Farbe haben.

Sie sollten jetzt den Dreh raus haben.

Bäume

Der erste Baum, Tree Left, kann erstellt werden, indem zuerst ein dünnes blaues Rechteck / eine blaue Linie gezogen wird.

Blaue Farbe:

# 35495E

Anschließend duplizieren Sie diese Form (CMD + G) und halten die Umschalttaste gedrückt, während Sie sie nach rechts ziehen. Wenn Sie die Umschalttaste gedrückt halten, bleibt die vertikale Position unverändert.

Lassen Sie uns mit der Basis für unseren Baum links und den Baum rechts einen mittleren Kreis zu Baum links und einen großen Kreis zu Baum rechts hinzufügen, die wir einrasten lassen, um sie horizontal auf die Basis unserer Bäume zu zentrieren. Es kann ein wenig dauern, bis die richtige Größe und Position erreicht ist.

Grüne Farbe:

# 41B883

Zuletzt müssen wir nur noch einen kleineren Kreis auf unserer linken Seite hinzufügen.

Nun können wir jeden Baum gruppieren, ihn Tree Left und Tree Right nennen und jede Form innerhalb dieser Grafiken benennen.

Als SVG exportieren

Im nächsten Schritt exportieren Sie jede Grafik als SVG-Datei.

Klicken Sie dazu einfach auf eine Grafik und gehen Sie zu Datei → Exportieren. Wählen Sie dann das SVG-Symbol und wählen Sie "Auswahl ohne Hintergrund" unter "Bereich". Klicken Sie auf Exportieren.

Speichern Sie die Datei lokal unter dem Namen [Grafikname] .svg (d. H. Bush.svg).

Vorbereiten des Imports

Öffnen Sie diese Vorlage und geben Sie sie ein: http://codepen.io/mikemang/pen/f8f28ae6adcc716d097a07a2bfb2d00d

Wie Sie sehen, habe ich bereits eine Box erstellt, die den Container für unsere vollständige Grafik darstellt.

Importieren der SVGs

(Update 27.03.2017): Ich empfehle die Verwendung von SVGOMG anstelle der unten beschriebenen Methode, um die SVG-Dateien zu optimieren und den SVG-Code abzurufen.

Der nächste Schritt besteht darin, die gespeicherten SVG-Dateien in unser Codepen-Projekt zu importieren.

Zunächst müssen wir den SVG-Code abrufen.

Dazu können wir die SVG-Dateien in einen Chrome-Tab ziehen. Hier ist ein Clip davon in Aktion:

Beginnen wir mit der Registerkarte "VueConfLogo.svg".

Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie Seitenquelle anzeigen.

Wir sehen jetzt den SVG-Code, den wir brauchen:

Wir brauchen nur Folgendes:

VueConf-Logo

 < g id = "VueConf-Logo">     

Ich werde einfach die SVG-Codes für den Rest unserer Grafiken bereitstellen.

Sonne

 < g id = "Sun">  < Ellipse id = "Sun-Circle-Green" cx = "44.28" cy = "43.2" rx = "26.88" ry = "26.224" style = "fill: #fff;" />  

Buchse

     

Baum links

      

Baum rechts

     

Packen wir unseren Tree Right-SVG-Code aus, damit wir verstehen, was dieser Code bedeutet.

Kurz gesagt, das gesamte SVG-Tag ist eine Grafik / ein Bild. Innerhalb des Bildes gab es verschiedene Formen, die geschaffen wurden, um dieses Bild zu formen. In diesem SVG-Tag haben wir andere Tags, die Code für die erstellten Formen sind.

In Tree Right hatten wir 1 Kreis und 1 Rechteck, die wir vor dem Exportieren benannt haben.

Schauen Sie noch einmal hin und stellen Sie fest, wie die Ellipse und das Rechteck über der ID mit dem von uns angegebenen Namen lauten:

Wenn Sie dies vor dem Export benennen, wissen Sie, auf welche Formen sich diese Tags beziehen.

Wenn wir möchten, können wir jedem der Shape-Tags eine Klasse hinzufügen und bestimmte CSS-Eigenschaften für genau diese eine bestimmte Form im Tree Right-Bild bearbeiten. Das heißt, wir könnten auch Animationen für nur diese eine Form hinzufügen.

Ziemlich cool, oder ?!

Fügen Sie diese SVG-Tags in Codepen hinzu.

Beginnen Sie mit dem VueConf-Logo-Code und fügen Sie ihn direkt unter

ein. Entfernen Sie die Werte für Höhe und Breite am Anfang des SVG-Tags und fügen Sie das vueconf-Logo der Klasse hinzu.

  

Jetzt befindet sich das Logo genau in der Mitte des Containers. Normalerweise müssten Sie die Größe und Position für die Klasse hinzufügen, der Sie den SVG-Code gegeben haben. Allerdings habe ich die Klassen bereits in die Vorlage geschrieben.

Wiederholen Sie das, was wir gerade gemacht haben, stellen Sie jedoch sicher, dass Sie den entsprechenden Klassennamen verwenden:

Sonne
Buchse
Baum-links
Baum rechts

Wenn Sie fertig sind, haben wir die Grafiken jetzt an den richtigen Stellen positioniert:

Jetzt ist es Zeit, eine Animation hinzuzufügen.

Aufschlüsselung der Animation

Um die Sache zu vereinfachen, habe ich die Animation 8x verlangsamt, damit wir eine gute Vorstellung davon bekommen, wie es funktioniert.

Sehen Sie sich das Video an und notieren Sie, was die Animationen auf nicht-technische Weise bewirken. Sie möchten die Animation sowie das Timing der verschiedenen Animationen für jede Form in jeder Grafik suchen.

Hier sind meine Notizen:

VueConf-Logo

Gleitet vom oberen Bildschirmrand nach unten und ist horizontal zentriert, fällt knapp hinter dem vertikalen und horizontalen Mittelpunkt ab und springt etwas höher auf.

Dreht sich um 180 Grad.

Sonne

Hat sich nicht vom Bildschirm entfernt.

Wächst und schrumpft.

Buchse

Hat sich nicht vom Bildschirm entfernt.

Bush Circle Left wächst und schrumpft.

Bush Circle Right beginnt zu wachsen, wenn Bush Circle Left vollständig wächst und dann schrumpft.

Baum links

Die Tree Left Base wächst vertikal, dann erscheint der Tree Left Circle Bottom.

Tree Left Circle Bottom wächst und schrumpft. Wenn der Vorgang abgeschlossen ist, erscheint, wächst und schrumpft die linke Kreisoberseite des Baums.

Baum rechts

Tree Right Base wächst vertikal, dann erscheint der Tree Right Circle.

Der rechte Baumkreis wächst und schrumpft.

Jetzt müssen wir uns Notizen darüber machen, wann die einzelnen Grafiken im Vergleich zu den anderen Grafiken erscheinen. (d. h. Tree Left Base erscheint direkt nach dem Drehen des VueConf-Logos)

Hier sind meine Notizen:

Das VueConf-Logo wird vervollständigt.

Tree Left Base laicht und beginnt zu wachsen.

Direkt nachdem Tree Left Base vollständig gewachsen ist, erscheint Tree Right Base und beginnt zu wachsen.

Wenn die Tree Right Base vollständig wächst, erscheint und wächst Bush Circle Left.

Die Sonne erscheint und beginnt zu wachsen, wenn Tree Right vollständig ist.

Mit diesen Notizen sollten wir genug haben, um mit dem Schreiben der CSS-Animationen zu beginnen.

Schreiben der CSS-Animationen

(Update 27.03.17): Warum verwende ich CSS-Animationen und keine Animationsbibliothek wie GreenSock? Kurz gesagt, CSS-Animationen erleichtern den Einstieg in Animationen. Ich möchte keine externe Bibliothek in einen Blogeintrag einfügen, der bereits sehr detailliert ist. Ich würde GreenSock jedoch jedem empfehlen, der mit der Funktionsweise von Animation in CSS vertraut ist. Sie können hier den Zugang zu einem Videokurs buchen, der CSS-, GreenSock-, Mo.js- und Anime.js-Animationen mit SVGs abdeckt.

VueConf-Logo

Zu Beginn müssen wir die Animation für das VueConf-Logo vervollständigen, um das zu tun, was wir in unseren Notizen hatten:

// 1
Gleitet vom oberen Bildschirmrand nach unten, senkt sich kurz hinter dem vertikalen und horizontalen Mittelpunkt und springt etwas höher auf.
// 2
Dreht sich um 180 Grad.

Wir werden zwei verschiedene Animationen schreiben.

Den ersten Teil können wir slideInBounce nennen. Hier ist die Shell:

@keyframes slideInBounce {

}

Jetzt müssen wir an bestimmten Stellen der Animation Änderungen an den CSS-Eigenschaften hinzufügen.

@keyframes slideInBounce {

0% {
    Top 100%;
  }
 70% {
    oben: 33%;
  }
  100%{
    oben: 25%;
  }
}

Hier legen wir fest, dass sich das VueConf-Logo bei 0% der Animation über dem Container befindet. Bei 70% der Animation soll sie etwas niedriger als die endgültige Position sein. Dies erzeugt den Sprungeffekt, da er bei 100% der Animation zu einem oberen Wert von 25% zurückkehrt, der der Ruheposition in der Mitte unseres Containers entspricht.

Wir müssen an jedem dieser Punkte eine weitere Linie hinzufügen.

In der Originalanimation wird das VueConf-Logo verkehrt herum aus der Ruheposition eingezogen. Daher wird das Logo bereits eingespiegelt und bei unserer nächsten Animation wird das Logo wieder normal eingespiegelt.

Wir drehen das Logo mit transform: rotate (-180deg) auf den Kopf.

@keyframes slideInBounce {
  0% {
    transformieren: drehen (-180 Grad);
    Top 100%;
  }
 70% {
    transformieren: drehen (-180 Grad);
    oben: 33%;
  }
  100%{
    transformieren: drehen (-180 Grad);
    oben: 25%;
  }
}

Die Verwendung des Negativs wird Sinn machen, sobald wir dies in Aktion sehen können.

Um diese Animation zum Laufen zu bringen, müssen wir der Klasse vueconf-logo eine Animationsanweisung hinzufügen.

.vueconf-logo {
Position: absolut;
Höhe: 50%;
Breite: 50%;
oben: 25%;
links: 25%;
Animation: slideInBounce 1s 1;
}

Hier haben wir drei Teile der Animationsanweisung.

  1. Der Animationsname (slideInBounce)
  2. Die Dauer der Animation (1s)
  3. Die Anzahl der Iterationen (1)

Jetzt sollte die Animation funktionieren.

Als Nächstes fügen wir eine weitere Animation mit dem Namen "Spiegeln" hinzu, sodass sich das Logo im Uhrzeigersinn in die Ruheposition dreht.

@keyframes flip {
  0% {
    transformieren: drehen (-180 Grad);
  }
  100%{
    transformieren: drehen (0 Grad);
  }
}

Wir definieren die Animation genauso wie die vorherige. Hier möchten wir nur eine Änderung von 0% auf 100% vornehmen. Das Logo soll um 180 Grad von -180 Grad bis 0 Grad gedreht werden.

Anschließend können wir dem vueconf-logo eine weitere Animation hinzufügen:

.vueconf-logo {
Position: absolut;
Höhe: 50%;
Breite: 50%;
oben: 25%;
links: 25%;
Animation: slideInBounce 1s 1,
Flip 0,5s 1s 1;
}

Durch Hinzufügen eines Kommas zur vorherigen Anweisung können wir eine weitere Anweisung verketten.

Wir rufen unseren Animations-Flip für eine Dauer von 0,5 Sekunden auf. 1s bezieht sich auf die Animationsverzögerung.

Lassen Sie uns darüber nachdenken.

Wir haben jetzt zwei Animationsanweisungen. Wir möchten jedoch flip ausführen, nachdem slideInBounce abgeschlossen ist. Wenn slideInBounce 1 Sekunde dauert, muss das Umblättern um 1 Sekunde verzögert werden.

Zuletzt haben wir noch einmal eine Iteration von 1 angegeben.

Wir sind jetzt mit dem VueConf-Logo fertig.

Baum links

Baum Linke Basis

Sehen wir uns zunächst unsere Notizen an:

Die Tree Left Base wächst vertikal, dann erscheint der Tree Left Circle Bottom.

Da jede andere Grafik darauf wartet, dass das VueConf-Logo vollständig angezeigt wird, müssen sie anders behandelt werden.

Es gibt Möglichkeiten, sich nur an CSS-Animationen zu halten, aber wir können auch Vue.js verwenden, was angemessen erscheint.

Bevor wir anfangen, unseren Vue.js-Code zu erstellen, fassen wir noch einmal zusammen, wie wir mit den Animationen von Tree Left umgehen müssen, da es warten muss, bis das VueConf-Logo fertig ist.

  1. Wir werden das bedingte Rendern von Vue verwenden, sodass Tree Left Base, Tree Left Circle Bottom und Tree Left Circle Top nur gerendert werden, wenn ein Flag auf true gesetzt ist
  2. Das Flag, das das Rendern von Tree Left Base steuert, wird nach 2 Sekunden auf true gesetzt, damit gewartet werden kann, bis das VueConf-Logo fertig ist.
  3. Bei Verwendung der Klassenbindung wird Tree Left Base angezeigt und wächst vertikal, bis die Animation abgeschlossen ist.
  4. Mit den gleichen Techniken wird der linke Baumkreis unten angezeigt, wenn die linke Baumbasis fertiggestellt ist, und es wird eine Animation zum Vergrößern und Verkleinern angezeigt.
  5. Dann machen wir dasselbe mit Tree Left Circle Top, mit der Ausnahme, dass es startet, nachdem Tree Left Circle Bottom abgeschlossen ist.

Beginnen wir mit dem Hinzufügen der Shell einer neuen Vue-Instanz namens App. Ich habe das Skript Vue.js bereits in die Vorlage aufgenommen.

var app = new Vue ({
  el: "#app",
  Daten: {
    
  },
  Methoden: {
    
  }
})

Fügen wir nun ein div mit einer ID von app hinzu, damit wir eine Kommunikation zwischen unserem HTML-Code und dieser Vue-Instanz herstellen können.

Cool. Fügen wir nun die Flags in unsere Daten ein, die für das bedingte Rendern für jede Form in Tree Left verwendet werden sollen.

var app = new Vue ({
  el: "#app",
  Daten: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false
  },
  Methoden: {
    
  }
})

Wir setzen alle diese Flags auf false, da jede Form standardmäßig nicht gerendert werden soll.

Als nächstes müssen wir nur v-if = "[Flagname]" für jede Form in unserem HTML hinzufügen, damit wir die Verbindung mit der Vue-Instanz herstellen, um die Form bedingt zu rendern.

 
  

Wir können Tree Left nicht mehr wie geplant sehen.

Genial!

Der nächste Schritt ist das Hinzufügen der Logik, um showTreeLeftBase nach 2 Sekunden auf true zu setzen (wenn das VueConf-Logo vollständig ist). Dazu werden wir die Lifecycle-Hooks von Vue verwenden.

Mit einem einfachen Beispiel hängt das bedingte Rendern normalerweise von den Eingaben eines Benutzers ab. Zum Beispiel kann die Funktion I durch Klicken auf eine Schaltfläche aufgerufen werden, um ein Flag auf true zu setzen und das Rendern von etwas zu veranlassen.

In unserem Beispiel möchten wir eine Funktion aufrufen, die showTreeLeftBase setzt und bewirkt, dass Tree Left Base nach zwei Sekunden gerendert wird (keine Benutzereingabe).

Dazu fügen wir den folgenden Lebenszyklus hinzu:

var app = new Vue ({
  el: "#app",
  Daten: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false
  },
  Methoden: {
    
  },
  created () {
    // Eine Funktion aufrufen, die setTreeLeftBase auf true setzt
  }
})

Dieser Lebenszyklus funktioniert so, dass wir beim Erstellen unserer App eine Funktion aufrufen können. Auf diese Weise wird eine Funktion durch einen Lebenszyklus ausgelöst, wenn die App erstellt wird, und nicht durch eine Benutzereingabe.

Erstellen Sie eine Funktion mit dem Namen toggleTreeLeftBase und fügen Sie den Aufruf im erstellten Lebenszyklus hinzu:

var app = new Vue ({
  el: "#app",
  Daten: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false
  },
  Methoden: {
    toggleTreeLeftBase: function () {
      
    }
  },
  created () {
    this.toggleTreeLeftBase ()
  }
})

Als nächstes fügen wir die Zeile hinzu, die setTreeLeftBase in dieser neuen Funktion auf true setzt.

var app = new Vue ({
  el: "#app",
  Daten: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false
  },
  Methoden: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
    }
  },
  created () {
    this.toggleTreeLeftBase ()
  }
})

Unsere linke Baumbasis erscheint jetzt.

Als nächstes müssen wir die Logik hinzufügen, damit die Funktion erst 2 Sekunden nach dem erstellten Lebenszyklus aufgerufen wird, da das VueConf-Logo beendet werden muss.

Wir können dazu setTimeout wie folgt verwenden:

created () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    }, 2000)
  }

Hinweis: Dies mag seltsam aussehen, da es sich um ES6 (moderne JavaScrip-Syntax) handelt. "() =>" Ist nur eine Abkürzung für "function ()".

setTimeout verzögert die Ausführung des darin enthaltenen Codes. In unserem Fall wird this.toggleTreeLeftBase () nach der Erstellung als 2000 Millisekunden (2 Sekunden) bezeichnet. Dies gibt uns die Verzögerung von 2 Sekunden, um das VueConf-Logo fertigzustellen.

Nachdem das VueConf-Logo zu Ende ist, können wir nun das Laichen der linken Baumbasis sehen.

Süss!

Wir wollen jedoch, dass Tree Left Base eine Animation hat. Vue bietet einige Möglichkeiten, wie wir dies tun können. Eine Möglichkeit besteht darin, Übergangseffekte zu verwenden, mit denen wir die CSS-Animation angeben können, wenn etwas angezeigt wird, das bedingt gerendert wird. Darüber spreche ich ausführlich in meinem Videokurs. Es ist jedoch die bessere Option. Ich denke, es ist einfacher, unsere andere Option zu wählen, da es in diesem Beitrag bereits viel zu verdauen gibt.

Die zweite Option, die wir verwenden werden, ist die Klassenbindung mit Vue.js. Durch die Verwendung der Klassenbindung können wir dynamisch steuern, welche Klassen oder Klassen derzeit in einem Div in unserem HTML-Code aktiv sind.

Folgendes müssen wir tun, damit dies funktioniert:

  1. Schreiben Sie eine Klasse, in der eine Animation mit der Basis Tree Left in einer Iteration vertikal wächst.
  2. In der gleichen Funktion, in der wir die linke Baumbasis erzeugen, fügen wir die Klasse mit einer Animation hinzu, die auf der linken Baumbasis aktiv sein soll.

Auf diese Weise erhalten wir die Animation, die wir benötigen.

Schreiben wir zunächst die Shell der Klasse, die eine Animation aufruft. Wir können es growActive nennen.

.growActive {
  
}

Zweitens definieren wir die Shell einer Animation, die wir Grow nennen.

@keyframes wachsen {
  
}

Wir möchten, dass die linke Basis des Baums vertikal wächst, also von 0% in der Animation zu 100% in der Animation, wir müssen die Höhe von 0% zu 100% ändern.

@keyframes wachsen {
  0% {
    Höhe: 0%;
  }
  100%{
    Höhe: 100%;
  }
}

Als Nächstes können wir die Animationsanweisung in growActive hinzufügen, um diese Animation einmal aufzurufen. Das Wachstum sollte einmal für 0,5 Sekunden ausgeführt werden.

.growActive {
  animation: wachse 0,5s 1;
}

Sagen wir nun unserem HTML-Code, dass unsere Vue-Instanz die aktive Klasse steuern soll. Wir werden v-bind: class verwenden.

Im obigen Code haben wir die v-bind: class = ”TreeLeftBaseClass” zum Shape-Tag für unsere Tree Left Base hinzugefügt, das sich im SVG-Code für Tree Left befindet. Nun wird die Klasse, die für diese Form aktiv ist, durch Daten in unserer Vue-Instanz namens treeLeftBaseClass bestimmt, die wir definieren müssen.

var app = new Vue ({
  el: "#app",
  Daten: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: ""
  },
  Methoden: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
    }
  },
  created () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    }, 2000)
  }
})

Jetzt hat unsere Tree Left Base eine Klasse, die von treeLeftBaseClass in unserer Vue-Instanz gesteuert wird. Wir haben der Klasse standardmäßig keine Klasse zugewiesen, da die Klasse nur hinzugefügt werden soll, wenn Tree Left Base geladen wird.

Der letzte Schritt für Tree Left Base besteht darin, treeLeftBaseClass innerhalb der Funktion toggleTreeLeftBase zu ändern, bei der Tree Left Base aktiviert ist.

var app = new Vue ({
  el: "#app",
  Daten: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: ""
  },
  Methoden: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "growActive"
    }
  },
  created () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    }, 2000)
  }
})

Unsere Animation funktioniert jetzt mit Klassenbindung!

Es gibt nur ein kleines Problem. Wir möchten, dass es von unten wächst, also müssen wir unsere Wachstumsanimation schnell anpassen.

@keyframes wachsen {
  0% {
    transformieren: translatey (100%);
    
  }
  100%{
    transform: translatey (0%);
  }
}

Durch die Verwendung dieser Animation wächst sie jetzt von unten.

Ich gebe zu, dass es verlockend ist, weiterzumachen, da hier einige Erklärungen erforderlich sind, warum dies funktioniert. Ich betone jedoch immer, dass ich mein Bestes geben werde, um niemals Annahmen in meinem Unterricht zu treffen. Deshalb werde ich das erklären.

translateY wird verwendet, um etwas nach oben oder unten zu bewegen (man denke an die y-Koordinate in einem Diagramm). Hier ist dieselbe Animation, die auf ein Rechteck in einem anderen Projekt angewendet wird:

Dieses schwarze Rechteck hat eine Höhe von 20% (relativ zum gesamten Fenster). translateY (100%) drückt es 100% seiner Höhe herunter, also 20%. Am Ende der Animation wird wieder translateY (0%) angezeigt, das nicht gedrückt wird. Es gibt keinen Wachstumseffekt, sondern einen Verlagerungseffekt.

Warum funktioniert das in unserem Beispiel?

Lassen Sie uns ein Bild von Tree Left bekommen. Fügen Sie der Klasse links vom Baum einen Rahmen hinzu:

.baum-links {
  Position: absolut;
  Höhe: 25%;
  Breite: 30%;
  links: 0%;
  Boden: 25%;
  Rand: durchgehend rot 3px;
}

Wir sehen, dass Tree Left in einer Box ist.

Ändern Sie die Breite von .tree-left auf 20%.

Die Höhe und Breite bestimmen das Feld um den linken Baum.

Was geht hier vor sich?

SVGs steht für skalierbare Vektorgrafiken. Kurz gesagt, es funktioniert nicht wie ein herkömmliches Bild, bei dem Sie eine bestimmte Höhe und Breite erzwingen können. Das richtige Verhältnis von Höhe zu Breite kann nicht automatisch beibehalten werden.

Wie im obigen Bild dargestellt, können Sie ein Bild mit einer Größe von ursprünglich 200 x 200 Pixel erstellen, das in eine andere Größe umgewandelt werden kann, ohne das Verhältnis beizubehalten. Stattdessen kann das Verhältnis skaliert und beibehalten werden.

Um ein detailliertes Verständnis davon zu bekommen, werde ich diesen großartigen Artikel von CSS-Tricks stoßen und empfehlen.

Alles, was Sie verstehen müssen, um unsere translateY-Animation zu verstehen, ist, dass um Tree Left ein Kästchen zum Skalieren vorhanden ist. Wenn wir Tree Left unter das Kästchen drücken, können wir es nicht sehen.

Entfernen Sie in diesem Zusammenhang den Rand und überprüfen Sie die Vergrößerungsanimation erneut:

@keyframes wachsen {
  0% {
    transformieren: translatey (100%);
    
  }
  100%{
    transform: translatey (0%);
  }
}

Hier drücken wir Tree Left Base aufgrund von translateY (100%) um 100% nach unten, sodass es vollständig unterhalb der Box und unsichtbar ist.

Wenn es aufgrund von translateY (0%) wieder nach oben verschoben wird, wechselt es von unterhalb der Box zu der Box, in der es sich befindet. Bis wir die 100% ige Übersetzung von Y vollständig erreicht haben, wird ein Teil der linken Baumbasis abgeschnitten. Aus diesem Grund haben wir einen „Wachstumseffekt“ von unten nach oben, indem wir die linke Basis des Baums über den Zeitraum „enthüllen“.

In Ordung. Atmen wir tief ein und rekapitulieren. Wir haben jetzt eine funktionierende Animation für Tree Left Base, wenn sie erscheint.

Dies ist uns gelungen, indem wir zusätzlich zu unseren CSS-Animationen die Klassenbindung und das bedingte Rendering von Vue verwendet haben.

Baum linker Kreis unten

Die gute Nachricht ist, dass mit Tree Left Base alles andere leichter zu erfassen und zu vervollständigen sein sollte.

Lassen Sie uns den linken Baumkreis unten hinzufügen.

Sehen wir uns zunächst unsere Anmerkungen zur Animation an.

Tree Left Circle Bottom wächst und schrumpft.

Wir müssen auch das Timing berücksichtigen. Dies sollte angezeigt werden, nachdem die Animation der linken Baumbasis abgeschlossen ist. Beginnen wir damit, dass es pünktlich erscheint. Dann können wir die Animation hinzufügen.

Wir können einen ähnlichen Ansatz verwenden, um die Animation mithilfe eines setTimeout zu verzögern. Dieses Mal befindet sich das setTimeout jedoch in toggleTreeLeftBase

Methoden: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "growActive"
      setTimeout (() => {
      
      }, 500)
    }
  },

Wenn Sie sich erinnern, wird diese Funktion im erstellten Lebenszyklus aufgerufen, der mit einem setTimeout um 2 Sekunden verzögert wird:

created () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    }, 2000)
  }

Wenn diese Funktion aufgerufen wird, erzeugt Tree Left Base eine Klasse mit einer Animation, die 0,5 Sekunden dauert.

Daher können wir durch Hinzufügen eines setTimeout innerhalb von toggleTreeLeftBase eine Funktion mit dem Namen toggleTreeLeftCircleBottom nach 0,5 Sekunden (500 Millisekunden) aufrufen, damit die Animation von Tree Left Base beendet wird.

Fügen wir den Aufruf toggleTreeleftCircleBottom hinzu, den wir in Kürze schreiben werden.

Methoden: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "growActive"
      setTimeout (() => {
        this.toggleTreeLeftCircleBottom ()
      }, 500)
    }
  },

Als Nächstes fügen wir toggleTreeLeftCircleBottom und die Logik hinzu, damit der linke Baumkreis unten angezeigt wird.

toggleTreeLeftCircleBottom: function () {
  this.showTreeLeftCircleBottom = true
}

Nachdem Tree Left Base fertig ist, sollte nun Tree Left Circle Bottom erscheinen, wie wir es uns erhofft hatten.

Jetzt müssen wir uns um die Animation kümmern.

Wir werden wieder die Klassenbindung verwenden.

Fügen wir zunächst die v-bind: -Klasse in das Shape-Tag "Tree Left Circle Bottom" in unserem HTML-Code ein.

Zweitens können wir unserer Vue-Instanz einige Daten hinzufügen, die die Klasse zuweisen.

Daten: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: ""
  },

Jetzt stellen wir die Verbindung her, sodass die Klasse von Tree Left Circle Bottom von treeLeftCircleBottomClass gesteuert wird. Wir möchten, dass es keine Klasse zum Starten gibt, und wir werden eine Klasse hinzufügen, die eine Animation in derselben Funktion enthält, wenn wir sie aktivieren. Lassen Sie uns dies jetzt tun und eine Klasse "growShrinkActive" zuweisen.

toggleTreeLeftCircleBottom: function () {
  this.showTreeLeftCircleBottom = true
  this.treeLeftCircleBottomClass = "growShrinkActive"
}

Als Nächstes erstellen wir in unserem CSS eine Klasse mit dem Namen growShrink.

.growShrinkActive {
  
}

Der nächste Schritt besteht darin, eine Animation mit dem Namen growShrink zu definieren.

@keyframes growShrink {
  0% {
    Transformationsursprung: Zentrum;
    transform: scale (0);
  }
  50% {
    Transformationsursprung: Zentrum;
    transform: scale (1.3);
  }
  100% {
    Transformationsursprung: Zentrum;
    transform: scale (1);
  }
}

Hier verwenden wir transform: scale ([Skalierungsbetrag]), um den Vergrößerungs- und Verkleinerungseffekt zu handhaben.

Wir verwenden transform-origin: center, um anzugeben, dass es vom Mittelpunkt des Kreises aus wachsen und schrumpfen soll, wie Animationen, die wir replizieren möchten.

Fügen Sie die Animationsanweisung zu growShrinkActive hinzu, um sich ein Bild davon zu machen.

.growShrinkActive {
  Animation: growShrink 0.5s 1;
}

In dieser Animationsanweisung rufen wir growShrink auf, damit es 0,5 Sekunden dauert und nur einmal ausgeführt wird.

Wir können jetzt sehen, dass es wie erwartet funktioniert.

Woohoo! Baum links Kreis unten ist komplett!

Baum links Kreis oben

Indem Sie lernen, wie Sie mit Tree Left Base und Tree Left Circle Bottom umgehen, können Sie den Rest dieses Prozesses einfacher und schneller abschließen.

Tree Left Circle Top wird genauso behandelt wie Tree Left Circle Bottom.

Die einzige Änderung wird sein, dass es darauf wartet, dass Tree Left Circle Bottom beendet wird.

Zuerst fügen wir ein setTimeout hinzu, das eine Funktion namens toggleTreeLeftCircleTop aufruft.

toggleTreeLeftCircleBottom: function () {
   this.showTreeLeftCircleBottom = true
   this.treeLeftCircleBottomClass = "growShrinkActive"
   setTimeout (() => {
    this.toggleTreeLeftCircleTop ()
   }, 500)
}

Zweitens definieren wir die Funktion, die wir gerade aufgerufen haben, und fügen die Logik zum Umschalten des linken Baumkreises oben hinzu.

toggleTreeLeftCircleTop: function () {
  this.showTreeLeftCircleTop = true
}

Als Nächstes fügen wir die v-bind: -Klasse zum Shape-Tag in unserem HTML hinzu.

Jetzt müssen wir treeLeftCircleTop in unserer Vue-Instanz definieren und ihm eine Klasse für Tree Left Circle Top zuweisen.

Daten: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: ""
},

Schreiben wir wie zuvor die Logik in toggleTreeLeftCircleTop, um growShrinkActive zuzuweisen.

toggleTreeLeftCircleTop: function () {
  this.showTreeLeftCircleTop = true
  this.treeLeftCircleTopClass = "growShrinkActive"
}

Beachten Sie, dass wir growShrinkActive bereits für Tree Left Circle Bottom definiert haben. Wir machen das, weil es die gleiche Animation ist. Es wird nur zu einem anderen Zeitpunkt angewendet.

Woah! Wir sollten mit Tree Left Circle Top vervollständigen.

Baum rechts

Da wir Tree Left abgeschlossen haben, ist Tree Right nahezu identisch. Es wird nur ein bisschen einfacher sein, da wir nur einen Kreis haben. Aus diesem Grund werde ich das Tempo erhöhen und mich ein wenig weniger mit den Details befassen.

Baum rechte Basis

Beginnen wir damit, dass wir in den Noten nach unserem Timing für Tree Right Base suchen.

Direkt nachdem Tree Left Base vollständig gewachsen ist, erscheint Tree Right Base und beginnt zu wachsen.

Zunächst müssen wir das bedingte Rendern einrichten, da dieses Rendern erfolgen soll, wenn Tree Left Base vollständig wächst.

Wir müssen das Flag definieren, um dies in unseren Vue-Instanzdaten zu verarbeiten. Ich habe auch das Flag für Tree Right Circle hinzugefügt.

Daten: {
    // TreeLeft Zeug
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight Zeug
    showTreeRightBase: false,
    showTreeRightCircle: false
  },

Dann müssen wir unserem HTML-Code mitteilen, dass Vue.js das Rendern übernimmt.

Dazu fügen wir v-if = "[Flagname]" in die Shape-Tags "Tree Right Base" und "Tree Right Circle" ein.

Unser Tree Right wird nun länger gerendert, da die Flags auf false gesetzt wurden.

Perfekt. Als Nächstes müssen wir dafür sorgen, dass Tree Right Base angezeigt wird und dass die Animation angewendet wird, wenn sie angezeigt wird.

In unseren Notizen haben wir erwähnt, dass Tree Right Base entsteht, nachdem Tree Left Base gewachsen ist. Dies ist auch die gleiche Zeit, zu der der linke Baumkreis unten angezeigt wird. Daher können wir eine Funktion zum Umschalten der rechten Baumbasis in demselben setTimeout aufrufen, das die Funktion zum Umschalten der linken Baumkreisbasis aufruft.

    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "growActive"
      setTimeout (() => {
        this.toggleTreeLeftCircleBottom ()
        this.toggleTreeRightBase ()
      }, 500)
    },

Als Nächstes schreiben wir toggleTreeRightBase und die Logik zum Umschalten auf die rechte Baumbasis.

toggleTreeRightBase: function () {
  this.showTreeRightBase = true
}

Die Klasse growShrinkActive wird auf Tree Left Base angewendet, wenn sie erzeugt wird. Das Gleiche machen wir dann für Tree Right Base.

Lassen Sie uns zunächst unserem HTML-Code mitteilen, dass Vue.js die Klasse behandelt, die Tree Right Base zugewiesen ist.

Zweitens definieren wir treeRightBaseClass in den Daten unserer Vue-Instanz.

Daten: {
    // TreeLeft Zeug
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight Zeug
    showTreeRightBase: false,
    showTreeRightCircle: false,
    treeRightBaseClass: ""
  },

Dann müssen wir die Klasse growShrinkActive zuweisen, wenn Tree Right erzeugt wird.

  toggleTreeRightBase: function () {
    this.showTreeRightBase = true
    this.treeRightBaseClass = "growShrinkActive"
  }

Wir haben jetzt unsere Tree Right Base voll funktionsfähig.

Baum rechter Kreis

Wie unser linker Baumkreis unten brauchen wir dies, um direkt nach dem Wachsen der Basis zu erscheinen. Daher können wir in toggleTreeRightBase ein setTimeout hinzufügen, mit dem eine Funktion namens toggleTreeRightCircle aufgerufen wird, wenn Tree Right Base die Animation beendet.

    toggleTreeRightBase: function () {
      this.showTreeRightBase = true
      this.treeRightBaseClass = "growShrinkActive"
      setTimeout (() => {
         this.toggleTreeRightCircle ()
      }, 500)
    }

Als Nächstes können wir toggleTreeRightCircle definieren und die Logik zum Aktivieren von Tree Right Circle einschließen.

toggleTreeRightCircle: function () {
  this.showTreeRightCircle = true
}

Unser rechter Baumkreis erscheint jetzt pünktlich.

Abschließend müssen wir die Klassenbindung mit Vue.js in unserem HTML-Code aktivieren, die Daten definieren, die die aktive Klasse zuweisen, und dann growShrinkActive in derselben Funktion zuweisen, mit der Tree Right Circle umgeschaltet wird.

Um die Klassenbindung mit Vue.js in unserem HTML zu aktivieren, können wir Folgendes tun:

Als nächstes definieren wir diese Daten, um die aktive Klasse zuzuweisen.

Daten: {
    // TreeLeft Zeug
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight Zeug
    showTreeRightBase: false,
    showTreeRightCircle: false,
    treeRightBaseClass: "",
    treeRightCircleClass: ""
},

Zum Schluss können wir treeRightCircleClass in toggleTreeRightCircle auf growShrinkActive setzen.

    toggleTreeRightCircle: function () {
      this.showTreeRightCircle = true
      this.treeRightCircleClass = "growShrinkActive"
    }

Einfach so, Tree Right ist fertig!

Buchse

Die schwierigsten Teile, die Bäume, sind fertig. Inzwischen sollten wir den Prozess verstehen. Aus diesem Grund werde ich nur den Code für jeden Schritt mit einigen Beschreibungszeilen für den verbleibenden Busch und die Sonne bereitstellen.

Sehen wir uns die Notizen für Bush an.

Bush Circle Left wächst und schrumpft.
Bush Circle Right beginnt zu wachsen, wenn Bush Circle Left vollständig wächst und dann schrumpft.
//zeitliche Koordinierung
Wenn die Tree Right Base vollständig wächst, erscheint und wächst Bush Circle Left.

Buschkreis links

Schritt 1: Bedingtes Rendern hinzufügen (beinhaltet auch Bush Circle Right)

HTML

 <

JS

Daten: {
    // TreeLeft Zeug
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight Zeug
    showTreeRightBase: false,
    showTreeRightCircle: false,
    treeRightBaseClass: "",
    treeRightCircleClass: "",
    // Buschzeug
    showBushCircleLeft: "",
    showBushCircleRight: ""
},

Schritt 2: Rufen Sie toggleBushCircleLeft vom setTimeout in toggleTreeBaseLeft auf. Funktion mit Logik zum Umschalten hinzufügen.

toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "growActive"
      setTimeout (() => {
        this.toggleTreeLeftCircleBottom ()
        this.toggleTreeRightBase ()
        this.toggleBushCircleLeft ()
      }, 500)
    },
//später
toggleBushCircleLeft: function () {
  this.showBushCircleLeft = true
},

Schritt 3: Klassenbindung in HTML und JS hinzufügen. Weisen Sie in toggleBushCircleLeft die Klasse growShrinkActive zu.

HTML

JS

Daten: {
    // TreeLeft Zeug
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight Zeug
    showTreeRightBase: false,
    showTreeRightCircle: false,
    treeRightBaseClass: "",
    treeRightCircleClass: "",
    // Buschzeug
    showBushCircleLeft: "",
    showBushCircleRight: "",
    bushCircleLeftClass: ""
  },
// unter Methoden
 toggleBushCircleLeft: function () {
   this.showBushCircleLeft = true
   this.bushCircleLeftClass = "growShrinkActive"
},

Bush Left Circle sollte jetzt so arbeiten, wie wir es wollen!

Bush Circle rechts

Da Bush Circle Right genau die gleichen Schritte und die gleiche Logik aufweist, werde ich einfach alle Code-Updates bereitstellen.

HTML

JS

    // unter Daten
    // Buschzeug
    showBushCircleLeft: "",
    showBushCircleRight: "",
    bushCircleLeftClass: "",
    bushCircleRightClass: ""
    // Methoden
    toggleBushCircleLeft: function () {
      this.showBushCircleLeft = true
      this.bushCircleLeftClass = "growShrinkActive"
      // Warte 0,25 Sekunden, da Bush Circle Right erscheinen soll, wenn Bush Circle Left wächst
     setTimeout (() => {
        this.toggleBushCircleRight ()
      }, 250)
    },
    toggleBushCircleRight: function () {
      this.showBushCircleRight = true
      this.bushCircleRightClass = "growShrinkActive"
    },

Einfach so, Bush ist fertig, nur noch die Sonne ist übrig! Schließlich!

Sonne

Sonne ist die einfachste Animation. Anstatt jede bestimmte Form bedingt rendern und animieren zu müssen, können wir sie einfach auf die gesamte Grafik anwenden, da sie keine unterschiedlichen Animationen und Timings für ihre Formen hat.

Die Sonne wächst und schrumpft.
//zeitliche Koordinierung
Die Sonne erscheint und beginnt zu wachsen, wenn Tree Right vollständig ist.

Schritt 1: Fügen Sie das bedingte Rendern hinzu

HTML

JS

// unter Daten
// Sonne Zeug
showSun: false

Schritt 2: Erstellen Sie eine Funktion zum Umschalten auf Sun. Dies sollte in einem neuen setTimeout unter toggleTreeRightCircle aufgerufen werden, da Sun angezeigt werden muss, wenn der rechte Baumkreis wächst.

   toggleTreeRightCircle: function () {
      this.showTreeRightCircle = true
      this.treeRightCircleClass = "growShrinkActive"
      setTimeout (() => {
        this.toggleSun ()
      }, 250)
      // Wir warten 250 Sekunden, da dies der Punkt ist, an dem der rechte Baumkreis wächst und nicht, an dem er endet
    },
   //später
   toggleSun: function () {
    this.showSun = true
   }

Schritt 3: Fügen Sie die Klassenbindung hinzu und weisen Sie die Klasse growShrinkActive zu, nachdem Sun aktiviert wurde. Ich werde auch bemerken, dass die Klassenbindung hier etwas anders sein wird. Da wir dies auf die gesamte Sonne anwenden, gibt es im SVG-Tag bereits eine Sonnenklasse. Dies wird entfernt und standardmäßig ist Sonne die zugewiesene Klasse. Da wir in CSS mehrere Klassen haben können, werden uns die Klassen sun und growShrinkActive direkt nach dem Erscheinen von Sun zugewiesen.

HTML

JS

//Daten
// Sonne Zeug
showSun: false,
sunClass: "Sonne"
// Methoden
toggleSun: function () {
  this.showSun = true
  this.sunClass = "sun growShrinkActive"
}

Kühle Bohnen! Wir haben die Animation abgeschlossen!

Letzte Demo / Code: http://codepen.io/mikemang/pen/JWNOrr/

Abschließende Gedanken

Nach 15 Stunden, in denen Sie diesen Beitrag geschrieben haben, ist mir klar, dass dies keine perfekte Replik ist und viel zu sehen ist. Hoffentlich gab es noch ein paar hilfreiche Teile, die Sie aus dem Lesen herausgezogen haben.

Wenn Sie mehr Übung mit Animationen suchen, empfehle ich Ihnen, genau das zu tun, was wir in diesem Beitrag getan haben. Teilen Sie die Animation auf und vervollständigen Sie sie Stück für Stück. Ich kann nur empfehlen, mit einem einfacheren Beispiel zu beginnen und Fortschritte zu erzielen.

Wenn Sie nach echten, praktischen Animationen suchen, die sich auflösen und replizieren lassen, würde ich Product Hunt empfehlen. Product Hunt enthält unzählige Links zu Landing Pages, die auf jeden Fall modern sind und zumindest einige Animationen verwenden.

Wenn Sie nach etwas strukturierterem suchen, können Sie den Zugang zu meinem bevorstehenden SVG-Kurs buchen, der alles von den SVG-Grundlagen über die Erstellung detaillierter Vektorgrafiken mit Affinity Designer bis hin zur Animation von SVGs mit externen Bibliotheken und praktischen Anwendungen wie dem Erstellen abdeckt eine Symbolbibliothek, die eine animierte Landingpage und UX-Animationen erstellt.

Jedes Feedback ist willkommen und wird geschätzt.

Prost,
Mike Mangialardi
Gründer von Coding Artist