Wie ich einen Generator für SVG -Lader mit SASS- und SMIL -Optionen gemacht habe

In diesem Artikel wird die Erstellung eines SVG -Loadergenerators beschrieben, der sowohl lächelige als auch Sass -Animationsoptionen bietet. Das Projekt, das aus einem Zusammenfluss von Lernerfahrungen entnommen wurde, bietet ein vielseitiges Tool zum Generieren anpassbarer SVG -Lader.

Entstehung des Generators

Drei Schlüsselfaktoren inspirierten die Entwicklung:

1. Sarah Drasners "SVG -Animationen"

Die anfängliche Bekämpfung des Autors gegenüber Sass Loops stammte aus Sarah Drasners Buch, insbesondere aus dem Kapitel über Animation von Datenvisualisierungen mit Sass -Funktionen, um Animationen zu stolpern. Dies weckte ein Interesse an den Möglichkeiten von Sass -Schleifen für die Animation.

2. Eine Lader -Replikationsanforderung

Eine Anfrage zur Replikation eines Laders im Apple-Stil lieferte eine praktische Anwendung für das neu entdeckte Wissen. Der Autor hat eine SASS -Schleife implementiert, um die Animationsverzögerungen effizient zu verwalten:

 @Für $ i von 1 bis 12 {
  .loader: nth-of-type (#{$ i}) {
    Animation: 1s $ I * 0.08S OPACKAILALOADER Infinite;
  }
}
@keyframes opacityloader {
 zu {Opazität: 0; }
}

Dieser prägnante Sass -Code erzielt das gleiche Ergebnis wie ein viel längeres Äquivalent in Vanille -CSS:

 .loader: n-vom-type (1) {
  Animation: 1S 0.08S OPACKAityloader Infinite;
}
.loader: n-vom-type (2) {
  Animation: 1S 0.16S OPACKAityloader Infinite;
}

/ * ... */

.loader: nth-vom-Typ (12) {
  Animation: 1S 0,96S OPACKAILYLOADER Infinite;
}
@keyframes opacityloader {
  zu {Opazität: 0; }
}

3. Eine Galerieidee

Die Kombination aus Sass -Schleifenkenntnissen und der Notwendigkeit eines Laders führte zum Konzept eines Ladergenerators, der eine wahrgenommene Lücke in leicht verfügbaren Online -Ressourcen berücksichtigte.

Doppelanimationsausgabe: lächelt und sass

Die anfänglichen Entwicklungsherausforderungen bei der SASS -Ausgabe führten zur Einbeziehung der lächelnden Animation als Alternative. Trotz gelegentlicher Divergenz in der Output wurden jedoch beide Optionen letztendlich integriert.

Lächeln gegen CSS/SASS: Schlüsselunterschiede

Der Entwicklungsprozess hat mehrere wichtige Unterschiede hervorgehoben:

• Ressourcenunabhängigkeit: Im Gegensatz zu CSS oder SASS animieren direkt innerhalb des SVG -Markups.
• Bildeinbettung: Smil -Animationen bestehen bestehen, wenn das SVG als Bild oder Hintergrund verwendet wird.
• Animationsfluidität: Smil -Animationen erscheinen oft reibungsloser, obwohl der genaue Grund unklar bleibt.
• Animationsketten: additive="sum" in Smil fügt nacheinander Animationen hinzu, während CSS/SASS die letzte Animationserklärung für widersprüchliche Eigenschaften priorisiert.
• Transformation Handhabung: Transformationen erforderten eine Problemumgehung in Sass, um Parität mit Smils Verhalten zu erreichen, was die Verwendung von erforderlich ist<g></g> Elemente zur Kapselung von Formen.

Technologiestack: Vue.js und nuxt.js

Das Projekt nutzt Vue.js für seine Komponenten-basierte Architektur, die intuitive Datenbindung und die einfache Handhabung von HTML und SVG. Nuxt.js bietet eine optimierte Entwicklungsumgebung mit Funktionen wie automatischer Routing und SEO -Optimierung.

Beispiel für Lader

Die Flexibilität des Generators ermöglicht verschiedene Integrationsmethoden:

• Lächeln Sie SVG als Hintergrundbild: Laden Sie das generierte SVG herunter und verwenden Sie es als CSS -Hintergrundbild.
• Direkte HTML -Einbettung: Einbetten Sie den generierten SVG -Code direkt in die HTML ein.
• Integration von SASS -Schleifen: Verwenden Sie die generierte SASS -Schleife, um die Inline -SVG zu animieren.

Fortlaufende Entwicklung und zukünftige Verbesserungen

Zu den zukünftigen Plänen zählen das Hinzufügen einer dritten Styling-Option für einfachere SVG-Manipulation mit Einzelelementen, die Bewältigung der Herausforderungen bei der Behandlung benutzerdefinierter Animationsparameter und der Verbesserung der Code-Klarheit. Die Open-Source-Natur des Projekts begrüßt Beiträge und Feedback.

Die Reise des Projekts, die von einer einfachen Sass -Schleife initiiert wird, zeigt die Kraft und Vielseitigkeit von lächelnden Animationen trotz früherer Abschaltungsbedenken. Während der Browserunterstützung überprüft werden sollte (mithilfe von Ressourcen wie Caniuse), weist die aktuelle Situation eine anhaltende Lebensfähigkeit hin. Detaillierte Browser -Unterstützungstabellen werden hier für die Kürze weggelassen.

Das obige ist der detaillierte Inhalt vonWie ich einen Generator für SVG -Lader mit SASS- und SMIL -Optionen gemacht habe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!