Les animations sur le Web, quelle techno pour quel usage ?

Ça bouge beaucoup en ce moment en matière de techniques d’animation sur le Web. D’un coté, Flash est malmené, de l’autre nous voyons apparaître les animations CSS. Quelles sont les technologies disponibles, quelles sont leurs limites et comment s’outille-t-on pour réaliser des animations sur le Web ? Je vous propose de faire le tour de l’état de l’art du sujet.

Avant de rentrer dans le vif du sujet, un petit rappel sur les animations et leurs usages. Il n’y a rien de plus pénible pour un internaute que de se retrouver face à un sapin de Noël clignotant. Les règles d’accessibilité liées à leurs usages sont d’ailleurs très claire : un internaute doit toujours pouvoir contrôler les animations qui se répètent ou qui durent plus de 5 secondes. Ceci dit, des animations bien pensées et bien utilisées peuvent donner de la vie et du relief à vos sites Web, en particulier avec des problématiques de « Story Telling ».

Le roi est mort, vive le roi

À tout seigneur tout honneur, commençons par parler de Flash. Depuis maintenant plus de 10 ans, c’est le format maître en terme d’animation sur Internet. Flash est bien plus qu’un simple outil d’animation, mais c’est cette capacité qui l’a fait émerger et qui lui a donné la popularité qu’on sait.

À bien des égards, sa plus grande force, c’est son IDE. En effet, même si nombre de flasheurs professionnels ne l’utilisent pas (en particulier les développeurs ActionScript), les designers bénéficient d’un environnement de création d’animations complet et mature. En utilisant un concept de « timeline », l’approche de l’animation est très intuitive. Cette intuitivité s’exprime également dans une approche WYSIWYG grâce à la possibilité de tout faire en glisser/déposer et de visualiser le résultat en temps réel. Avec plus de 10 ans de travail sur l’interface, aucun autre outil du marché n’est à même de rivaliser sur le rapport entre rapidité de prise en main et fonctionnalités disponibles (je me souviens encore la larme à l’œil le jour où j’ai découvert la fonctionnalité « pelure d’oignon » pour faire de l’animation image par image). C’est tout simplement ce qui se fait de mieux pour la production d’animations complexes (en dehors des solutions purement vidéo, évidement).

Ceci dit, ces derniers temps, Flash est chahuté et le trône du roi vacille. D’un côté, Apple a mis un coup de pied dans la fourmilière en refusant purement et simplement que cette technologie soit disponible sur ses machines équipées de iOS (iPhone, iPad, iPod Touch). Et même si l’on peut rétorquer qu’il est présent sur d’autres plateformes mobiles (Android et Windows Phone 7), l’intégration est loin d’être aussi bonne que sur les ordinateurs de bureau : les performances ne sont pas toujours au rendez-vous et le support navigateur reste difficile (par exemple, quand vous utilisez Firefox sur un téléphone Android). De facto, cela disqualifie Flash dans les environnements mobiles. D’un autre côté, Flash souffre de plus en plus de l’arrivée de CSS 3, de Canvas, de WebGL, du réveil de SVG et de manière générale des améliorations de performance apportées par les navigateurs en matière de Javascript. Tout cela contribue à rendre Flash de moins en moins attractif et pertinent pour créer des effets d’animation des interfaces. Certes, il a encore quelques cartes à jouer en matière d’animation traditionnelle, mais toutes ces nouvelles technologies marchent sur ses plates-bandes et elles le font au pas de course, avec des chaussures cloutées.

C’est nouveau, c’est frais, c’est wahou

Depuis peu, on assiste à un gros engouement autour d’une nouvelle technologie d’animation : les animations CSS. Jusqu’à présent, les feuilles de style en cascade étaient cantonnées au rôle d’outils de mise en forme statique. Avec CSS3, les choses changent en proposant 2 mécanismes d’animation :

-# Les transitions CSS : les propriétés de transition permettent de décrire comment animer à l’aide de méthodes prédéterminées le passage d’une valeur « A » à une valeur « B » pour certaines propriétés CSS.
-# Les animations CSS : ce mécanisme d’animation va un cran plus loin en permettant d’animer des changements complexes de valeurs selon des règles définies par les designers eux-mêmes.

Poussés par Apple et suivis par Google et Mozilla, les travaux avancent rapidement. Les principaux navigateurs modernes que sont Safari, Chrome et Firefox implémentent tous une version expérimentale de ces technologies (même Opera supporte les transitions). Le principal avantage de ce système d’animation, c’est qu’il offre de grandes possibilités aux designers et intégrateurs, tout en bénéficiant de la simplicité intrinsèque à la syntaxe CSS.

