Wie man "animateTransform" für Inline-SVG-Animation verwendet 

Heute werden wir Sie durch die Grundlagen der Verwendung von animateTransform führen, um Inline-Animationen mit SVG (Scalable Vector Graphics) zu erzeugen.

Wenn du neu bei SVG bist, empfehle ich dir den Einstieg in Scalable Vector Graphics (SVG), um dich auf dem Laufenden zu halten. 

Mit den Techniken, die Sie erlernen werden, können Sie anspruchsvolle Symbol- und Bildanimationen ohne ein einziges GIF, JPEG oder PNG mit null JavaScript und ohne das schwächste Flüstern von Flash erstellen. 

Die Animationen, die Sie erstellen, können später einfach bearbeitet werden, da sie aus reinem Code bestehen und die Ergebnisse bei der Anzeige nur ein paar KB wertvoller Bandbreite benötigen.

Bevor wir anfangen 

Um SVG-Formen zu animieren, musst du sie erst erstellen können. Ich habe den einfachsten Weg gefunden, um SVGs zu erstellen, ist Sketch from Bohemian Coding zu verwenden.  Wenn Sie Sketch nicht besitzen, können Sie eine kostenlose 30-Tage-Testversion für die Zwecke dieses Tutorials nutzen. 

Wir werden den SVG-Code manipulieren. Wenn Sie also in Sketch eine Form gezeichnet haben, erstellen Sie ein Segment um ihn herum und exportieren Sie das Segment 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 vom öffnenden<svg>Tag bis zum schließenden </svg>Tag. 

Beispielsweise generiert Sketch den folgenden SVG-Code für das oben abgebildete blaue Rechteck:

1

<svg width="100px" height="125px" viewBox="0 0 100 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

2

    <!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->

3

    <title>Slice 2</title>

4

    <desc>Created with Sketch.</desc>

5

    <defs></defs>

6

    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">

7

        <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125"></rect>

8

    </g>

9

</svg>

Um den Code optisch einfacher zu machen, werden wir ein paar kleine Änderungen am Code vornehmen. 

Setzen Sie die Breite und Höhe des SVG-Elements auf 100% und löschen Sie die ViewBox-Einstellung.  Löschen Sie auch den Generatorkommentar und die Titel, desc, defs und g Elemente.

Du solltest mit so etwas enden: 

1

<svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

2

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125"></rect>

3

</svg>

Fügen Sie diesen Code in ein HTML-Dokument ein, und wenn Sie im Browser angezeigt werden, sollten Sie dasselbe blaue Rechteck auf Ihrer Seite sehen, wie Sie es in Sketch gesehen haben:

Hinweis: Das obige Bild enthält eine X- und Y-Achse im Hintergrund, die Sie benötigen, um Ihre Animationen zu erstellen.  Du wirst in Kürze erfahren, warum. 

Was macht "animateTransform"?

Die kurze Antwort ist, dass das animateTransform-Element Animationen generiert, indem Transformationseigenschaften für die SVG-Form festgelegt werden, auf die es angewendet wird.

In Anbetracht dessen ist die logische nächste Frage: 

Okay, was macht "Transformation"? 

Durch Hinzufügen von Transformationseinstellungen zu einer Form können Sie ändern, wie diese Form im 2D-Raum angezeigt wird.  Es gibt fünf verschiedene Transformationsarten, die Sie ausführen können:

1. Übersetzen 
   
2. Rahmen 
   
3. drehen 
   
4. skewX 
   
5. schief

Mit dem Attribut animateTransform können Sie zwischen verschiedenen Transformationszuständen animieren. Bevor Sie also mit der Animation beginnen, müssen Sie verstehen, wie Transformationen tatsächlich funktionieren.

Transformationen und 2D-Raum 

Da Transformationen im 2D-Raum arbeiten, beziehen sich ihre Einstellungen alle auf X- und Y-Koordinaten, die auf einer X / Y-Achse aufgetragen sind, wie Sie zuvor hinter unserem blauen Rechteck gesehen haben. 

