13-Morphage SVG

Introduction à morphSVG

MorphSVGPlugin vous permet de faire une transition de forme, d'une forme SVG à un autre.

Installation de morphSVG

Comme pour tout plugiciel (plugin) GSAP, afin d'avoir accès à ses fonctionnalités, il est nécessaire d'avoir incorporé la librairie GSAP préalablement et d'ajouter ensuite le plugiciel dans le projet.

Pour ce faire, il est possible:

D'utiliser un lien hébergé en ligne (comme ce pluciels-ci n'est pas gratuit, allez cocher le plugiciel dans l'onglet codePen, ensuite cliquer sur le bouton "Copy URL" en bas, à côté de MorphSVGPlugin et ajouter dans une balise script). Cependant, il ne sera utilisable qu'en local (sur votre ordi) ou directement sur codePen.

Une fois chargé, il est conseillé d'indiquer à GSAP que MorphSVG est disponible en inscrivant la ligne de code suivante:

gsap.registerPlugin(MorphSVGPlugin); MorphSVGPlugin n'est pas gratuit. Pour l'utiliser dans un projet hébergé sur un serveur Web, vous devez être membre du Club GSAP. Heureusement vous pouvez tout de même l'utiliser en local ou encore sur CodePen en ajoutant les liens des plugiciels GSAP nécessaires fournis ici . Le principe de base

Dans une balise SVG, vous devez avoir 2 tracés (path) différents. Bien les identifier chacun ait avec un id ou une classe unique.

Il faudra penser, via CSS, à cacher la visibilité du deuxième tracé (path).

#hippo{ visibility:hidden; }

Par la suite, il suffit d'animer le premier tracé (path) avec la propriété morphSVG. La valeur de morphSVG sera l'élément HTML correspondant au 2e tracé (path).

gsap.to("#circle", { morphSVG: "#hippo" }

Voici la démo

MorphSVGPlugin trouve le tracé (path) avec l'id "#circle" et le tracé (path) avec l'identifiant "#hippo" et trouve automatiquement comment ajouter suffisamment de points au cercle et les positionner correctement afin d'obtenir une transition en douceur vers la forme hippo. Il va déchiffrer toutes les données du 2e tracés, les convertir en béziers cubiques, et les subdiviser dynamiquement si nécessaire, en ajoutant des points pour que les quantités de points de début et de fin correspondent (mais visuellement, c'est la même chose). Tout cela se fait de manière transparente sous le capot du plucigiel.

Et comme MorphSVGPlugin est étroitement intégré à GSAP, l'enchaînement de plusieurs morphages est un jeu d'enfant. Regardez comme il est facile de transformer un cercle en hippopotame, en étoile et en éléphant via une timeline.

Utilisation d'un objet

Il est possible de raffiner le comportement d'une animation morphSVG. Pour ce faire, il faut utiliser un objet JavaScript {} pouvant contenir plusieurs propriétés et valeurs plutôt qu'une valeur texte comme dans l'exemple précédent.

Par exemple, convertissons la valeur textuelle de l'exemple en objet.

On remarque que la propriété permettant de définir le tracé de fin est maintenant spécifiée et s'appelle shape.

Évitez les brouillons avec shapeIndex

Afin que votre forme ne se mélange pas en chiffon avant de reformer l'autre forme, il est parfois nécessaire de spécifier quel point de départ est relié à quel point final dans la nouvelle forme. Pour cela, il faut utiliser la propriété shapeIndex.

gsap.to("#square", { duration: 3, morphSVG:{ shape:"#star", shapeIndex:5 } });

Cependant, il n'est pas toujours évident de savoir quel point ira avec quel point, c'est pourquoi je vous recommande de:

faire un fork du codePen suivant
conserver la fonction JavaScript qui est déjà écrite, nommée findShapeIndex()
ajouter vos propre forme svg dans le HTML (en identifiant les 2 tracé (path))
animer vos 2 formes avec la méthode to() et la propriété morphSVG
appeler la fonction findShapeIndex() en passant vos 2 formes en paramètre afin de déceler quel serait le meilleur point shapeIndex
vous pouvez utiliser la boite + et - dans l'interface pour tester et trouver vous même le meilleur point de référence pour shapeIndex

Autre exemples: