Créer et animer des polygones SVG

Sep 12, 2025

Comment

[dix] [dix] [dix]

[dix]

Dans ce tutoriel, nous créerons une gamme d'images sur les triangles SVG et la configuration d'une transition animée d'une image à une autre en cas de clic. Ça va chercher quelque chose comme le Visages de pouvoir site Internet. Ces animations peuvent vraiment ajouter des intérêts à un site, en particulier un page d'atterrissage ainsi que d'améliorer expérience utilisateur . Si vous avez un site complexe à entretenir, vous aurez besoin d'un super hébergement Web un service. Construire quelque chose de moins compliqué? UNE Générateur de site Web pourrait faire le travail.

[dix]

Pour démarrer, nous allons commencer avec deux tableaux: une avec les valeurs que nous anime et une avec les valeurs que nous anime. Chaque fois qu'un lien est cliqué, nous allons trouver le SVG qui correspond à la href de ce lien et obtenez le points attribut de chacun des polygones dans ce SVG spécifique.

Nous allons extraire toutes les coordonnées dans le points Attribut, obtenez la couleur de remplissage du polygone, puis ajoutez-les comme propriétés d'un objet. Ensuite, nous ajouterons tous ces objets à l'une des deux tableaux: le à déployer.

Nous utiliserons Tweenmax pour animer les valeurs de la de tableau sur les valeurs de la à déployer. Lorsque l'animation est complète, nous allons définir le à tableau pour devenir le nouveau de déployer.

Sur la première course, le de Le tableau contiendra toutes les valeurs de points et toutes les couleurs de remplissage des polygones actuellement visibles.

[dix]

 & lt; un href = "# NAT" & GT; NAT & LT; / A & GT;
& lt; un href = "# BWL" & GT; BWL & LT; / A & GT;
& lt; un href = "# kevin" & gt; kevin & lt; / a & gt;

& lt; svg classe = "titulaire SVG" & gt;
  Les polygones pour #nat vont ici
& lt; / svg & gt;

& lt; svg id = "NAT" Classe = "caché" & gt;
 Les polygones pour #nat vont ici
& lt; / svg & gt;

& lt; svg id = "bwl" classe = "caché" & gt;
 Les polygones pour #bwl vont ici
& lt; / svg & gt;
& lt; svg id = "kevin" classe = "caché" & gt;
 Les polygones pour #Kevin vont ici
& lt; / svg & gt;

01. Convertir des images en polygones

two images before and after Primitive — Comment l'image sera-t-elle avant et après avoir été courante à travers la primitive

La première étape consiste à faire en réalité les images. Pour cela, j'ai utilisé un outil appelé Primitif (Vérifiez Github repo ). Les images utilisées dans le didacticiel sont des images personnelles de quelques amis.

Exécutez vos images choisies via l'utilitaire primitif à l'aide de la ligne de commande:

 Primitive -I sais d'entrée.jpg -o sortie.svg -n 250-m 1

-n 250 Spécifie 250 polygones, -m 1 Spécifie une forme triangulaire, et -Je entrée.jpg -o sortie.svg sont l'entrée et la sortie. Il est important que tous les SVG ont le même nombre de polygones et ont la même forme. Sortie.svg sera une collection de polygones.

02. Collez vos SVGS dans le HTML

Après avoir créé les SVGS la collant dans le corps du HTML. Dupliquer le premier SVG et donner l'un des doublons de la classe .svg-titulaire .

Le .svg-titulaire va être le seul qui est techniquement visible; Ce sera le titulaire de tous les polygones qui sont animés et hors de celui-ci. Donnez tous les SVG sauf le titulaire de la classe caché Et un identifiant avec un nom unique. Cela devrait correspondre à la href dans les liens. Les SVG cachés seront cachés avec Affichage: Aucun; . Il est important de s'assurer que le href de chaque lien correspond à la identifiant de son SVG respectif.

Puis déclarez les variables:

 Laissez Topolygonarray = [];
Soit de Polygonarray = [];

03. Extraire des coordonnées de polygone

Nous devons maintenant passer à travers chacun de nos polygones et obtenir les coordonnées dans l'attribut Points. Nous pouvons faire cela à l'aide de Regex:

 const getcoordinates = (polygone) = & gt; {
  retour polygone.getatTtribute ("points"). Match (/ (-? [0-9] [0-9 \.] *), (-? [0-9] *) \ (0-9 \.] *) \ ( -? [0-9] [0-9 \.] *), (-? [0-9] [0-9 \.] *) \ (-? [0-9] [0-9 \.] *), (-? [0-9] [0-9 \.] *) /);
};

04. Mettez à jour les matrices de polygones

[dix]

image saved as an SVG with text — Enregistré comme un SVG, tous les triangles deviennent des éléments

