Le morphing est une technique qui consiste à animer des éléments en SVG pour les faire passer d’un état A à un état B avec une transition. Cela vous paraît peut-être bien nébuleux expliqué ainsi. Tentons d’être plus clair !
Le SVG est un format d’image destiné à des formes simples (carré, étoile, cercle, etc). En effet, les coordonnées des points qui forment l’image sont enregistrées et peuvent être modifiées dans le code. L’image n’est alors plus un fichier statique, mais un ensemble de lignes de code permettant aux logiciels/navigateurs d’interpréter ces informations pour afficher la forme. Ce format est donc très adapté au web car nous pouvons agir sur cette forme de manière dynamique. Vous voyez sur la figure suivante que nos points, et donc nos angles, changent de position, et la « shape », autrement dit la forme, bouge également.
Le morphing consiste à animer les points qui constituent la forme pour transformer l’élément en un autre élément. Il faut donc que les deux éléments possèdent le même nombre de points : on ne fait que les déplacer pour obtenir un effet de fluidité. Quel est sont intérêt ? C’est purement esthétique ; tout peut se faire sans svg et sans animation, mais cela reste assez pertinent ergonomiquement parlant. Par exemple, une loupe présente dans la barre de recherche peut se transformer en croix. Ici plusieurs étapes : le rond (qui possède deux points) se transforme en trait en passant par un état « ovale », puis le second trait vient se replacer :
Ou encore le hamburger d’un menu mobile en flèche. Ici les deux traits vont se redimensionner, pivoter et enfin se placer à droite.
On peut tout faire avec le morphing, du plus simple au plus complexe, bien qu’il ne soit pas obligatoire de tout réaliser en SVG. En effet, on peut y ajouter d’autres éléments simples (comme un carré) qui va bouger et se redimensionner simplement en css. Tant que la forme reste la même, le SVG n’est pas une obligation pour animer et transformer un élément. D’autres moyens existent.
C’est moins difficile qu’il n’y paraît et il existe de nombreux tutoriels. Il faut comprendre certains principes : le morphing est lié au SVG qui, lui même, est entre deux mondes : le code et le graphisme. D’où une compétence qui n’entre pas pleinement dans un seul métier (développeur ou graphiste). Je vous recommande l’article de Chris Coyier traduit ici , qui pas à pas va vous aider à construire votre premier morphing en SVG. Il existe également des logiciels permettant, sans coder, de créer votre SGV ainsi que le morphing lié. GreenSock propose un logiciel à cet effet. Il semble même que GreenSock s’affranchit de la limite qu’impose le morphing, à savoir le même nombre de points entre deux formes.
Le principal problème du morphing est d’être long et donc coûteux. De plus, il est encore assez méconnu et un client ne vous le demandera pas forcément. C’est pourquoi on voit rarement du morphing sur des sites. Il est plutôt destiné à des portfolios ou des sites d’agences/de sociétés, pour montrer son savoir-faire. Je vous invite à découvrir ce sujet plus amplement. Il est par sa nature assez « complexe » à appréhender, d’où l’intérêt d’un article digeste et assez court (pour le faire découvrir au plus grand nombre).
Que pensez-vous du morphing? L’avez-vous déjà utiliser pour le développement web de votre site?
Si cet article vous a plu, nous vous invitons à découvrir notre agence developpement web et à télécharger notre livre blanc « Les 11 commandements d’un site internet qui convertit vos visiteurs en clients »