Tous les articles

À propos des outils d’animation pour le web

Par Pierre Bertet

Une bataille importante est en train de se jouer, celle des outils permettant d’exploiter les nouvelles technologies web. Parmi les attentes, la partie la plus importante est peut-être celle qui concerne les animations. Je vais mentionner Flash dans cet article, mais il s’agit de l’IDE Flash, pas du Flash Player.

L’outil de création ultime, le « Flash du web », n’est pas arrivé, et tous les regards se tournent évidemment vers Adobe. À la différence d’un outil dédié au Flash Player, la création d’un outil pour le web est beaucoup plus complexe, car il s’agit d’un « environnement ouvert ». Les technologies permettant l’animation sur le web sont nombreuses et très différentes.

HTML

Il est bien sûr possible d’animer les éléments HTML en JavaScript, comme cela se fait depuis des années. On définit un timer, et on modifie des propriétés CSS au fil du temps. Il est aujourd’hui possible de profiter des optimisations que le navigateur peut proposer, avec la méthode window.requestAnimationFrame.

CSS peut également être directement utilisé pour animer les éléments d’une page, et il n’est pas rare de combiner plusieurs modules :

SVG

Pour animer du SVG, il y a également plusieurs possibilités : du simple JavaScript, comme pour les éléments HTML (les éléments SVG sont intégrés de manière transparente au document HTML). Ensuite, l’ensemble des technologies CSS citées pour le HTML peuvent (ou pourront) également être utilisées pour le SVG. Enfin, SVG peut utiliser une technologie d’animation spécifique, SMIL.

Rappelons qu’Adobe a misé sur cette technologie autrefois, mais ils ont arrêté le développement de leur plugin SVG après le rachat de Macromedia ; peut-être préparent-ils leur grand retour sur cette technologie ?

Canvas

Canvas (2D) est une zone de pixels qui peut être directement dessinée en JavaScript, on ne manipule plus de document comme en HTML ou SVG. Les animations se font donc directement avec JavaScript, mais là aussi, il est possible d’utiliser window.requestAnimationFrame pour optimiser ces animations.

WebGL

WebGL, ou Canvas 3D, c’est le roi. Cette technologie permet de dialoguer directement avec la carte graphique, à l’aide d’une API OpenGL simplifiée (WebGL donc). C’est toujours l’élément canvas qui est utilisé, nous avons donc une zone de pixels qui n’attendent plus qu’à être dessinés !

Les outils

Vous le voyez, il existe beaucoup de technologies très différentes, et elles peuvent interagir les unes avec les autres. C’est toute la puissance du web ! Mais cette puissance est difficile à maîtriser, et il est nécessaire de revoir la plupart des concepts proposés (notamment par Flash) ces dernières années pour l’exploiter efficacement. Un seul outil ne peut pas se charger de tout, et il faudra certainement passer d’un outil spécialisé à un autre selon les technologies utilisées.

Chez Adobe, pour l’instant, nous avons une pré-version du logiciel Edge, en cours de développement, qui permet d’animer des éléments (CSS transitions) et même d’ajouter des actions (fonctions JavaScript), mais il y a encore beaucoup de travail pour passer d’un petit outil d’animation simple à quelque chose de beaucoup plus riche, comme la partie animation de Flash. Toujours dans les labs d’Adobe, nous avons également Muse, qui permet de créer des pages web sans écrire une ligne de code. Pas de gestion des animations, et la version actuelle déçoit un peu, en passant complètement à côté de la sémantique.

Sencha (ExtJS, Sencha Touch) vient de sortir la version finale de son outil d’animation CSS, Sencha Animator. Les démonstrations me semblent très prometteuses, mais l’outil se positionne sur le mobile, et se limite volontairement au support de Webkit pour cette raison, dommage.

Animatable semble également très intéressant, mais la sortie du soft (qui sera disponible sous la forme d’une application web) commence à se faire attendre.

Pas grand chose à ma connaissance pour créer de manière graphique du Canvas 2D ou du WebGL. Ces technologies sont très différentes de HTML et SVG puisqu’elles ne reposent pas sur la manipulation de documents. Je les vois beaucoup plus s’orienter vers un outil complet de type IDE, ou vers des environnements dédiés à certaines librairies (et là je rêve d’un IDE basé sur three.js).

Je n’ai pas mentionné les librairies JavaScript dédiées à l’animation, évidemment nombreuses, mais certaines offrent des approches intéressantes qui pourraient servir de base pour la création d’outils. J’ai notamment été bluffé par d3.js, qui s’affranchit (presque, puisque l’outil tourne essentiellement autour de la manipulation d’attributs et d’éléments) de la technologie de rendu utilisée pour permettre d’exploiter des données dans le cadre de visualisations. Il est ainsi très facile de passer de SVG à HTML/CSS, puisque l’outil fournit l’animation, les états, les manipulations de données, mais ne se préoccupe pas de la manière dont les changements de style vont être appliqués pendant l’animation. Il est tout de même possible d’utiliser un ensemble d’aides pour manipuler le SVG, mais c’est totalement optionnel.

Voilà, un peu en vrac, ce que j’avais en tête sur le sujet. N’hésitez pas à indiquer d’autres outils dans les commentaires (j’en ai certainement oublié un paquet !), et à partager vos idées sur les évolutions récentes et à venir de nos outils.

Article rédigé par , publié le dans la catégorie Front-end. Vous pouvez suivre les commentaires de cet article en utilisant le flux RSS dédié. Les commentaires sont fermés sur cet article.

1 commentaire

Flux RSS des commentaires de cet article

Les commentaires sont fermés sur cet article.