Verwenden und wiederverwenden Sie alles in SVG… sogar Animationen!

Wenn Sie mit SVG- und CSS -Animationen vertraut sind und häufig mit ihnen zusammenarbeiten, finden Sie hier einige Ideen, die Sie vielleicht beachten möchten, bevor Sie in den Job einsteigen. In diesem Artikel geht es darum, zu lernen, wie Sie Ihren Code mit

Teil 1: Das SVG Element

Wenn Sie ein Entwickler sind, der Ihren Code gerne trocken hält, oder einen großen Fan von SASS/CSS -Variablen, besteht eine gute Chance, dass Sie dieses Tag mögen.

Angenommen, Sie haben ein Element, das in Ihrer Grafik viele Male wiederholt wird. Anstatt einen komplexen Teil Ihres Codes in Ihrem SVG viele Male wiederholt zu haben, können Sie diesen Teil einmal definieren und dann mit dem

Um mit der Implementierung des

1. Identifizieren Sie den Teil des Code, den Sie klonen möchten
2. Fügen Sie diesem Teil eine ID hinzu
3. Verknüpfen Sie es in Ihrem

Das war's! Ihr neuer Klon ist fertig. Jetzt können Sie seine Attribute (z. B. x und y Position) so ändern, dass Sie Ihren Anforderungen entsprechen.

Lassen Sie uns in ein sehr bequemes Beispiel eintauchen

