Comment animer un SVG avec l'image de bordure

Créer des effets de bordure dynamique à l'aide de l'attribut border-image de CSS et de SVG animé

Cet article présentera comment combiner l'attribut border-image de CSS et de SVG animé pour créer un effet d'animation SVG dynamique entourant la frontière. Nous apprendrons comment les SVG animés à neuf grilles résidants à la main qui peuvent non seulement reproduire cet effet, mais aussi le personnaliser en fonction de vos besoins.

L'effet final est le suivant:

Cette animation fait en fait partie d'un puzzle de prise de drapeau que je développe appelé "le crâne" pour explorer la structure interne de l'Arduino et de son microcontrôleur. J'ai cherché comment créer une bordure animée comme celle-ci, mais je n'ai trouvé aucun exemple utile. La plupart des contenus que j'ai trouvés sont liés à l'effet "Ant March", mais malheureusement, l'astuce stroke-dasharray ne fonctionne pas avec les crânes, et encore moins des formes plus complexes.

Par conséquent, dans un esprit d'apprentissage et de partage, je partagerai mon expérience avec vous ici!

Dois-je utiliser background ou border-image ?

Au début, je ne connaissais même pas l'existence de border-image . Dans ma première tentative, j'ai essayé d'utiliser ::before pseudo-élément et animer son attribut background-position . Les résultats sont les suivants:

Comme vous pouvez le voir, cette méthode fonctionne, mais pour terminer toute la frontière, au moins huit éléments différents (ou pseudo-éléments) sont nécessaires. Cela confondera le code HTML et n'est pas idéal.

J'ai posté une question dans le groupe Facebook du développeur CSS israélien et tout le monde a souligné border-image . Il correspond exactement à ce qu'il s'appelle: utilisez une image (ou un gradient CSS) comme bordure de l'élément.

Pour utiliser border-image vous devez fournir une image qui est utilisée de manière à neuf grilles (imaginez superposer une grille d'orteil tic sur l'image). Chacune de ces neuf zones représente une partie différente de la frontière: le haut, la droite, la gauche et le bas, les quatre coins et le milieu (la partie centrale sera ignorée).

Par exemple, si nous n'avons besoin que de crânes statiques, nous pouvons utiliser le motif SVG pour répéter les crânes neuf fois. Tout d'abord, nous utilisons le chemin du crâne pour définir un motif 24 × 24, puis utilisons ce motif comme un remplissage pour le rectangle 72 × 72:

<svg height="72" version="1.1" width="72" xmlns="http://www.w3.org/2000/svg"><defs><pattern height="24" patternunits="userSpaceOnUse" width="24"><path d="..." fill="red"></path></pattern></defs><rect fill="url(#skull-fill)" height="72" width="72"></rect></svg>

Ensuite, nous définissons une bordure et définissons border-image de l'élément cible: nous

 .skulls {
  Border: 24px solide transparent;
  Border-Image: URL ("https://skullctf.com/images/skull-9.svg") 24 tour;
}

De cette façon, nous obtenons une frontière composée de crânes:

Ajouter l'animation SVG

Maintenant, nous pouvons ajouter des animations à ces crânes! Cela fonctionne bien la plupart du temps.

L'idée est de créer différentes animations pour chaque zone de l'image de bordure. Par exemple, dans le coin supérieur gauche, nous avons un crâne se déplaçant de droite à gauche, tandis que l'autre crâne se déplaçant de haut en bas en même temps.

Nous animerons transform pour réaliser l'effet de mouvement. Nous utiliserons également SVG<use></use> Éléments pour éviter de longues répétitions répétées pour chaque crâne<path></path> définition:

<svg height="96" version="1.1" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  @KeyFrames Left {to {transform: tradlate (-32px, 0)}}
  @KeyFrames Down {to {transform: tradlate (0, 32px)}}
 <defs><path d="..." fill="red"></path></defs><use href="#skull" style="animation: down .4s infinite linear" x="0" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="32" y="0"></use></svg>