Chaque fois qu'un lien est cliqué, nous allons exécuter une fonction qui prend le HREF du lien cliqué sous forme d'argument et trouvez le SVG correspondant, obtenez les valeurs de points, l'animer et mettez à jour le tableau de la matrice.

 const updatepolygonarrays = (idtoanimateto) = & gt; {
  topolygonarray = CreepolygonPointSObject (document.getelementByID (idtoanimateto) .Queryselectorall ("polygone"));

  animatepolygons ();

  de Polygonarray = Topolygonarray;
}

Cette fonction appelle deux autres fonctions - CreepolygonPointsObject et animatpolygons .

CreepolygonPointsObject convertit tous les éléments de polygone en objets que nous pouvons animer les valeurs de, et animatpolygons Animalise les polygones à l'intérieur .svg-titulaire .

 const CreepolygonPointsObject = (polygones) = & gt; {
  const polygonsarray = [];

  polygones.foreach ((polygone, i) = & gt; {
    Conscons coordonnées = getcoordinates (polygone);

    polygonsarray.push ({
      Remplir: Polygon.getatTtribuer ("Remplir"),
      un: coordonnées ,
      Deux: coordonnées ,
      trois: coordonnées ,
      quatre: coordonnées ,
      cinq: coordonnées ,
      Six: coordonnées 
    });
  });

  retourner polygonarray;
}

Cela utilise notre getcoordinate Fonction Pour obtenir toutes les coordonnées de l'attribut Points et crée un objet avec chaque coordonnée et le remplissage. Il renvoie une gamme d'objets. J'ai décidé de les faire des objets car ce type de données semble être plus facile à travailler lorsque vous animez beaucoup de valeurs à la fois.

05. Animez les polygones

Two images made up of SVG polygons — Dans la version finale, les polygones SVG transition via une animation

Utilisons Tweenmax pour animer les polygones.

 const animatepolygons = () = & gt; {
  const polygones = document.QuerySelector (". SVG-titulaire"). QuerySelectorall ("polygone");
  de Polygonarray = CreatepolygonPointSObject (polygones);

  de Polygonarray.foreach ((Obj, I) = & GT; {
    Tweenmax.to (obj, 1, {
      un: topolygonarray [i] .One,
      deux: topolygonarray [i] .two,
      trois: topolygonarray [i] .three,
      quatre: topolygonarray [i] .four,
      cinq: topolygonarray [i] .five,
      six: topolygonarray [i] .six,
      Facilité: Power3.easeout,
      ONUPDate: () = & gt;
      {
        polygones [i] .setatTtribute ("points", `$ {obj.one}, $ {obj.two} $ {obj.three}, $ {obj.five}, $ {obj.five}, $ {obj.five}, $ {obj.five} } `);
      }
    });
  });
}

Sur chaque image de l'animation, cette boucle anime l'attribut Points des polygones actuellement visibles dans .svg-titulaire aux nouvelles valeurs définies ci-dessus. Le surpasser Méthode dans Tweenmax.to est appelé à chaque fois que les mises à jour de l'animation, alors voilà courir sur chaque changement des valeurs de obj.one , obj.two , obj.three , etc. De cette façon, les points des points animent et la forme se transforme pour avoir des coordonnées différentes.

Ensuite, nous pouvons animer le remplissage. Pour chaque polygone dans .svg-titulaire , réglez le remplissage dans le remplissage dans le topolygonarray c'est dans le même indice.

 polygons.foreach ((polygone, i) = & gt; {
    const tocolor = topolygonarray [i] .fill;

    Tweenlite.to (polygone, 1, {
      remplir: tocolor,
      Facilité: Power3.easeout
    });
});

Maintenant, les polygones animeront leurs coordonnées et leurs couleurs de remplissage comme prévu. Et tu as fini! Vous voulez enregistrer vos pages? Exportez-les comme pdfs et déposez-les dans stockage en ligne .

Pour améliorer encore vos compétences en matière de conception Web, dirigez-vous vers notre conférence générer et expérimentez un calendrier emballé d'orateurs, d'ateliers et d'opportunités de réseautage précieuses. Ne manquez pas ça! Obtenez votre billet de génération maintenant .

Lire la suite:

Le guide complet de svg
Animate svg avec javascript
30 meilleurs outils de conception Web pour accélérer votre flux de travail

[dix] [dix]

[dix]

Créer et animer des polygones SVG

01. Convertir des images en polygones

02. Collez vos SVGS dans le HTML

03. Extraire des coordonnées de polygone

04. Mettez à jour les matrices de polygones

05. Animez les polygones

Comment - Most Popular Articles

Comment créer une créature fantastique super réaliste

Créer des portraits illustrés des photos

3 conseils pour créer un superbe matériel promotionnel d'impression

Construisez des applications qui fonctionnent hors ligne

Comment dessiner avec l'affinité Photo pour iPad

Comment ajouter de la texture à vos pastels avec des amorces

Comment sculpter un gobelin à imprimé 3D

Comment sculpter et poser une tête de dessin animé dans zbrush

Catégories