Des animations Web sans CSS ni JavaScript ? C’est possible !

J’avais déjà vu SMIL plusieurs fois avant, mais j’ai découvert sa puissance associé à SVG grâce ๠Jérémie Pattonnier avec son Lightning Talk « W3C Sentaï Team » à Paris Web 2011.

Si vous ne l’avez pas encore vue, il s’agit d’une animation, en SVG complètement scriptée en SMIL, qui parle des Super Héros du Web, et elle est heureusement encore visible sur son blog.

« W3C Sentaï Team » par Jérémie Patonnier avec des illustrations de Corinne Massacry

En moins de 5 minutes, Jérémie m’a motivé à développer en technologies Web standards un jeu que j’avais inventé en 1992, codé à l’époque en RPL sur calculette graphique HP 48.

Mais quand on parle de « jeu HTML5 », on sous-entend dans 99,99% des cas « jeu développé avec la balise Canvas de HTML5 ». Alors que j’ai décidé de profiter de l’élasticité totale du SVG pour être adapté nativement à toutes tailles d’écrans, et ce jeu a gagné un nom au passage, jeu de mot évident sur la technologie utilisée, « esviji ».

Si vous jouez à ce jeu², vous verrez des animations de balles, translations, rotations, effets de transparence, etc. Toutes ces animations sont générées en JavaScript puisque dépendant de vos actions, mais les animations en elles-mêmes ne sont ni en CSS ni en JS, c’est bien du SMIL qui est généré.

La meilleure preuve, c’est le tutoriel qui est intégré au jeu, qui n’est qu’une grosse combinaison de nombreuses animations SMIL synchronisées de façon entièrement statique et déclarative.

J’ai extrait ce tutoriel du jeu et l’ai placé sur CodePen pour que vous vous rendiez bien compte :

See the Pen Animating SVG with SMIL (not any CSS or JS) by Nicolas Hoizey (@nhoizey) on CodePen.

Je suis en train de travailler³ sur une grosse refonte du jeu pour une version 2, qui intègrera notamment du vrai responsive permettant de mieux exploiter des écrans en mode portrait ou paysage, voire même carré. Mais je vais surtout supprimer SMIL et passer à des animations scriptées en JS. SMIL n’est en effet pas destiner à perdurer, les animations Web du futur commençant à arriver, et Microsoft ayant clairement annoncé ne jamais supporter SMIL dans Internet Explorer.

Je me dirigerais sans doute vers la librairie Snap.svg que l’on me vente beaucoup, mais je suis plutôt sur l’interface pour l’instant donc le choix n’est pas encore figé. Je veux aussi en profiter pour revoir complètement mon code JS qui fait peur à voir.

Il faudra donc sans doute attendre encore des mois avant de voir quoi que ce soit… ;-)