[HTML5] Animation, quel est le plus performant?

[Argorate]

Comme je le disais, niveau perf, à priori, c'est CSS le plus rapide.

demo:
http://css3.bradshawenterprises.com/blog...ansitions/

[Freygolow]

Salut,
Désolé de mettre un peu de temps pour répondre et merci pour vos réponses.
En effet, le CSS3 est plus performant mais pas simple à utiliser pour réaliser certaines animations.

J'ai opté pour le Javascript/Canvas en utilisant le "prerending" qui offre des résultats plus que honorables.
Voici un lien qui explique le principe:

http://www.somethinghitme.com/2010/02/06...vascripts/

Pour résumer, avant d'afficher l'animation (pendant le chargement de la page) on crée l'animation et on place les sprites qui la composent dans une même image qui sera stockée en mémoire.
Ensuite pour afficher l'animation, nous avons juste à découper l'image en mémoire et à afficher les découpes les unes après les autres.

Sinon pour les animations d'ambiance, j'ai utilisé du SVG (non cité au dessus).
Grâce au SVG (vectoriel), il n'y a pas de perte de qualité et le poids est généralement faible. Les animations sont assez simples à mettre en place. L'inconvénient est qu'IE8 ne le supporte pas.

[archANJS]

En tout cas, la différence est énorme sous mobile (Firefox pour Android / Nexus 4)! La première animation est lente, incohérente et cahoteuse, tandis que dans la deuxième je vois même les zombies marcher avant d'arriver au corps.

Vraiment pas mal

[Argorate]

J'ai pas bien compris la différence, ce que tu décris me semble être ce que je ferais de base, donc c'est quoi la version "non optimisé" du coup?

[Freygolow]

La version non optimisée:

Boucle toutes les XX ms
{
Différents calculs (translations, rotations, redimentionnements...)
On dessine l'élément modifié
}

La version optimisée

Var imageEnMemoire
Boucle tant que le nombre d'image souhaité pour l'animation n'est pas atteint
{
Différents calculs (translations, rotations, redimentionnements...)
On dessine l'élément modifié dans imageEnMemoire
}

Boucle toutes les XX ms
{
dessine la 1er image présente dans imageEnMemoire lors du 1er tout de boucle,
puis la 2eme lors du 2eme tour de boucle etc.
}