Kreatives Programmieren: SVG-Animation mit einfachem CSS-Code

1. Willkommen! Einführung in den Kurs: Wollten Sie schon einmal Ihre Designs lebendig machen oder vielleicht haben Sie von kreativem Programmieren gehört, hatten aber keine Chance, tiefer zu graben. Hi. Mein Name ist Agan. Ich liebe es, Ihnen etwas sehr Spannendes zu zeigen. Animieren von SVG mit einem einfachen CSS. Ich kann es kaum erwarten, Ihnen die Magie zu zeigen, die von kombinierten SVG und CSS kommt. CSS ist eine Codierungssprache. Sie können Websites damit stylen. Sie können die Animationen machen. Während SVG ein Vektorgrafikformat ist. Wenn Sie keine Erfahrung im Codieren haben, machen Sie sich keine Sorgen, ich versuche alles Schritt für Schritt zu erklären, damit Sie den Klassen folgen können. 2. Kursziele: Das Ziel des Kurses ist es, allen Interessierten in Grafik-Design-Codierung zu zeigen, dass SVG und CSS zusammen großartige Werkzeuge sind, um lustige animierte Elemente im Web zu machen. Sie müssen nicht erfahrener Entwickler oder Designer sein , um es zu nutzen und den größten Vorteil zu nutzen. Das Endergebnis des Kurses wird animierte Grafiken sein, die von Ihnen selbst kodiert werden. Der Code ist für Leute bestimmt, die Codierung mögen, Designer, die gerne animieren möchten, Vektorprojekte mit dem Code machen, alle, die Dinge auf dem Computer und im Web erstellen möchten. 3. Werkzeuge: Für diese Klassen werden wir ein paar Werkzeuge verwenden. Erster, Ihr Lieblings-Browser und seine Entwicklungstools. Entwicklungstools sind Teil jedes Webbrowsers und helfen Ihnen, Ihren Code zu debuggen. Ich zeige dir später, wann du sie findest. Zweites Werkzeug, ist ein Code-Editor. Wenn Sie noch keine von ihnen verwendet haben, würde ich Atom oder Sublime Text empfehlen. Momentan benutze ich Atom. Es ist kostenloser Editor, den Sie von atom.io herunterladen können und ist für alle Systeme verfügbar. Das letzte, was wir brauchen, ist SVG-Datei. Sie finden die SVG-Dateien in dem Paket, das ich mit Ihnen teile. 4. Materialien: Denken Sie daran, das Paket mit allen Materialien wie HTML-Dateien, den Lösungen für meine Herausforderungen und SVG-Dateien herunterzuladen. Wir befinden uns unter Ihrem Projektbereich und auf der rechten Seite können Sie angehängte Dateien sehen. Bitte laden Sie dieses Paket herunter. Das Paket besteht aus mehreren Ordnern. Sie haben HTML-Vorlage, die im Grunde eine einfache HTML-Vorlage ist, in der Sie Ihren SVG-Code einfügen können. Sie können auch SVG-Dateien sehen, so dass verschiedene SVG-Grafiken, die ich speziell für Sie vorbereitet habe. Sie können einige Dinge da draußen animieren. Wir haben Geld, Auge und ein paar andere Dinge. Sie haben auch Augen-Übung und die Übung , die ich in dem Video erklären, einschließlich Happy-Face, Sie haben die Lösung für die Augen-Übung und Sie können überprüfen Sie andere lustige SVG-Animationen für Inspirationen. 5. SVG Einführung: Bevor wir anfingen, im Code zu arbeiten, lasst uns mehr über SVG erfahren. SVG steht für skalierbare Vektorgrafiken. Es ist ein XML-basiertes Vektorbildformat. Heute wird SVG für alles verwendet. Von Logos, Icons, Ikonographien bis hin zu animierten Inhalten. SVG kann durch CSS gesteuert werden; was wir in unseren Klassen nutzen werden. Wie bereits erwähnt ist SVG Vektorgrafiken. Es bedeutet, dass es knackig und schön ist, egal was die Auflösungen sind. Sie können die Höhe und Breite ändern, und es hat keine Auswirkungen auf die Qualität. Zusammenfassend sind die wichtigsten SVG-Funktionen; SVG ist skalierbar, es skaliert nach oben und unten, ohne Qualität zu verlieren, SVG ist Vektorgrafik, SVG ist kristallklar, SVG wird durch CSS gesteuert, was uns leicht macht , um Spaß zu haben und einige einfache, aber auffällige Effekte zu implementieren. 6. Einführung in CSS (nur für Anfänger): Diese Lektion des Kurses konzentriert sich auf Personen, die noch nicht die Erfahrung im CSS hatten. Wenn Sie bereits mit dem Styling der Elemente auf der Website vertraut sind, können Sie diesen Teil der Klassen überspringen. Also, fangen wir mit der Frage an, was ist CSS? CSS ist Cascading Style Sheets. Ist eine Stylesheet-Sprache für das Styling der Elemente auf Ihrer Website verwendet, die dank HTML platziert werden. CSS beschreibt, wie Elemente platziert werden sollen, wie sie aussehen sollen, et cetera. Wir können auch die Elemente animieren, worauf wir uns während dieser Klassen konzentrieren werden. Also, was ist mit CSS-Syntax? Auf der rechten Seite haben Sie die CSS-Datei. Ein CSS-Regelsatz besteht aus einem Selektor und einem Deklarationsblock. Der Selektor, tatsächlich wählt den Inhalt, den Sie Stil möchten, es Kiefer an das HTML-Element. Also, in diesem Fall wollen wir P stylen, das für Absätze steht und in unserem HTML, es ist auf der linken Seite. Sie können sehen, dass wir Absätze haben. P hier, und P als Selektor in Stilen Blatt. Der Deklarationsblock besteht aus einer oder mehreren Deklarationen, und sie sind durch Semikolons getrennt. Bitte erinnern Sie sich an sie. Jede Deklaration besteht aus Eigentum und seinem Wert. So sind zum Beispiel Schriftgröße, Farbe, Margin-top und Text-align Eigenschaften, und sie haben ihren Wert definiert. Es gibt verschiedene Arten von Selektoren. erste ist der Element-Selektor, der Element basierend auf dem Elementnamen in HTML auswählt . Es ist das, was ich bereits erwähnt habe. Hier haben wir die Elemente Selektor P, und es wählt alle P, alle Absätze in HTML-Dokument. Also, in unserem Fall alle Absätze haben Schriftgröße 15 Pixel, Farbe rosa, Rand oben 30 Prozent, und sie werden in der Mitte ausgerichtet werden.Sie können sehen, dass die Absätze sind rosa, und zentriert ausrichten. Ein weiterer Selektor ist der Klassenselektor , den wir sehr oft in unserem Kurs verwenden werden. Also, bitte bleiben Sie konzentriert. Der Klassenselektor, innerhalb hier, wählt Elemente des spezifischen Klassenattributs. Um Elemente mit einer bestimmten Klasse auszuwählen, müssen Sie einen Punkt und den Namen der Klasse schreiben . In HTML-Dokument müssen Sie Attributklasse und Name hinzufügen, fügen Sie es für die Klasse in CSS hinzu, also markieren Sie es. Der Absatz mit dem hervorgehobenen Klassencode hat nun einen hellgrauen Hintergrund. Wir können es in eine andere Farbe ändern. Der letzte Sektor ist der ID-Selektor, in dem hier. Die ID eines Elements sollte innerhalb einer Seite eindeutig sein. Also, der ID-Selektor verwendet, um ein eindeutiges Element auf der gesamten Website auszuwählen. Um ein Element der spezifischen ID auszuwählen, schreiben wir einen Hash und dann den Namen der ID. Also, hier, wenn wir die Überschrift haben wollen, mit einer größeren Schriftgröße, können wir ID-Attribute hinzufügen, und den Namen dieser ID. Also, wir haben das Intro. Wenn wir die Seite aktualisieren, können wir sehen, dass Überschrift ID Intro hat. Dank dieser hat unser Text Schriftgröße 20 Pixel. Für die schnelle Revision haben wir also drei verschiedene Sektoren in CSS erwähnt; Elementselektor, Klassenselektor und ID-Selektor. In diesem Kurs werden wir den Klassenselektor sehr oft verwenden. Denken Sie daran, dass Punkt steht für Klasse und nach Punkt müssen wir den Namen der Klasse in CSS-Datei definieren. In HTML müssen wir dem gegebenen Element, dem Klassenattribut und dem Namen der Klasse hinzufügen . Natürlich können wir Klassen zu mehreren Elementen hinzufügen. 7. SVG-Code: Werfen wir einen Blick in SVG-Code. Wir können jede SVG-Datei im Code-Editor öffnen, und wir können sehen, was da draußen ist. Ich benutze Atom, und wie Sie sehen können, haben wir einen SV-Code. Wie bereits erwähnt, hat SVG XML basiertes Vectra Graphic Format. Es ist ähnlich wie HTML. Wenn Sie mit der Syntax vertraut sind, können Sie deren Ähnlichkeiten sehen. Wir haben verschiedene Elemente wie Kreis und Pfad, und sie beschreiben unsere Form. Also, lassen Sie uns SVG im Webbrowser öffnen und sehen, wie es gerendert wird. Wenn wir Dev-Tools öffnen, können Sie jedes Element von SVG überprüfen. Warum ist es so cool? Der größte Vorteil davon ist, dass wir Stile anwenden und ändern können, wir können einige Elemente animieren oder ausblenden, gibt uns unzählige Möglichkeiten, besonders wenn wir SVG-Code mit einfachen CSS-Animationen kombinieren. Wie macht man es? Schauen wir uns die nächste Lektion an. 8. SVG in ein HTML-Dokument einbetten: Eigentlich gibt es mehrere Möglichkeiten, SVG in HTML-Datei einzubetten. Wird eine, die es uns ermöglicht, CSS-Animation sehr einfach zu verwenden. Wir haben Index, und wir haben emptystyles.css. Um Stylesheet an unser HTML-Dokument anzuhängen, müssen wir Link-Tag hinzufügen. Wie Sie sehen können, verweisen wir auf das Verzeichnis, in dem sich unsere Stile befinden. Unsere Stile sind im CSS-Ordner. Deshalb haben wir diesen Weg. Natürlich müssen wir sie retten. Wenn wir die Seite aktualisieren, passiert nichts, weil HTML-Dokument leer ist. Kopieren wir den gesamten Inhalt und fügen Sie ihn zwischen Textkörper ein. Wir können die ersten beiden Zeilen entfernen, weil sie nicht notwendig sind. Lassen Sie uns die Seite aktualisieren. Wie Sie sehen können, ist unsere SVG-Datei in das Dokument eingebettet. Wenn Sie die Größe davon ändern möchten, können Sie die Klasse hinzufügen, wir können ID entfernen, und anstatt auf Klasse zum Beispiel, kopieren Sie einfügen. Jetzt sind wir in der Lage, neue Klasse zu unserem CSS Stylesheet hinzuzufügen. Denken Sie daran, wie wir diese Art von Selektor konstruieren sollten. Nun, der Unterricht beginnt immer mit einem Punkt, dann mit dem Namen „Happy Face“. Wie Sie sehen können Editor codiert, dass Ihre bereits gibt uns einige Hinweise in Bezug auf den Link. Ok. Also, lassen Sie uns die Höhe definieren. Zum Beispiel wollen wir es als 500 Pixel haben. Lassen Sie uns die Seite aktualisieren. Wie Sie sehen können, hat sich die Größe der SVG-Datei geändert. 9. CSS-Animationen: Konzentrieren wir uns jetzt auf CSS Animation. Obwohl es ein ziemlich komplexes Thema ist, werden wir nur einen Teil davon verwenden. Wenn Sie mehr erfahren möchten, gibt es viele verschiedene Kurse und Kurse. Ich werde Ihnen die nützlichsten Dinge in Bezug auf CSS-Animationen zeigen. Also definieren wir CSS Animation in unserer styles.css Datei in diesem Stylesheet. So erstellen wir CSS-Animation mit Schlüsselwort, das Keyframes ist. Auf die Keyframes folgt der einfache Name. Zum Beispiel fügen wir Bounce hinzu. Jede Animation besteht aus Haltepunkten. Es bedeutet, dass wir den Fortschritt der Animation durch Prozentsätze definieren. Wir haben Null, wir haben zum Beispiel die halb alte Animation, und was da draußen passiert, und den letzten Punkt. Natürlich können Sie verschiedene Zahlen definieren, je nachdem, was Sie erreichen möchten. Da es sich um eine Bounce-Animation handelt, möchten wir, dass unser glückliches Gesicht springt. Es zu hüpfen bewegt sich nach oben und unten. Also lasst uns etwas über Transformation lernen. Transform ist eine CSS-Eigenschaft, und wie Sie sehen können, wie Atom uns einen Hinweis gibt, gibt es verschiedene Optionen, die Sie für Ihre Grafiken implementieren können, wie drehen, wie Maßstab. Sie können auch Translate in verschiedenen Achsen verwenden. Wir haben X, Y und Z. Wenn Sie etwas nach rechts und links bewegen möchten, verwenden wir translate X. Wenn Sie etwas nach oben und unten springen möchten, würden wir übersetzen Y verwenden. Nehmen wir an, wir möchten , um unser glückliches Gesicht um 50 Pixel aufprallen zu lassen. Wir können jetzt leere Haltepunkte loswerden. Die Animation wird erstellt, also lassen Sie uns einen Blick in unseren Index HTML werfen. Wir haben unsere SVG-Datei, die hier ist, und wir haben Klasse glücklich Gesicht. Wir möchten zu dieser Klasse die Animation hinzufügen. Also, lasst uns wieder zu den Stilen zurückkehren. Also haben wir unsere Animation bereits erstellt, aber sie ist noch nicht ausgeführt, nichts passiert, lasst uns überprüfen. Das fröhliche Gesicht, es bewegt sich nicht. Wir müssen die Animation zu unserem Selektor hinzufügen. Wie bereits erwähnt, haben wir die Klasse erstellt. Denken Sie daran, dass die Klasse mit einem Punkt in einer CSS-Datei beginnt. Hier haben wir unseren Namen. Also, wie wir die Animation ausführen? Wir müssen die CSS-Eigenschaft hinzufügen, die Animationsname ist. Unser Animationsname ist Bounce. Später müssen wir die Dauer der Animation definieren. Lassen Sie uns eine Sekunde haben. Natürlich können Sie andere Timings wie fünf halbe Sekunde erstellen , die für 500 Millisekunden stehen würden, aber unsere Animation wird eine zweite Dauer haben. Die letzte wichtige Sache ist die Anzahl der Animationsiterationen. So, wie oft die Animation wiederholt wird. Für uns würden wir es gerne unendlich haben. Unser Gesicht prallt, und lassen Sie uns es mit Entwicklerwerkzeugen überprüfen. Also, das ist unser Element, das glückliches Gesicht hat, und dieses Element hat Animation zu finden. Wenn wir es deaktivieren, wird die Animation ausgeführt. Es bedeutet, dass diese Codezeile kommentiert wird. Also, Web-Browser, der es lesen wird. Natürlich können wir komplexere Animationen erstellen. Lassen Sie uns einen weiteren Bruchpunkt erstellen. Wir können auch transformieren, und wir können das Element skalieren. Einer steht für 100 Prozent. Also, das Element bleibt das gleiche. Wenn wir es um 50 Prozent groß haben wollen, müssen wir fünf hinzufügen. Es bedeutet 150 Prozent. Wir können das Element auch um 10 Grad drehen. Denken Sie daran, dass wir die Drehung um Grad definiert haben. Ok. Lasst uns retten. Denken Sie daran, zu speichern, und lassen Sie uns unseren Index HTML aktualisieren. Wow! Diese Animation ist überwältigend, aber Sie können damit experimentieren. 10. Ausgewählte Teile von SVG-Grafiken animieren: In der vorherigen Lektion haben wir das gesamte SVG-Element animiert. Wie Sie sehen können, wird die Klasse dem SVG-Tag hinzugefügt. Also, das ganze glückliche Gesicht hüpfte. Was ist mit dem Animieren eines bestimmten Teils? Schauen wir uns mal an. Die Endergebnisse, die wir erreichen möchten, sind die Teile des Auges, die sich bewegen. Wie Sie sehen können, ist der weiße Teil stabil und nur die Mitte des Auges bewegt sich. Also, fangen wir mit dem Anfang an. In dem Paket, das ich mit Ihnen teilen, gibt es Augenübungsordner. Sie können es auf Atom fallen lassen, und es wird sich öffnen. Wir haben Index und Stile CSS. Im Index gibt es, wie Sie bereits sehen, SVG-Code. Also, das Auge sollte erzeugt werden. Lass es uns öffnen. Das Auge ist stabil, es bewegt sich nicht. Also, wir müssen CSS-Animation in diesem Stylesheet hinzufügen. Unser Stylesheet hat bereits einige grundlegende Stile, die rosa Farbe in unserem Hintergrund, und setzen Sie die Größe für das Auge. So können Sie Ihre Stile unter Zeile 20 hinzufügen. Ok. Wir möchten, dass dieser Teil in Bewegung ist. Also lasst uns Inspect benutzen. Wie Sie sehen können, steht dieses g für Gruppe. Dies ist ein Gruppenelement. Es hat bereits seine ID, aber vielleicht können wir Klasse hinzufügen. Lassen Sie uns es im HTML finden. Das ist diese Gruppe. Ich kommentiere : „Das ist der Teil, der animiert werden wird.“ Wir können „Centre“ hinzufügen, um die Klasse „Augenmitte“ hinzuzufügen, und wir sollten diese Klasse CSS hinzufügen. Aber was jetzt tun müsste, ist, die Animation zu unterscheiden. Wenn Sie sich erinnern, bewegte sich das Auge ein wenig nach links, ein wenig nach rechts, in den Boden, und es wurde größer. Also, lassen Sie uns diese Art von Bewegung versuchen. Lassen Sie uns Animation erstellen, denken Sie daran, dass es mit Keyframes beginnt, MoveEye. Denken Sie daran, dass, wenn Sie mehr als ein Wort haben möchten, das beste Spiel ist Kamel Fall zu verwenden. Ok. Also, sagen wir, 20 Prozent würden gerne übersetzen, in der x-Achse nach links, also minus 50 Pixel, und um 40 Prozent würden gerne sinken. So transformieren. TranslateY minus 30 Pixel. Ich vermute nur die Zahlen für den Moment, es wird es bald überprüfen. Ich möchte es auch skalieren, sagen wir mal um 20 Prozent. Wir sparen und erfrischen uns. Wie Sie sehen können, passiert nichts. Der Grund dafür ist, dass wir die Animationen ausführen sollten. Also sollten wir das zu unserem Augenzentrum hinzufügen. Animationsname, MoveEye, Animationsdauer eine Sekunde und Animationsiterationszählung unendlich. Speichern und aktualisieren Sie die Seite. Wie Sie sehen können, ist die Animation zu schnell, und auch die Anzahl der Pixel sollte geändert werden. Vielleicht können wir das auf 20 Prozent und auf 10 ändern und die Animationsdauer auf drei Sekunden ändern. Das ist jetzt viel besser. Wir können das auch ein wenig abstimmen. Die Skala wäre also 15 Prozent, und die Dauer wird vier Sekunden betragen, ich werde auch diesen Haltepunkt auf 60 Prozent ändern. Mal sehen. Wir kommen näher. Es ist ziemlich ähnlich, oder? Wir können diesen Kreis auch verschwinden lassen. Lass es uns rausfinden. Nun, während es sich bewegt, ist es ziemlich schwierig, es zu bekommen, also lasst uns die Animation für eine Sekunde kommentieren. Finden wir, wir haben es, fast da. Dieser Kreis definiert also diesen weißen Kreis im Auge, diesen. Wir können auch die 'Plus andere“ bekommen HTML Index hinzufügen, und Klasse hinzufügen. Hier ist bereits die Klasse STO. Oder wir können eine weitere nach dem Leerzeichen hinzufügen. Nehmen wir an, Sie können eine Lösung für diese Herausforderung im Paket finden, Augenergebnisse. 11. Codepen – ein nützliches Tool: Was ich erwähnen möchte, ist die Codepen-Plattform. Wenn Sie nicht gerne mit Code Editor an HTML-Dateien arbeiten, können Sie Codepen verwenden. Es ist eine Plattform, auf der Leute kurze Snippets erstellen. Schauen wir uns einfach mal an. Wir klicken auf neuen Stift und wir haben HTML-Fenster, CSS und JS. Also, lasst uns an dem Beispiel arbeiten. Sie können ausgewählte SVG-Datei nehmen und sie in Atom öffnen. Wir kopieren den gesamten SVG-Code und fügen ihn in HTML ein. Wie Sie sehen können, wird die SVG generiert. Wir können die Klasse, Art des Gesichts hinzufügen. Sie erstellen eine Klasse im CSS-Fenster. Wie Sie sehen können, wird alles aufgefrischt. Es ist also sehr einfach zu bearbeiten. Natürlich können wir hier Animationen erstellen. Wenn Sie den Haltepunkt setzen, würde sich die Deckkraft auf Null ändern, und natürlich müssen wir die Animation anwenden, und die Animation funktioniert. Sie können den Code speichern, indem Sie auf Speichern klicken, und Sie haben die URL, die Sie für mich im Klassenprojekt freigeben können. Ich wünsche Ihnen alles Gute und halte die Daumen für Ihre Projekte. Lassen Sie mich wissen, wie Sie mit SVG- und CSS-Animationen arbeiten. Viel Glück! 12. Kursprojekte: Für das Klassenprojekt wird jeder aufgefordert, eine Vektorgrafik im SVG-Format auszuwählen und eine eigene Animation zu erstellen. Die SVG-Dateien sind im Paket verfügbar. Designer sind auch herzlich eingeladen, ihr eigenes SVG-Kunstwerk zu verwenden. Laden Sie die Kursdateien auf der Registerkarte „Ihr Projekt“ herunter. Es ist auf der rechten Seite platziert. Wenden Sie Ihre eigene CSS-Animation auf die ausgewählte SVG-Datei an. Sie entscheiden, was animiert werden soll. Zeigen Sie uns Ihre Arbeit, indem Sie Code-Snippets, Screenshot oder Videos teilen , oder Sie können einen Link zu dem Codepen senden, den Sie erstellt haben. Zögern Sie nicht, Fragen im Community-Bereich zu stellen. Goodluck. Mögen CSS-Animationen und SVG bei Ihnen sein.