23: Animation SVG avec SMIL - Astuces CSS

Anonim

Même si l'animation de SVG avec CSS peut être plus confortable pour le front-end moyen, SVG a une autre façon de faire une animation intégrée directement dans la syntaxe SVG elle-même. C'est exactement ce que nous couvrons en bref dans cette vidéo, mais si vous voulez un guide de référence complet, jetez un œil à A Guide to SVG Animations (SMIL) de Sara Soueidan ici sur CSS-Tricks.

SMIL signifie Synchronized Multimedia Integration Language. Si je comprends bien, c'est une «chose» en soi qui se trouve être intégrée dans SVG. Mais SVG a quelques-uns de ses propres ajouts de type SMIL. Je parlerai simplement de tout cela comme SMIL même si je suis sûr que je suis parfois techniquement incorrect.

Pour des animations très simples, peu importe si vous le faites en SMIL ou CSS, cela fera la même chose à peu près au même niveau de difficulté. Certaines choses pourraient même être plus faciles en CSS. Mais voici certaines choses où SMIL est la voie à suivre:

  • Vous devez animer quelque chose que CSS ne peut pas toucher. Comme la forme d'un polygone ou d'un chemin.
  • Vous souhaitez utiliser des événements pour affecter l'animation, comme un clickou mouseoverou quelque chose.
  • Vous voulez faire des animations additives, comme animer où que vous soyez maintenant un autre x pixels.
  • Vous voulez avoir des animations qui se rapportent directement à d'autres animations, comme, lorsque cette animation se termine, lancez cette prochaine animation (sans manipuler manuellement les durées).
  • Je suis sûr qu'il y en a d'autres.

La syntaxe semble intimidante au début, mais c'est vraiment assez facile, je le promets. Voici un exemple de base:

Voir le Pen jAipI de Chris Coyier (@chriscoyier) sur CodePen.

Le truc du «morphing de forme» est vraiment super unique avec SMIL, alors voici un meilleur exemple que l'étrange que nous avons fait dans la vidéo:

Voir le Pen Shape Morph Button de Chris Coyier (@chriscoyier) sur CodePen.

Dans cette démo, les événements sont gérés par JavaScript au lieu de SMIL. Content de savoir que vous pouvez le faire aussi. Les déclencheurs d'événements SMIL sont cool, mais la chose sur laquelle il faut cliquer doit être dans ce SVG plutôt que n'importe où ailleurs dans le DOM.