Share
Heute führen wir Sie durch die Grundlagen der Verwendung animateTransform Inline-Animationen mit SVG (skalierbare Vektorgrafiken) erstellen.
Wenn Sie SVG-brandneu sind, empfehle ich zunächst SVG (Erste Schritte mit skalierbaren Vektorgrafiken), um Sie auf den neuesten Stand zu bringen.
Mit den Techniken, die Sie lernen werden, können Sie anspruchsvolle Symbol- und Bildanimationen ohne eine einzige GIF-, JPEG- oder PNG-Datei, ohne JavaScript und ohne das geringste Flüstern von Flash erstellen.
Die von Ihnen erstellten Animationen können später leicht bearbeitet werden, da sie reinen Code darstellen. Die Ergebnisse belegen nur einige KB an Bandbreite, wenn Sie sie anzeigen.
Um SVG-Shapes zu animieren, müssen Sie sie zuerst erstellen. Die einfachste Methode zum Erstellen von SVGs ist die Verwendung von Sketch aus Bohemian Coding. Wenn Sie Sketch nicht besitzen, können Sie eine kostenlose 30-Tage-Testversion für dieses Tutorial erwerben.
Wir bearbeiten den SVG-Code. Nachdem Sie eine Form in Sketch gezeichnet haben, erstellen Sie einen Schnitt darum und exportieren Sie diesen Schnitt als SVG-Datei.
Sie können dann Ihre exportierte Datei in einem Code-Editor (wie Sublime Text) öffnen und den SVG-Code von innen kopieren. Sie benötigen lediglich den Code von der Eröffnung tag zum abschluss Etikett.
Zum Beispiel generiert Sketch den folgenden SVG-Code für das oben abgebildete blaue Rechteck:
Um die visuelle Arbeit mit dem Code zu erleichtern, nehmen wir einige Änderungen am Code vor.
Stellen Sie das ein svg Element ist Breite und Höhe zu 100% und löschen Sie das viewBox Rahmen. Löschen Sie auch das Generator Kommentar und die Titel, desc, defs und G Elemente.
Sie sollten mit so etwas enden:
Fügen Sie diesen Code in ein HTML-Dokument ein. Wenn Sie ihn im Browser anzeigen, sollten Sie dasselbe blaue Rechteck auf Ihrer Seite sehen wie in Sketch:
Hinweis: Das obige Bild enthält eine X- und Y-Achse im Hintergrund, damit Sie diese verstehen können, um Ihre Animationen erstellen zu können. Sie werden in Kürze erfahren, warum.
Die kurze Antwort lautet: die animateTransform Das Element generiert Animationen durch Festlegen von Transformationseigenschaften für die SVG-Form, auf die es angewendet wird.
Angesichts dessen ist die logische nächste Frage:
Hinzufügen verwandeln Mit den Einstellungen für eine Form können Sie die Darstellung der Form im 2D-Raum ändern. Es gibt fünf verschiedene Arten von Transformationen, die Sie ausführen können:
Accentsconagua
ÜbersetzenRahmendrehenskewXschiefDas animateTransform Mit Attribut können Sie zwischen verschiedenen Transformationszuständen animieren. Bevor Sie mit der Animation beginnen, ist es wichtig zu verstehen, wie Transformationen tatsächlich funktionieren.
Da Transformationen im 2D-Raum arbeiten, beziehen sich alle ihre Einstellungen auf X- und Y-Koordinaten, die auf einer X / Y-Achse aufgetragen sind, wie Sie zuvor hinter unserem blauen Rechteck gesehen haben.
X Achse ist die horizontale Linie im 2D - Raum und die Y Achse ist die vertikale Linie. Standardmäßig beginnt jede Form an einer Position von 0 auf beiden X und Y Achse.0 Position auf der X Achse, positive Werte entsprechen der Bewegung nach rechts und negative Werte entsprechen der Bewegung nach links.0 Position auf der Y Achse entsprechen positive Werte der Abwärtsbewegung und negative Werte der Aufwärtsbewegung. Wenn dies nicht völlig sinnvoll ist, machen Sie sich keine Sorgen, denn es wird viel klarer, wenn Sie die Beispiele für jede Art von Transformation unten sehen.
Machen Sie sich auch keine Sorgen über den Code für diese Transformationen, da wir dies beim Erstellen von Animationen behandeln werden. Zu Beginn möchte ich nur, dass Sie sich mit den fünf Transformationstypen vertraut machen.
Dies verschiebt die Position der Form auf der X-Achse (horizontal) und der Y-Achse (vertikal)..
Hier ist zum Beispiel unser blaues Rechteck mit Übersetzen Werte von 150 auf der X (horizontale) Achse und 20 auf der Y (vertikale Achse:
Erinnern Sie sich an den obigen Abschnitt über die positiven Werte auf der X Achse entspricht der Bewegung nach rechts und positive Werte auf der Y Achse korrespondieren mit Abwärtsbewegung.
Durch die Einstellung der Übersetzen Wert für X zu positiv 150, Unser Rechteck ist um 150 Pixel nach rechts verschoben. Wert für einstellen Y zu positiv 20 hat unser Rechteck um 20 Pixel nach unten verschoben.
Dadurch wird die Gesamtgröße der Form auf der X-Achse (Breite) und der Y-Achse (Höhe) multipliziert..
Skaleneinstellungen fungieren als Multiplikator der Originalgröße der Form. Zum Beispiel, wenn wir das einstellen X skalieren bis 3 es würde die Form dreimal breiter machen. Wenn wir das einstellen Y skalieren bis 1,25 es würde die Form um ein Viertel höher machen, wie es so wäre:
Auch übersetzt (150, 20)Dadurch wird die Form schrittweise um einen bestimmten Punkt gedreht.
Bei der Drehung wird die Gradzahl festgelegt, um die die Form gedreht werden soll. Hier ist zum Beispiel unser Rechteck um 45 Grad gedreht:
Auch übersetzt (150, 20)Standardmäßig wird die Form um die obere linke Ecke gedreht. Sie können sie jedoch auch um einen anderen Punkt drehen lassen. Wie das später gemacht wird, erfahren Sie im Tutorial.
Dadurch wird die Form entlang der X-Achse (horizontal) verschoben.
Die Neigung entlang der X-Achse funktioniert auch in Grad. In dem Bild darunter ist beispielsweise unser Rechteck entlang der X-Achse um 20 Grad geneigt:
Auch übersetzt (150, 20)Dies verzerrt die Form entlang der Y-Achse (vertikal) in Grad.
SkewY funktioniert genauso wie SkewX, Nur die Transformation geschieht vertikal entlang der Y-Achse wie folgt:
Auch übersetzt (150, 20)Nachdem Sie nun wissen, was Transformationen tatsächlich tun, können Sie Animationen zwischen verschiedenen Transformationszuständen erstellen. Der grundlegende Prozess besteht aus drei Schritten:
von Zustand.zu Zustand.von und das zuZustand.Dies lässt sich am besten anhand eines praktischen Beispiels verstehen. Beginnen wir also mit der Animation von a Übersetzen Transformation.
Sie erinnern sich, dass wir früher mit unserem blauen Rechteck an der Standardposition von begonnen haben 0 0, d.h.. 0 auf der X Achse und 0 auf der Y Achse. Wir werden diese Position als unsere festlegen von Zustand.
Wir haben uns dann ein Beispiel für dasselbe blaue Rechteck mit Übersetzungseinstellungen von angesehen 150 20 angewendet, d.h.. 150 auf der X Achse und 20 auf der Y Achse. Wir werden diese Position als unsere festlegen zu Zustand.
Verwenden animateTransform Wir können das Rechteck sanft zwischen unsere verschieben von und unser zu Zustände über einen Zeitraum von zwei Sekunden.
Ihre SVG-Form, in diesem Fall ein Rechteck, muss sowohl öffnende als auch schließende Tags haben, z.
Das animateTransform Das Attribut sollte wie folgt zwischen diesen Tags platziert werden:
Schauen Sie sich die Eigenschaften an, die in festgelegt wurden animateTransform Etikett. Diese steuern, wie Ihre Animation abläuft.
Wir haben eingestellt Art zu übersetzen, was bedeutet, dass wir eine Anwendung anwenden werden Übersetzen Transformationstyp. Wie geplant haben wir unser festgelegt 0 0 Position in der von Staat und unsere 150 20 Position in der zu Zustand.
Der Wert für Start ist eingestellt auf 0s, Das bedeutet, dass die Animation null Sekunden nach dem Laden beginnt, und dur ist eingestellt auf 2s, Das bedeutet, dass die Animation zwei Sekunden lang läuft. Schließlich haben wir aufgenommen repeatCount einstellen unbegrenzt Das bedeutet, die Animation wird in einer Schleife abgespielt.
Dies gibt uns die folgende Animation:
Der Prozess ist für die Rotation aller vier anderen Transformationstypen genau gleich. Nach dem Einstellen der Art Geben Sie Werte für Ihre gewünschte Transformation an von und zu Transformationszustände.
Zum Beispiel können wir Folgendes verwenden animateTransform Einstellungen zum Skalieren unseres Rechtecks auf die Größe, die Sie im vorherigen Abschnitt zur Skalentransformation gesehen haben:
Da die Skalierungstransformationseinstellungen die ursprüngliche Größe der Form multiplizieren, beginnen wir mit einem Wert von 1 1 auf der von Rahmen. Dadurch wird die Originalgröße auf eine Multiplikation von 1 gesetzt.
Unsere zu Einstellung von 3 1,25 animiert unsere Skalentransformation um das Dreifache der ursprünglichen Breite auf der X-Achse und ein Viertel der ursprünglichen Höhe auf der Y-Achse.
Hinweis: Sie werden feststellen, dass Ihre tatsächlichen In-Browser-Animationen viel ruhiger laufen als die GIF für die Bildschirmaufnahme, die Sie oben sehen.
Wir können auch die beiden bisher erstellten Animationen kombinieren, um gleichzeitig zu übersetzen und zu skalieren. Sie können nur eine einzige verwenden animateTransform tag in dein Rect Um mehrere Animationen zu verwenden, müssen Sie eine Reihe von G Tags, die eine Gruppe von SVG-Objekten darstellen.
Damit dies funktioniert, fügen Sie das Öffnen und Schließen hinzu Rect Stichworte:
Fügen Sie dann Ihre zweite Animation außerhalb des Abschlusses hinzu Tag, aber Vor Die Schließung Etikett. In diesem Fall werden wir unsere Übersetzungstransformation wieder einführen:
Wir haben jetzt sowohl Skalierungen als auch Übersetzungen, die gleichzeitig animiert werden:
Sie können verwenden animateTransform einmal pro Form oder Gruppe. Wenn Sie weitere Animationen hinzufügen müssen, wickeln Sie eine weitere Gruppe von Gruppentags in Ihren Code ein und verschachteln Sie die zusätzlichen animateTransform darin markieren.
Werfen wir einen kurzen Blick auf die verbleibenden drei Transformationstypen, von denen jeder nur durch die Änderung erstellt wurde Art, von und zu Einstellungen und kombiniert mit unserer Original-Übersetzungsanimation.
In diesem Beispiel Art wurde auf gesetzt drehen, von wurde auf gesetzt 0 zu beginnen, ohne Rotation, und zu wurde auf gesetzt 45 So drehen wir uns zwei Sekunden lang um 45 Grad:
In den folgenden zwei Animationen Art wurde auf gesetzt skewX und schief beziehungsweise, von ist eingestellt auf 0 zu beginnen, ohne zu verzerren, und zu wurde auf gesetzt 20 so neigen wir uns über zwei Sekunden um 20 Grad:
Animierte SkewX-Transformation
Animierte schräge TransformationEs gibt unendlich viele Möglichkeiten für Animationen, die Sie mit diesen grundlegenden Techniken erstellen können, aber eine der unmittelbar nützlichsten ist das Erstellen von Ladesymbolen, bei denen Sie sich früher auf animierte GIFs verlassen haben.
Dies ist ein Ladesymbol, das ich in etwa fünf Minuten mit Sketch erstellt habe:
Ich habe es dann in eine SVG-Datei exportiert, die mir folgenden Code gab:
Wenn dieses Symbol mehrere Formen innerhalb einer Gruppe umfasst, können Sie es anwenden, wie wir oben erfahren haben animateTransform Zu einer Gruppe habe ich vor dem letzten Schließen meinen Animationscode hinzugefügt Etikett:
Der obige Code stellt das Symbol so ein, dass es von 0 bis 360 Grad gedreht wird, d. H. Ein vollständiger Kreis.
Beachten Sie, dass ich dieses Mal auch zwei zusätzliche Zahlen in die beiden eingetragen habe von und zu die Einstellungen. Dadurch wird der Animation mitgeteilt, dass sie sich um einen Punkt auf der eigenen X / Y-Achse der Form von dreht 18 18, d.h. der Mittelpunkt der Form ist 36 x 36 Pixel groß.
Dies erzeugt die folgende Animation:
Auch hier ist Ihre Animation im Browser weicher als die oben genannte GIF-Datei. Schauen Sie sich also unbedingt die eigentliche Sache an. Wie Sie sehen, ist es sehr schnell und einfach, Animationen zusammenzustellen, aus denen Sie eine solide praktische Anwendung machen können.
Wenn Sie noch nicht an der SVG-Animation teilgenommen haben, sollten Sie jetzt über die Tools verfügen, die Sie für einen guten Start benötigen.