• Die 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 sowohl auf der X- als auch auf der Y-Achse.
• Standardmäßig beginnt jede Form an einer Position von 0 sowohl auf der X- als auch auf der Y-Achse.
• Von der 0-Position auf der X-Achse entsprechen positive Werte der Bewegung nach rechts, und negative Werte entsprechen der Bewegung nach links. 

Machen Sie sich auch keine Gedanken über den Code für diese Transformationen, da wir das behandeln werden, wenn wir mit der Erstellung von Animationen beginnen. 

Wenn dies noch keinen vollständigen Sinn ergibt, machen Sie sich keine Sorgen, da es viel klarer wird, wenn Sie die Beispiele für jede Art von Transformation unten sehen.  Zunächst möchte ich, dass Sie das Wesentliche über die fünf Arten der Transformation herausfinden. 

Übersetzen 

Dies verschiebt die Position der Form auf der X-Achse (horizontal) und Y-Achse (vertikal). 

Wenn Sie den Wert translate für X auf positiv 150 setzen, wurde unser Rechteck um 150 Pixel nach rechts verschoben. Wenn Sie den Wert für Y auf positiv 20 setzen, wurde unser Rechteck um 20 Pixel nach unten verschoben.

Wenn Sie den Wert translate für X auf positiv 150 setzen, wurde unser Rechteck um 150 Pixel nach rechts verschoben. Wenn Sie den Wert für Y auf positiv 20 setzen, wurde unser Rechteck um 20 Pixel nach unten verschoben.

Wenn Sie den Wert translate für X auf positiv 150 setzen, wurde unser Rechteck um 150 Pixel nach rechts verschoben.  Wenn Sie den Wert für Y auf positiv 20 setzen, wurde unser Rechteck um 20 Pixel nach unten verschoben.

Rahmen 

Dies multipliziert die Gesamtgröße der Form auf der X-Achse (Breite) und Y-Achse (Höhe). 

Maßstabseinstellungen wirken als Multiplikatoren der Originalgröße der Form.  Wenn wir beispielsweise die X-Skalierung auf 3 setzen, wird die Form dreimal breiter.  Wenn wir die Y-Skala auf 1,25 einstellen, würde die Form eineinhalb mal so hoch sein: 

Drehen

Dies dreht die Form um einen bestimmten Punkt um Grad. 

Die Drehung funktioniert, indem Sie die Anzahl der Grad einstellen, um die die Form gedreht werden soll.  Zum Beispiel ist hier unser Rechteck um 45 Grad gedreht: 

Standardmäßig wird die Form um die obere linke Ecke gedreht, aber Sie können sie auch um einen anderen Punkt drehen lassen.  Wir werden behandeln, wie das später im Tutorial gemacht wird. 

SkewX

Dadurch wird die Form entlang der X-Achse (horizontal) verzerrt. 

Die Neigung entlang der X-Achse funktioniert auch in Grad.  Im folgenden Beispiel ist unser Rechteck um 20 Grad entlang der X-Achse geneigt: 

SkewY 

Dadurch wird die Form um die Y-Achse (vertikal) geneigt.

SkewY funktioniert genau wie SkewX, nur die Transformation geschieht vertikal entlang der Y-Achse: 

Animieren von Transformationen

Nachdem Sie nun wissen, was Transformationen tatsächlich bewirken, können Sie Animationen zwischen verschiedenen Transformationszuständen erstellen.  Der grundlegende Prozess besteht aus drei Schritten: 

1. Legen Sie einen Anfangszustand der Transformation fest: den from-Status.
   
2. Legen Sie einen zweiten Transformationszustand fest: den Status to. 
   
3. Stellen Sie das Timing und die Wiederholung für einen animierten Übergang zwischen dem Von- und dem Zu-Zustand ein.

Dies lässt sich am besten anhand eines praktischen Beispiels verstehen. Beginnen wir also damit, eine Übersetztransformation zu animieren.

Animieren von Transformationen 

Sie erinnern sich, dass wir früher mit unserem blauen Rechteck an der Standardposition 0 0 begonnen haben, d. H. 0 auf der X-Achse und 0 auf der Y-Achse.  Wir werden diese Position als unseren Staat bezeichnen. 

