\nCelle-ci propose diff\u00e9rents types d’animation par d\u00e9faut et un syst\u00e8me de mise en place de sc\u00e9nario.<\/p>\n
![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/vivus-path-svg.png\")
<\/p>\n
Comment fonctionne-elle ?<\/h2>\n
Pour cr\u00e9er ses diff\u00e9rentes animations, le script utilise la propri\u00e9t\u00e9 CSS L’animation se d\u00e9roule toujours en \u00ab\u00a0dessinant\u00a0\u00bb les \u00e9l\u00e9ments dans le m\u00eame ordre, dans l’ordre d’apparition des tags SVG.<\/p>\n Ce code est inspir\u00e9 d’autres travaux existants. Le script qui dessine les trac\u00e9s est inspir\u00e9 de l’article SVG Drawing Animation<\/a> (ressources que je diffuse r\u00e9guli\u00e8rement dans les Ressources du Web<\/a> ou sur mon compte Twitter<\/a>). La classe pathformer est inspir\u00e9e de SVGPathConverter de Waest<\/a>.<\/p>\n C’est relativement simple, \u00e0 partir du moment o\u00f9 vous avez votre trac\u00e9 SVG. Je ne vais pas vous apprendre \u00e0 faire du dessin vectoriel :p<\/p>\n Une fois l’animation initialis\u00e9e vous avez acc\u00e8s \u00e0 3 m\u00e9thodes pour contr\u00f4ler l’animation : Les types scenario permettent \u00e9galement de jouer avec un sc\u00e9nario plus pr\u00e9cis dont les \u00e9tapes sont d\u00e9finies directement dans des attributs data-* pos\u00e9s sur les composants du SVG directement. Amusez-vous bien !<\/p>\n T\u00e9l\u00e9charger le script vivus.js<\/a> Consulter la doc et les d\u00e9mo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" L’utilisation du SVG est de plus en plus fr\u00e9quente dans la composition de nos \u00e9l\u00e9ments d’illustration, nos logotypes ou encore nos ic\u00f4nes. L’un des avantages du SVG est sa capacit\u00e9 \u00e0 s’adapter \u00e0 tout type de densit\u00e9 de pixels. Un autre avantage est sa capacit\u00e9 \u00e0 h\u00e9riter de styles CSS et la possibilit\u00e9 d’animation.<\/p>\n","protected":false},"author":4,"featured_media":4414,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[50,12],"tags":[120,93,125,305],"coauthors":[597],"class_list":["post-4388","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources-telechargements","category-veille-technologique","tag-animation","tag-icones","tag-javascript","tag-svg"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/4388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=4388"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/4388\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/4414"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=4388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=4388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=4388"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=4388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}strokeDashoffset<\/code> des \u00e9l\u00e9ments de trac\u00e9. Cette propri\u00e9t\u00e9 g\u00e8re le d\u00e9calage du trac\u00e9 de chaque ligne du SVG. Ajoutez un peu de JS pour mettre \u00e0 jour la valeur de d\u00e9calage progressivement et la magie fait son effet.
\nMalheureusement, il y a un probl\u00e8me avec cette propri\u00e9t\u00e9 qui n’est disponible que sur l’\u00e9l\u00e9ment path<\/code>. Donc si vous utilisez des circle<\/code>, rect<\/code>, line<\/code> ou polyline<\/code>, l’animation ne fonctionnera pas. \u00c0 cause de cela, une autre classe est disponible dans le r\u00e9pertoire du projet, appel\u00e9e pathformer<\/code>. Son but est de transformer tous les objets de votre SVG en \u00e9l\u00e9ments path<\/code> afin que la propri\u00e9t\u00e9 puisse \u00eatre utilis\u00e9e et animer votre SVG.<\/p>\n![\"Animation](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/vivus-animation.gif\")
<\/a><\/p>\nComment l’utiliser ?<\/h2>\n
\n
<\/body><\/code> chargez les deux fichiers comme suit :\n<script src=\"assets\/js\/vivus.js\"><\/script><\/code><\/pre>\n<\/li>\n<script>\r\nvar anim1 = new Vivus(\r\n 'animation-id', \r\n {\r\n type: 'delayed',\r\n duration: 150,\r\n start: 'autostart',\r\n delay: 10, \/\/seulement pour le type \"delayed\"\r\n selfDestroy: false\r\n },\r\n function() {\r\n \/\/ fonction de callback\r\n }\r\n);\r\n<\/script><\/code><\/pre>\n<\/li>\n<\/ol>\nplay<\/code>, stop<\/code> et reset<\/code> \u00e0 utiliser comme suit :<\/p>\nanim1.reset();\r\nanim1.play();<\/code><\/pre>\n
\nPour plus de d\u00e9tail, je vous renvoie sur la documentation officielle<\/a>.<\/p>\n