La syntaxe d'animation SVG ici peut sembler familière, car ce n'est pas une sorte de syntaxe spécifique à SVG, comme SMIL, mais utilise des animations CSS. Très cool, non?

L'effet final est le suivant:

Si nous ajoutons une grille, nous pouvons voir que cette animation couvre également une partie des bords supérieurs et gauche:

Après avoir ajouté les trois bords restants, il semble plus impressionnant, couvrant ainsi complètement huit zones de l'image de la bordure:

<svg height="96" version="1.1" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  @KeyFrames Left {to {transform: tradlate (-32px, 0)}}
  @KeyFrames Down {to {transform: tradlate (0, 32px)}}
  @KeyFrames Right {to {transform: tradlate (32px, 0)}}
  @keyframes up {to {transform: tradlate (0, -32px)}}
 <defs><path d="..." fill="red"></path></defs><use href="#skull" style="animation: down .4s infinite linear" x="0" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="32" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="64" y="0"></use><use href="#skull" style="animation: up .4s infinite linear" x="64" y="32"></use><use href="#skull" style="animation: down .4s infinite linear" x="0" y="32"></use><use href="#skull" style="animation: right .4s infinite linear" x="0" y="64"></use><use href="#skull" style="animation: right .4s infinite linear" x="32" y="64"></use><use href="#skull" style="animation: up .4s infinite linear" x="64" y="64"></use></svg>

Cela nous fournit une boucle complète:

Allons tout ensemble et nous utilisons le SVG d'animation que nous venons de créer comme border-image pour obtenir le résultat souhaité:

Je peux jouer ça toute la journée ...

Quand je l'ai fait fonctionner, j'ai commencé à ajuster les propriétés d'animation. C'est l'un des avantages de l'utilisation de SVG au lieu du GIF: changer la nature de l'animation est aussi simple que de modifier une propriété CSS dans le fichier source SVG, vous pouvez voir les résultats immédiatement, sans parler des tailles de fichiers plus petites (en particulier lorsque vous traitez avec les gradients), la prise en charge des couleurs et la mise à l'échelle claire.

Tout d'abord, j'essaie de voir à quoi cela ressemblerait si je change la fonction de synchronisation d'animation pour ease :

Nous pouvons également faire disparaître le crâne entre le rouge et le vert:

Nous pouvons même faire changer la direction du crâne lorsqu'il se déplace autour du tableau de score élevé:

Vous pouvez accéder à l'onglet JavaScript où vous pouvez ajuster le code source SVG et l'essayer vous-même.

Éléphant dans la pièce (ahem, firefox)

Quand je l'ai fait travailler, j'étais tellement heureuse. Cependant, il y a certaines choses auxquelles vous devriez faire attention. Le premier et le plus important est que pour une raison quelconque, Firefox ne rend pas des animations sur les bords des frontières, seulement des animations dans les coins:

Fait intéressant, si je change le SVG en un GIF avec la même animation, cela fonctionne parfaitement. Cependant, les animations de bord sur Chrome Stop! ? ‍️

Quoi qu'il en soit, cela semble être une erreur de navigateur, car Firefox anime les bords si nous modifions border-image-repeat pour stretch , mais le résultat est un peu bizarre (bien qu'il puisse s'adapter au sujet de la page):

La modification border-image-repeat à space semble également fonctionner, mais seulement si la largeur de l'élément n'est pas un multiple entier de la taille du crâne (dans ce cas 32 pixels), ce qui signifie qu'il y aura quelques lacunes dans l'animation.

J'ai également constaté que lorsque la taille du conteneur n'est pas un multiple de la taille du patch (dans ce cas 32 pixels), il y a des problèmes visuels comme de minuscules lignes noires sur le crâne. Je soupçonne que cela a quelque chose à voir avec un problème d'arrondi à point flottant. Il a également tendance à se casser lors du zoom.

Pas parfait, mais absolument fini! Si vous voulez voir la version finale, vous pouvez visiter la page de score élevé de "The Skull". J'espère que vous verrez votre nom bientôt!

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!