Wir haben dann ein Beispiel des gleichen blauen Rechtecks ​​mit den angewandten Translationseinstellungen 150 20 betrachtet, d. H. 150 auf der X-Achse und 20 auf der Y-Achse.  Wir werden diese Position als unsere Position festlegen.

Mit animateTransform können wir das Rechteck innerhalb von zwei Sekunden zwischen unserem from- und unserem to-Zustand gleiten lassen. 

Ihre SVG-Form, in diesem Fall ein Rechteck, muss sowohl öffnende als auch schließende Tags aufweisen, z.< rect ><rect>.

Das animateTransform-Attribut sollte wie folgt zwischen diesen Tags platziert werden: 

1

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125">

2

    <animateTransform attributeName="transform"

3

      type="translate"

4

      from="0 0"

5

      to="150 20"

6

      begin="0s"

7

      dur="2s"

8

      repeatCount="indefinite"

9

    />

10

  </rect>

Sehen Sie sich die Eigenschaften an, die im animateTransform-Tag festgelegt wurden.  Diese steuern, wie Ihre Animation läuft. 

Wir haben den zu übersetzenden Typ festgelegt, was bedeutet, dass wir einen Transformationstransformationstyp anwenden.  Wie geplant, haben wir unsere 0 0 Position im from Zustand und unsere 150 20 Position im to Status gesetzt.

Der Wert für begin wird auf 0s gesetzt, was bedeutet, dass die Animation null Sekunden nach dem Laden beginnt und dur auf 2s gesetzt ist, was bedeutet, dass die Animation über einen Zeitraum von zwei Sekunden ausgeführt wird.  Schließlich haben wir repeatCount auf indefinite gesetzt, was bedeutet, dass die Animation in einer Schleife wiedergegeben wird. 

Dies gibt uns die folgende Animation:

Animieren anderer Transformationen

Der Prozess ist genau der gleiche für das Drehen aller vier anderen Arten von Transformationen.  Nachdem Sie den Typwert auf den gewünschten Transformationstyp festgelegt haben, geben Sie Werte für die Transformationszustände Von und Bis ein.

Zum Beispiel können wir die folgenden animateTransform-Einstellungen verwenden, um unser Rechteck auf die Größe zu skalieren, die Sie im vorherigen Abschnitt zur Maßstabsumwandlung gesehen haben: 

1

    <animateTransform attributeName="transform"

2

      type="scale"

3

      from="1 1"

4

      to="3 1.25"

5

      begin="0s"

6

      dur="2s"

7

      repeatCount="0"

8

    />

Da Skalierungstransformationseinstellungen die Originalgröße der Form multiplizieren, beginnen wir mit einem Wert von 1 1 für die Einstellung von from.  Dadurch wird die Originalgröße auf eine Multiplikation von 1 gesetzt. 

Unsere Einstellung von 3 1,25 wird unsere Maßstabsumwandlung um das Dreifache der ursprünglichen Breite auf der X-Achse und um ein Viertel der ursprünglichen Höhe auf der Y-Achse animieren. 

Hinweis: Sie werden feststellen, dass Ihre tatsächlichen Animationen im Browser viel flüssiger ablaufen als die Screenshot-GIF, die Sie oben sehen.

Animiere mehrere Transformationen 

Wir können auch die zwei Animationen kombinieren, die wir bisher erstellt haben, um sie gleichzeitig zu übersetzen und zu skalieren.  Sie können nur ein einziges animateTransform-Tag innerhalb Ihres rect-Tags verwenden. Um mehrere Animationen zu verwenden, müssen Sie also eine Gruppe von g-Tags integrieren, die eine Gruppe von SVG-Objekten darstellen.

Fügen Sie dazu öffnende und schließende <g></g>  -Tags um Ihre vorhandenen Rect-Tags hinzu: 

1

  <g>

2

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125">

3

    <animateTransform attributeName="transform"

4

      type="scale"

5

      from="1 1"

6

      to="3 1.25"

7

      begin="0s"

8

      dur="2s"

9

      repeatCount="0"

10

    />

11

  </rect>

12

  </g>