Ceci dit, même si Apple présente cette technologie comme une alternative crédible à Flash sur les plateformes iOS, on est bien loin du compte. Premièrement, le support navigateur reste partiel : Internet Explorer ne supporte ni les transitions ni les animations et Opera ne supporte pas les animations. Deuxièmement, La norme CSS3 est loin d’être à maturité sur ces questions ce qui conduira à des changements prévisibles et nécessaires (et donc dans les implémentations actuelles). Enfin les animations CSS souffrent de sévères limitations qu’il faut bien prendre en compte :

-# Elles ne permettent d’animer que des propriétés CSS. Ça paraît évident dit comme ça, mais cela a certaines implications. En particulier, ça veut dire qu’il n’est pas possible d’animer certains attributs HTML ou SVG dans la mesure où ils n’ont pas de contrepartie en CSS.
-# Elles souffrent encore de graves défauts d’accessibilité. À ce jour, une animation CSS ne peut pas être directement contrôlée par l’utilisateur. Il est impossible pour un utilisateur de l’arrêter ou de la déclencher quand il le veut ni même de se déplacer d’une image-clé à l’autre de l’animation.
-# Malgré quelques essais dans ce sens (Sencha Animator, Animatable), il n’existe pas d’IDE digne de ce nom pour produire des animations CSS de manière visuelle. Leur production reste donc encore du domaine de l’artisanat.

C’est dans les vieux pots qu’on fait les meilleures soupes