Ich möchte diesen wirklichen Fall teilen, in dem ich einen großen Würfel aus kleinen Würfeleinheiten animieren musste. (Stellen Sie sich den klassischen Rubik's Cube vor.)

Wir werden zunächst die Cube -Einheit in SVG mit grundlegenden Formen und Transformationen zeichnen:

 <svg viewbox=" -130 -20 300 100">
  <g>
    <rect width="21" height="24" transform="skewy (30)"></rect>
    <rect width="21" height="24" transform="skewy (-30) Translate (21 24.3)"></rect>
    <rect width="21" height="21" transformation="Skala (1,41, .81) Drehen (45) Translate (0 -21)"></rect>
  </g>
</svg>

Beachten Sie, dass die Formen in einem -Element gruppiert sind, damit wir die ID zu der gesamten Abbildung hinzufügen können.

Als nächstes bauen wir einen größeren Würfel, der diese Einheit kloniert. Zunächst müssen wir den Würfel aus dem vorherigen Beispiel innerhalb des -Tags innerhalb des SVG einwickeln. Im Element können wir alles, was wir wiederverwenden wollen, eine einzelne Form, eine Gruppe, ein Gradient sein. Fast jedes SVG -Element. Sie werden nirgendwo rendern, es sei denn, wir verwenden sie außerhalb dieses Tags.

Dann können wir das Gerät so oft verbinden, wie wir seine ID verwenden und die X- und Y -Position in jedem Klon wie diesen ändern möchten:

 <verwenden sie xlink: href="#cube" x="142" y="124"></verwenden>
<verwenden sie xlink: href="#cube" x="100" y="124"></verwenden>

Jetzt müssen wir jeden Würfel daran erinnern, dass das letzte Element an der Vorderseite erscheinen wird. Danach werden wir unseren ersten großen Würfel bereit haben!

XLINK: HREF ist seit SVG2 veraltet, kann es jedoch besser für Kompatibilitätszwecke verwenden. In modernen Browsern können Sie nur HREF verwenden, aber ich habe es auf Safari getestet und zum Zeitpunkt des Schreibens funktioniert dort nicht. Wenn Sie XLINK: HREF verwenden, stellen Sie sicher, dass Sie diesen Namespace in Ihr SVG -Tag einbeziehen: XMLNS: xlink = "http://www.w3.org/1999/xlink" (Sie müssen es nicht benötigen, wenn Sie sich für die Verwendung von HREF entscheiden).

Teil 2: Verwenden Sie CSS -Variablen, um verschiedene Stile auf Ihre wiederverwandte Grafik anzuwenden

Ich habe eine Hauptfarbe für den Würfel gewählt, der leichter und ein dunklerer Farbton für die Seiten und eine Schlaganfallfarbe ist. Aber was ist, wenn wir einen zweiten Würfel zu einer anderen Farbe machen wollen?

Wir können die Füllungen und Striche durch CSS -Variablen ersetzen, um diese Attribute flexibler zu gestalten. Auf diese Weise können wir dieselbe Würfeleinheit mit einer anderen Palette wiederverwenden (anstatt eine zweite Einheit mit verschiedenen Farben für einen zweiten Würfel zu definieren).

Warum nicht dem neuen Würfel eine Klasse hinzufügen und die Füllfarbe mit CSS ändern? Wir werden das tun, aber zuerst versuchen Sie, ein definieren, von allen Instanzen vererbt, und Sie werden nicht in der Lage sein, diejenigen mit CSS umzuschreiben. Wenn Sie diese Werte jedoch durch Variablen ersetzen, können Sie sie in CSS steuern.

In unserer Würfeleinheit gehen wir jede Seite durch und ersetzen die Füll- und Schlaganfallwerte durch semantische Variablennamen.

Zum Beispiel dies:

 <rect fill="#00Affa" stroke="#0079ad"></rect>

… Kann dadurch ersetzt werden:

 <rect fill="var (-maincolor)" stroke="var (-strokecolor)"></rect>

Von hier aus müssen wir die SVG duplizieren, um einen zweiten Würfel zu bauen. Wir müssen jedoch nicht duplizieren, wenn wir beide im selben Dokument aufbewahren. Wir können jeder SVG eine Klasse hinzufügen und die Farbpalette über CSS steuern, wodurch die Werte der Variablen neu definiert werden.

Lassen Sie uns eine Palette für den blauen Würfel und eine andere für den rosa Würfel erstellen:

 .Blue-Cube {
  -Maincolor: #009cde;
  -STROKECOLOR: #0079AD;
  -LIGHTCOLOR: #00AFFA;
  -Darkcolor: #008BC7;
}

.pink-cube {
  -Maincolor: #DE0063;
  -STROKECOLOR: #ad004e;
  -LightColor: #FA0070;
  -Darkcolor: #C7005a;
}

Auf diese Weise können wir so viele Würfel hinzufügen, wie wir wollen, und alle Farben von einem Ort von einem Ort verändern.

Teil 3: Animationen wiederverwenden

Die Idee für diese Instanz ist es, die Würfel beim Schwebedruck zu brechen - so etwas wie eine explodierte Ansicht, sodass einige Teile von der Mitte weggehen, wenn wir den Cursor über die Würfel legen.

Beginnen wir zunächst zwei Bewegungen, eine für jede Achse: Bewegen Sie y und bewegen Sie X. Indem Sie die Animationen in Bewegungen teilen, können wir sie in jedem Würfel wiederverwenden. Die Animationen bestehen darin, den Würfel von seiner anfänglichen Position auf 30px oder 50px in eine Richtung zu bewegen. Wir können eine Transformation verwenden (x oder y), um dies zu erreichen. Zum Beispiel:

 @keyframes movex {
  zu {transform: translatex (-35px); }
}

Wenn wir diese Animation jedoch wiederverwenden wollen, ist es besser, den numerischen Wert durch eine Variable wie folgt zu ersetzen:

 @keyframes movex {
  zu {transformation: translatex (var (-translate, 35px)); }
}

Wenn die Variable nicht definiert ist, beträgt der Standardwert 35px.

Jetzt brauchen wir mindestens eine Klasse, um an die Animation zu binden. In diesem Fall benötigen wir jedoch zwei Klassen, um Würfel in der X-Achse zu bewegen: .m-links und .m-Right.

 .m-links, .m-right { 
  Animation: 2s Movex Alternative Infinite; 
}

Damit sich der Würfel nach links bewegt, benötigen wir einen negativen Wert, können aber auch eine andere Anzahl deklarieren. Wir können unsere Variable wie diese in der .m-links-Klasse definieren:

 .m -links { -translate: -50px; }

Was hier passiert, ist, dass wir erklären, dass, wenn wir die Klasse .m-links zu einem Element hinzufügen, das Animations Movex (die in den @KeyFrames definierte Animation) abspielt, die zwei Sekunden dauern wird, um in der X-Achse zu übersetzen und eine neue Position zu erreichen, die -50px übrig ist. Anschließend wechselt die Animation die Anweisungen so, dass sie sich aus der letzten Position bewegt und zwei weitere Sekunden dauert, um in ihren ursprünglichen Zustand zu gehen. Und so weiter, weil es eine unendliche Schleife ist.

Wir können eine weitere Variable in die .m-Rechtsklasse erklären, aber wenn wir es nicht tun, denken Sie daran, dass die 35px, die wir am Anfang deklariert haben, dauern wird.

Der Standardwert für Animations-Spielstaat wird ausgeführt, aber vielleicht möchten wir nicht, dass sich die Würfel ständig bewegen. Es wäre sehr ablenkend und ärgerlich, auf einer Website mit einigen Inhalten in der Nähe zu verwenden. Lassen Sie uns also versuchen, die Animation nur beim Schwebezustand zu spielen, indem wir Folgendes hinzufügen:

 SVG: Hover .m-links {
  Animation: 2s Movex Alternative Infinite;
}

Sie können es selbst ausprobieren und werden feststellen, dass die Animation jedes Mal, wenn wir den Cursor aus dem Würfel stellen, superschnell in den Ausgangszustand springen. Um dies zu vermeiden, können wir den Wert hinzufügen, der am Ende der Animations -Kurzschrift pausiert wird:

 .m-links {
  Animation: 2s Movex Alternative Unendliche Pause;
}

Jetzt wird die Animation durchgeführt, wird aber auf Schwebungen ausgeführt, indem diese CSS -Linie hinzugefügt wird:

 SVG: Hover * { 
  Animations-Play-State: Laufen; 
}

Wir können jede Klasse auf verschiedene Elemente im SVG anwenden. Im ersten blauen Würfel bewegen wir einzelne Würfel; In der zweiten Anwendung wenden wir diese Klassen auf Gruppen von Würfeln an.

Eine letzte Sache ...

Erst später wurde mir klar, dass ich eine einzige Einheit wiederverwenden konnte, um sie alle zu bauen. Ich habe an dem kleinen Würfel gearbeitet, um ihn genug isometrisch zu machen, damit er sich leicht mit den anderen übereinstimmen kann. Zu diesem Zeitpunkt war mein Gerät ein , aber ich beschloss, es durch SVG -Formen zu ersetzen, um den Code zu reduzieren und saubereres Markup zu erhalten.

Ich habe gelernt, dass es besser ist, sich etwas Zeit zu nehmen, um zu analysieren, was mit SVG getan werden kann, bevor ich jede einzelne Form zeichnet und mit einer großen Menge Code umgeht. Am Anfang mag es mehr Zeit dauern, sparen Sie aber auf lange Sicht viel Zeit und Mühe.

Das obige ist der detaillierte Inhalt vonVerwenden und wiederverwenden Sie alles in SVG… sogar Animationen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!