Quels formats prenant en charge l'animation conviennent au Web?

13

Quels formats prenant en charge l'animation conviennent au Web et quels sont les avantages et les inconvénients de chacun.

image-format animation

— Alinium
source

Voir aussi Quelle est la meilleure façon d'animer une illustration pour le Web? pour plus d'informations sur chaque format

— Zach Saucier

13

Cela dépend du type d'animation dont vous avez besoin.

Images .gif - Entièrement pris en charge, mais utilisation limitée avec des cadres. Les fichiers .png sont censés prendre en charge l'animation, mais vous ne le voyez pas très souvent dans la nature, voire pas du tout.
Flash, Silverlight et autres plugins - Flash a le plus d'ubiquité, mais tous les plugins doivent être installés dans les navigateurs et ne peuvent pas nécessairement être comptés pour être installés sur l'ordinateur d'un utilisateur. Peut ne pas fonctionner pour les plates-formes mobiles.
CSS3 - Transformations ou animations limitées, prise en charge limitée du navigateur.
Vidéo HTML5 - L'avenir, mais la prise en charge limitée du navigateur.
JavaScript - Doit être activé, mais devrait avoir une prise en charge de navigateur presque universelle. Types d'animation limités. Voir Raphael.js .
Balise Canvas - Prise en charge de navigateur moderne, mais prend en charge des animations riches.

— Virtuosi Media
source

Je vais taper ici, mais l' <canvas>animation est essentiellement JavaScript - c'est juste un format différent sur lequel les choses peuvent être dessinées. Si vous voulez être précis, vous devez faire la différence entre l'animation d'éléments HTML, SVG (que raphael.js utilise) et HTML5<canvas>

— Yi Jiang

La différence entre SVG et l'animation de canevas en un mot - avec SVG, chaque chemin est un élément avec lequel vous pouvez lier des données et des événements comme cliquer et passer la souris et interagir avec comme un div, tandis que dans Canvas, c'est plus comme si le navigateur crée des choses, donne les règles de comportement puis les oublie. SVG n'existe pas dans IE avant IE 9, c'est pourquoi Raphael est génial - il contrôle SVG, ou, dans IE6-8, il utilise l'ancien équivalent de marque propre d'IE (appelé VML). La seule chose que je sais que Raphael ne fonctionne pas est les anciens navigateurs Android (avant la version 2, je pense).

— user56reinstatemonica8

2

Ceci s'ajoute à l'excellente réponse de Virtuosi Media:

Apple a récemment utilisé des images JPEG et PNG fixes pour l'animation sur son site. Ils utilisent JavaScript pour changer les images. C'est une excellente technique si vous n'avez pas trop de cadres, avez besoin d'un support de transparence alpha, voulez que l'animation soit en place sur la page et si vous voulez un support large du navigateur. L'inconvénient est la taille et l'effort de téléchargement.

Il peut également être interactif. Si vous faites défiler jusqu'à la section Smart Cover de la page iPad d'Apple, vous pouvez le voir en action: http://www.apple.com/ipad/features/

— Marc Edwards
source

1

Lorsque vous superposez des images contenant une transparence au-dessus des images animées sur des calques sous l'image. Vous constaterez que PNG24 est le seul format d'image où l'anti-aliasing se mélange correctement avec les images d'arrière-plan. Avec GIF et PNG8, vous constaterez que vos bords sont tous gros. Ne semble pas très bon, mais vraiment facile à manquer.

— John Drefahl
source