SVG est un standard du W3C qui, malgré son âge (quasiment 10 ans), reste encore mal connu. Il s’agit d’un format d’image vectorielle reposant sur une syntaxe XML. En dehors de tout ce qui permet de faire du dessin à part entière, il offre un mécanisme d’animation particulièrement riche et puissant. Ce mécanisme repose en partie sur un autre standard du W3C nommé SMIL. Si vous voulez vous faire une idée de ce que permet SVG, allez faire un tour sur le site [svg-wow.org->http://svg-wow.org/]

Les animations SVG sont un modèle d’animation particulièrement robuste et efficace. Les grandes forces de ce modèle se résument en trois points :

-# Il permet d’animer les attributs SVG et les propriétés CSS, ce qui permet de créer facilement des animations riches de type « dessin animé » ;
-# Il intègre nativement des mécanismes d’interaction qui permettent à l’utilisateur de contrôler facilement les animations, aussi bien à la souris qu’au clavier.
-# Il est synchronisé avec l’écoulement réel du temps, sans lien avec les capacités de calcul de l’ordinateur qui joue l’animation.

Avec la sortie de Internet Explorer 9, tous les navigateurs du marché supportent désormais le format SVG. Hélas, les animations SVG, elles, manquent encore dans ce navigateur. Pour combler le manque de support de SVG dans les vieilles versions de Internet Explorer, quelques développeurs ont créé des bibliothèques Javascript spécialement dédiées à cette usage. Les plus notables sont :

• RaphaelJS : cette bibliothèque utilise le format propriétaire VML de Microsoft pour émuler le support de SVG et permet d’animer les éléments SVG dans les navigateurs qui supporteraient SVG sans pour autant supporter les animations SVG.
• FakeSmile : cette bibliothèque propose un support partiel (mais largement suffisant) des animations SMIL, applicables aussi bien à SVG qu’à HTML. Malheureusement, avec le support natif des animations SVG en constante progression, son développement est arrêté.

||Récapitulatif du support des animations SVG par navigateur||
|Navigateur|Langage SVG|Animations SVG|
|Internet Explorer 8|Non[[Il est possible de lui offrir un support partiel avec RaphaelJS]]|<|
|Internet Explorer 9|Oui|Non[[Il est possible de lui offrir un support partiel avec RaphaelJS]]|
|Firefox|Oui|Oui|
|Safari|Oui|Oui|
|Chrome|Oui|Oui|
|Opera|Oui|Oui|
|Navigateur Android|Partiel[[Un support partiel est disponible uniquement à partir de Android 3.0]]|Non|

Ce problème de support multi-navigateurs fait que, malheureusement, la production d’animations SVG est, elle aussi, assez artisanale. Ceci dit, ce modèle d’animation reste, au moment où j’écris ces lignes, plus répandu et mieux supporté que les animations CSS sur les navigateurs de bureau (mais pas sur les mobiles à cause du navigateur natif d’Android qui ne supporte pas du tout SVG avant la version 3 de cette plateforme). De même, au niveau logiciel, on trouve sans difficulté des logiciels pour produire du SVG statique (Illustrator, Inkscape, etc.) mais aucun pour produire du SVG animé.

One ring to rule them all

Si vous avez un problème, si vous êtes seul, si personne ne peut vous aider, si vous êtes acculé, si les autres techniques d’animation ne peuvent plus rien pour vous, il vous reste un recours, un seul : l’Agence tous risques Javascript.

Bon, blague à part, Javascript c’est un peu le couteau Suisse du Web. Vous pouvez quasiment tout faire avec, et les animations ne dérogent pas à la règle. Javascript offre plusieurs possibilités d’animation. Historiquement, c’est la manipulation dynamique du DOM qui a posé les prémisses du sujet (à l’époque ou le « buzz word » c’était DHTML… bien avant AJAX). C’est toujours vrai, mais les choses se sont étoffées avec HTML5 et l’arrivée de la balise canvas et la toute récente fonction d’animation requestAnimationFrame proposée par Mozilla. L’étape suivante s’appelle WebGL, une véritable API 3D. Autant dire que là, on a du lourd de chez lourd… hop, hop, hop, pas si vite. Ok, c’est bien joli sur le papier, mais au quotidien, ce n’est pas si simple.

Javascript reste un langage de programmation et les API qui existent (DOM, Canvas2D ou WebGL) n’ont rien d’une partie de plaisir à prendre en main. Elles sont compliquées, et leur implémentation dans les différents navigateurs est encore loin d’être parfaitement harmonisée. Certes, pour éviter ces désagréments, on trouve pléthore de bibliothèques pour se simplifier la vie, de votre framework préféré (jQuery, Scriptaculous, YUI, etc.) à des bibliothèques d’abstractions spéciales comme ProcessingJS ou PaperJS mais malgré cela, on est très loin de la simplicité offerte aux designers par Flash, CSS ou même SVG.

Le deuxième point difficile, c’est le comportement des navigateurs. Les difficultés liées à l’API DOM sont désormais quasiment (mais pas totalement) gommées par les différents frameworks du marché. Par contre, la balise canvas peut encore poser pas mal de problèmes. Alors certes, dans les derniers navigateurs modernes, vous pouvez virtuellement tout faire (quelques exemples chez Mozilla ou chez Google) mais même là, la qualité des implémentations (avec ou sans accélération matérielle par exemple) peut vite vous en faire atteindre les limites.

Ceci dit, si vous êtes développeur, c’est cette technologie qui vous offrira le plus de possibilités. Si vous êtes designer par contre, clairement, ce n’est pas fait pour vous.

Conclusion

Je vous ai présenté ici les principales techniques pour réaliser des animations sur le Web, mais ce ne sont pas les seules. Selon votre marché ou vos contraintes spécifiques, il en existe d’autres. Par exemple, le plug-in Sliverlight de Microsoft ou bien certaines technologies Java qui permettent également de créer des animations. Néanmoins, elles restent au choix marginales, peu déployées chez les utilisateurs, ou complexes à mettre en œuvre. De même, vous constaterez assez souvent que Javascript vient facilement chapeauter les autres technologies d’animation, que ce soit pour lisser les problèmes de support navigateurs ou pour rajouter du dynamisme et des fonctionnalités manquantes à l’une ou l’autre de ces technologies.

||Le support des technologies d’animation par navigateur||
|Navigateurs|Flash|Transitions CSS|Animations CSS|Animations SVG|Javascript|
|Internet Explorer 8|Plugin|Non|Non|Non|Partiel[[IE8 ou moins ne supporte que les animations via l’API DOM, et les performances sont loin d’être excellentes]]|
|Internet Explorer 9|Plugin|Non|Non|Non[[IE9 supporte le langage SVG mais pas les animations SVG.]]|Oui[[IE9 supporte la balise canvas et l’API Canvas2D mais pas encore WebGL]]|
|Firefox|Plugin|Oui|Oui[[Firefox supporte les animations CSS depuis sa version 5.0]]|Oui|Oui|
|Safari|Plugin[[A l’exception notable des versions mobile sous iOS]]|Oui|Oui|Oui|Oui|
|Chrome|Plugin|Oui|Oui|Oui[[A l’exception notable du navigateur natif du système Android]]|Oui|
|Opera|Plugin|Oui|Non|Oui|Oui[[Opera supporte la balise canvas et l’API Canvas2D mais pas encore WebGL]]|

Quoi qu’il en soit, aucune des techniques présentées ici n’est meilleure qu’une autre. Selon votre contexte (nature du projet, population ciblée, etc.) vous choisirez celle qui permet de répondre à vos besoins de la façon la plus efficace. Par exemple :
– Flash est une bonne réponse si vous avez une grosse problématique de compatibilité multi-navigateurs ;
– Les animations CSS sont une bonne réponse si vous avez besoin de rajouter des effets d’animations optionnels à vos interfaces ;
– SVG est une bonne réponse si vous devez gérer des problématiques d’accessibilité ;
– Javascript est une bonne réponse si vous devez gérer des questions de haute performance (pour les jeux par exemple).

L’important est de savoir quoi en faire et comment les utiliser pour ne pas faire le mauvais choix. Expérimentez, amusez-vous et vous saurez toujours quoi utiliser à quel moment.