Fügen Sie dann Ihre zweite Animation außerhalb des schließenden </rect> -Tags, aber vor dem schließenden -<g/> Tag hinzu.  In diesem Fall werden wir unsere Translate-Transformation wieder einführen: 

1

  <g>

2

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125">

3

    <animateTransform attributeName="transform"

4

      type="scale"

5

      from="1 1"

6

      to="3 1.25"

7

      begin="0s"

8

      dur="2s"

9

      repeatCount="0"

10

    />

11

  </rect>

12

  <animateTransform attributeName="transform" type="translate" from="0 0" to="150 20" begin="0s" dur="2s" repeatCount="0" />

13

  </g>

Wir haben jetzt sowohl die Skalierungs- als auch die Translate-Transformation, die gleichzeitig animieren: 

Sie können animateTransform einmal pro Form oder Gruppe verwenden.  Wenn Sie weitere Animationen hinzufügen müssen, fügen Sie einen weiteren Satz von Gruppentags um Ihren Code ein und verschachteln Sie das zusätzliche animateTransform-Tag darin.

Lassen Sie uns einen kurzen Blick auf die verbleibenden drei Transformationstypen werfen, von denen jeder nur durch Ändern des Typs, von und nach Einstellungen und auch in Kombination mit unserer ursprünglichen Übersetzungsanimation erstellt wurde.

Rotationsanimation (plus Übersetzung) 

In diesem Beispiel wurde type auf rotieren gesetzt, from wurde auf 0 gesetzt, um mit keiner Rotation zu beginnen, und to wurde auf 45 gesetzt, also drehen wir 45 Grad über zwei Sekunden:

SkewX und SkewY Animation (plus Übersetzung)

Im folgenden wurden zwei Animationstypen auf skewX bzw. skewY gesetzt, from auf 0 gesetzt, um mit keinem SkewY zu beginnen, und to auf 20 gesetzt wurde, sodass wir um 20 Grad über zwei Sekunden verzerrt werden:

Beispiel: Icon laden

Es gibt unendlich viele Möglichkeiten für Animationen, die Sie mit diesen grundlegenden Techniken erstellen können, aber eines der nützlichsten ist das Erstellen von Ladesymbolen, wo Sie sich früher auf animierte GIFs verlassen haben könnten. 

Dies ist ein Ladesymbol, das ich in ungefähr fünf Minuten mit Sketch erstellt habe: 

Symbol wird aus einzelnen Rechtecken in Sketch geladen Ich habe es dann in eine SVG-Datei exportiert, die mir folgenden Code gegeben hat: 

1

<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

2

    <!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->

3

    <title>loader01 2</title>

4

    <desc>Created with Sketch.</desc>

5

    <defs></defs>

6

    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">

7

        <g id="Group-3" sketch:type="MSLayerGroup" fill="#4990E2">

8

            <rect id="Rectangle-1" sketch:type="MSShapeGroup" x="16.5873418" y="0" width="3" height="9.13705584"></rect>

9

            <rect id="Rectangle-2" fill-opacity="0.58" sketch:type="MSShapeGroup" x="16.678481" y="26.8629442" width="3" height="9.13705584"></rect>

10

            <rect id="Rectangle-4" fill-opacity="0.79" sketch:type="MSShapeGroup" transform="translate(31.530380, 17.954315) rotate(-270.000000) translate(-31.530380, -17.954315) " x="30.0303797" y="13.3857868" width="3" height="9.13705584"></rect>

11

            <rect id="Rectangle-3" fill-opacity="0.37" sketch:type="MSShapeGroup" transform="translate(4.735443, 18.045685) rotate(-270.000000) translate(-4.735443, -18.045685) " x="3.23544304" y="13.4771574" width="3" height="9.13705584"></rect>

12

            <rect id="Rectangle-4" fill-opacity="0.72" sketch:type="MSShapeGroup" transform="translate(29.758244, 24.676171) rotate(-240.000000) translate(-29.758244, -24.676171) " x="28.2582441" y="20.1076435" width="3" height="9.13705584"></rect>

