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!