Comment j'ai fait un générateur pour les chargeurs SVG avec des options SASS et SMIL

Cet article détaille la création d'un générateur de chargeur SVG offrant des options d'animation SMIL et SASS. Le projet, né d'une confluence d'expériences d'apprentissage, fournit un outil polyvalent pour générer des chargeurs SVG personnalisables.

Genèse du générateur

Trois facteurs clés ont inspiré le développement:

1. "Animations SVG" de Sarah Drasner

L'exposition initiale de l'auteur aux boucles SASS est venue du livre de Sarah Drasner, en particulier le chapitre sur l'animation de visualisations de données à l'aide des fonctions SASS pour déferler les animations. Cela a suscité un intérêt pour les possibilités des boucles Sass pour l'animation.

2. Une demande de réplication du chargeur

Une demande de reproduction d'un chargeur de style pomme a fourni une application pratique pour les connaissances nouvelles. L'auteur a implémenté une boucle SASS pour gérer efficacement les retards d'animation:

 @for $ i de 1 à 12 {
  .loader: Nth-of-Type (# {$ i}) {
    Animation: 1s $ i * 0,08s Opacityloader Infinite;
  }
}
@keyframes opacityloader {
 à {opacité: 0; }
}

Ce code SASS concis obtient le même résultat qu'un équivalent beaucoup plus long dans la vanille CSS:

 .Loader: Nth of-Type (1) {
  Animation: 1s 0,08S Opacityloader Infinite;
}
.Loader: Nth of-Type (2) {
  Animation: 1s 0.16S Opacityloader Infinite;
}

/ * ... * /

.Loader: Nth of-Type (12) {
  Animation: 1s 0.96S Opacityloader Infinite;
}
@keyframes opacityloader {
  à {opacité: 0; }
}

3. Une idée de galerie

La combinaison de la compétence en boucle SASS et la nécessité d'un chargeur ont conduit au concept d'un générateur de chargeur, s'attaquant à une lacune perçue dans les ressources en ligne facilement disponibles.

Double sortie d'animation: Smil et Sass

Les premiers défis de développement avec la sortie SASS ont conduit à l'inclusion de l'animation SMIL comme alternative. Cependant, les deux options ont finalement été intégrées, malgré la divergence occasionnelle de la sortie.

Smil vs CSS / SASS: Différences clés

Le processus de développement a mis en évidence plusieurs distinctions clés:

• Indépendance des ressources: SMIL anime directement dans le balisage SVG, contrairement à CSS ou SASS.
• Image Image: les animations SMIL persistent lorsque le SVG est utilisé comme image ou arrière-plan.
• Fluidité de l'animation: les animations SMIL semblent souvent plus lisses, bien que la raison précise reste claire.
• Chaîne d'animation: additive="sum" dans SMIL ajoute séquentiellement les animations, tandis que CSS / SASS hiérarchise la dernière déclaration d'animation pour les propriétés conflictuelles.
• Manipulation de la transformation: les transformations ont nécessité une solution de contournement en SASS pour atteindre la parité avec le comportement de Smil, nécessitant l'utilisation de<g></g> Éléments pour encapsuler les formes.

Pile technologique: Vue.js et nuxt.js

Le projet exploite Vue.js pour son architecture basée sur des composants, la liaison intuitive des données et la facilité de gestion de HTML et SVG. Nuxt.js fournit un environnement de développement rationalisé avec des fonctionnalités telles que le routage automatique et l'optimisation SEO.

Exemple d'utilisation du chargeur

La flexibilité du générateur permet de diverses méthodes d'intégration:

• SMIL SVG comme image d'arrière-plan: téléchargez le SVG généré et utilisez-le comme image d'arrière-plan CSS.
• Incorporation directe HTML: intégrez le code SVG généré directement dans le HTML.
• Intégration de la boucle SASS: utilisez la boucle SASS générée pour animer le SVG en ligne.

Développement continu et améliorations futures

Les plans futurs comprennent l'ajout d'une troisième option de style pour une manipulation SVG à élément unique plus simple, à relever les défis dans la gestion des paramètres d'animation personnalisés et l'amélioration de la clarté du code. La nature open source du projet accueille les contributions et les commentaires.

Le parcours du projet, initié par une simple boucle SASS, présente la puissance et la polyvalence des animations SMIL, malgré les problèmes de dépréciation passées. Bien que le support du navigateur doit être vérifié (en utilisant des ressources comme Caniuse), la situation actuelle indique une viabilité continue. Les tables de support détaillées du navigateur sont omises ici par concision.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!