13

            <rect id="Rectangle-3" fill-opacity="0.3" sketch:type="MSShapeGroup" transform="translate(6.507579, 11.323829) rotate(-240.000000) translate(-6.507579, -11.323829) " x="5.00757864" y="6.75530065" width="3" height="9.13705584"></rect>

14

            <rect id="Rectangle-4" fill-opacity="0.65" sketch:type="MSShapeGroup" transform="translate(24.871110, 29.609153) rotate(-210.000000) translate(-24.871110, -29.609153) " x="23.37111" y="25.0406255" width="3" height="9.13705584"></rect>

15

            <rect id="Rectangle-3" fill-opacity="0.23" sketch:type="MSShapeGroup" transform="translate(11.394713, 6.390847) rotate(-210.000000) translate(-11.394713, -6.390847) " x="9.89471277" y="1.82231869" width="3" height="9.13705584"></rect>

16

            <rect id="Rectangle-4" fill-opacity="0.51" sketch:type="MSShapeGroup" transform="translate(11.473642, 29.654839) rotate(-150.000000) translate(-11.473642, -29.654839) " x="9.97364166" y="25.0863108" width="3" height="9.13705584"></rect>

17

            <rect id="Rectangle-3" fill-opacity="0.93" sketch:type="MSShapeGroup" transform="translate(24.792181, 6.345161) rotate(-150.000000) translate(-24.792181, -6.345161) " x="23.2921811" y="1.77663341" width="3" height="9.13705584"></rect>

18

            <rect id="Rectangle-4" fill-opacity="0.44" sketch:type="MSShapeGroup" transform="translate(6.553148, 24.755301) rotate(-120.000000) translate(-6.553148, -24.755301) " x="5.05314826" y="20.1867727" width="3" height="9.13705584"></rect>

19

            <rect id="Rectangle-3" fill-opacity="0.86" sketch:type="MSShapeGroup" transform="translate(29.712675, 11.244699) rotate(-120.000000) translate(-29.712675, -11.244699) " x="28.2126745" y="6.67617143" width="3" height="9.13705584"></rect>

20

        </g>

21

    </g>

22

</svg>

Dieses Symbol besteht aus mehreren Formen innerhalb einer Gruppe. Wie oben beschrieben, können Sie animateTransform auf eine Gruppe anwenden. Ich habe meinen Animationscode vor dem letzten schließenden <g/>-Tag hinzugefügt:

1

        </g>

2

        <animateTransform attributeName="transform"

3

      	type="rotate"

4

    		from="0 18 18"

5

    		to="360 18 18"

6

    		begin="0s"

7

    		dur="0.85s"

8

    		repeatCount="indefinite"

9

    	/>

10

    </g>

11

</svg>

Der obige Code setzt das Symbol, um von 0 bis 360 Grad zu rotieren, d. H. Einen vollen Kreis.

Achse rotieren 

Beachten Sie, dass ich dieses Mal auch zwei zusätzliche Zahlen in den Einstellungen Von und Bis hinzugefügt habe.  Dies teilt der Animation mit, dass sie sich um einen Punkt auf der eigenen internen X / Y-Achse der Form von 18 18 dreht, d. H. Die Mitte der Form, wenn sie 36 × 36 Pixel groß ist.

Dies erzeugt die folgende Animation:

Auch hier ist Ihre In-Browser-Animation glatter als die oben genannten GIF-Dateien. Achten Sie also darauf, das Original zu sehen.  Wie Sie sehen können, ist es sehr schnell und einfach, Animationen zusammenzustellen, aus denen Sie einen soliden praktischen Nutzen ziehen können.

Aufwickeln

Wenn Sie noch nicht in der SVG-Animation gelaufen sind, sollten Sie jetzt die Werkzeuge haben, die Sie brauchen, um einen guten Start zu bekommen. 

Weiterführende Literatur

• Großes Codepen-Beispiel für animierte Lade-SVGs 
• Mehr darüber, wie animateTransform bei W3C funktioniert. 
• Besorgen Sie sich eine Kopie der Quelle für dieses Tutorial, spielen Sie mit den Beispielen und erstellen Sie Ihre eigenen Inline-SVG-Animationen!