mardi 3 avril 2012

Animer pour le mobile (les spriteSheets)


Illustration : Preston Blair.

Indépendamment du talent de l'animateur, l'animation pour le Web demeure aisée d'un point de vue purement mécanique, dans la mesure où la performance des cartes graphiques autorise le calcul ainsi que l'animation des points d'ancrage vectoriels, et ce, de manière fluide (c'est le traditionnel morphing 2D de Flash).

En revanche, les équipements mobiles, eux, ne permettent pas de gérer l'animation des points d'ancrage du fait des performances limitées des tablettes et des smartPhones. Voici la solution pour animer sur ces plateformes :

Vous devez animer uniquement des suites d'images bitmap et en afficher seulement la partie visible à l'écran, afin d'épargner au système des calculs inutiles. Ainsi, convertissez vos interpolations vectorielles en séries d'images bitmaps, vos textes animés par translation en bitmaps, vos tweens sophistiqués en suites d'images bitmaps. Cette technique d'animation par image est également appelée le spriteSheet (feuille de styles de blocs successifs) ou le blitting (technique employée par XEROX PARK en 1975 pour le système Smalltalk).

Le principe est celui du Gif animé et de la vidéo, en somme. La vidéo permet cela dit une plus grande qualité d'affichage pour un poids moindre du fait de la disponibilité d'excellents algorithmes de compression spatio-temporels (h264). N'hésitez donc pas à convertir également vos animations en vidéos. Elle n'en sera que plus légère et fluide.

Ces techniques sont employées par les nouvelles classes d'animation GreenSock pour iOS (http://www.greensock.com/blitmask/) si vous publiez en Air (non natif), et par Aquafadas DPS et Adobe DPS, lors de la génération d'une application native iOS ou Android, où l'application convertit automatiquement vos pages et vos animations en suites d'images via Photoshop.

C'est plus lourd que du vecteur, mais plus fluide aussi. Le poids pour une Apps ayant un rôle moins important que ses performances d'affichage, du fait de la lecture généralement différée du contenu, il est préférable, que dis-je ?, il est incontournable de créer des bitmaps plutôt que d'animer des formes.

Lire aussi l'article sur GreenSock pour iOS :
http://bloc-notes-arzhur.blogspot.fr/2012/02/greensock-sur-ios.html

Capture vidéo de la différence entre une appli qui utilise la classe Blitmask de Greensock et une qui ne l'utilise pas :

Aucun commentaire:

Enregistrer un commentaire