Animation pour le Web

Pour proposer des idées, ou simplement discuter

Animation pour le Web

Messagepar gilgamesh » 21 Juil 2019 20:39

Je regarde les différentes possibilités. Si je dis des bêtises, corrigez moi
Le plus ancien et le plus utilisé : le GIF animé

Pour une image fixe le PNG est mieux que le GIF
https://www.diffen.com/difference/GIF_vs_PNG

Mais le PNG n'est pas fait pour l'animation, alors que le GIF si, et depuis longtemps et universellement supporté.

Il y a quand même des alternatives au GIF animés
https://ezgif.com/help/alternative-anim ... ge-formats

Parmi ces alternatives le format APNG (Animated PNG) qui est rejeté par les créateurs du PNG, mais de plus en plus supporté, une sorte d'"extension" (non officielle donc) de PNG qui permet l'animation avec des images PNG
https://caniuse.com/#search=apng

Comparaison des types de format pour le web
Dernière édition par gilgamesh le 21 Juil 2019 23:56, édité 1 fois.
gilgamesh
 
Messages: 96
Inscription: 22 Oct 2017 18:13

Re: Animation pour le Web

Messagepar gilgamesh » 21 Juil 2019 22:14

ImageMagick ne supporte pas APNG
Image,

Par contre il supporte Le format MNG (Multiple-Image Network Graphics) l'autre format, plus ancien de PNG animé, proposé par les créateur de PNG, mais très peu supporté par les navigateur (beaucoup plus par les outils). MNG est le format officiel du W3C pour les animations PNG
Image
gilgamesh
 
Messages: 96
Inscription: 22 Oct 2017 18:13

Re: Animation pour le Web

Messagepar P.Fradin » 21 Juil 2019 22:41

Pour des animations sur le web il y avait le flash, mais à proscrire aujourd'hui.
Maintenant il vaut mieux se tourner vers javascript qui peut faire des animations à partir d'une succession d'images, comme ici :
https://melusine.eu.org/syracuse/G/svga ... psographe/
P.Fradin
Avatar de l’utilisateur
P.Fradin
Administrateur du site
 
Messages: 1887
Inscription: 29 Oct 2008 15:04

Re: Animation pour le Web

Messagepar gilgamesh » 21 Juil 2019 22:57

Maintenant il vaut mieux se tourner vers javascript qui peut faire des animations à partir d'une succession d'images, comme ici :
https://melusine.eu.org/syracuse/G/svga ... psographe/

Il s'agit du format SVG (purement vectoriel) n'est-ce pas ?
Peut-on tout vectoriser ?
On ne peut pas tout vectoriser. En effet, les photos et les dégradés de couleurs ne se vectorisent pas. La vectorisation aplatie les couleurs et élimine les dégradés.

Image matricielle et Image vectorielle

Par exemple est-ce que ça conviendra pour des animations avec des textures produites par Poveray ?
Ou bien peu importe le format de l'image, le script les affiche en boucle et c'est lui qui contrôle par exemple le nombre d'image par seconde, la taille etc.. ?

-------------------------------------------------------------------------------------------------------------------------------
Pour produire des APNG j'ai trouvé ce logiciel (APNG Assembler 2.91) avec une version ligne de commande (et une version GUI pour Windows et Mac)
https://sourceforge.net/projects/apngasm/
https://sourceforge.net/projects/apngasm/files/2.91/
APNG Assembler Overview
Creates APNG animation from PNG/TGA image sequence.

Creates highly optimized Animated PNG files from PNG/TGA image sequences. CLI versions available for all major OSes. GUI versions for Windows and macOS.
Also, APNG Disassembler can be found at http://sourceforge.net/projects/apngdis

http://littlesvr.ca/apng/ (liste de logiciels APNG)
gilgamesh
 
Messages: 96
Inscription: 22 Oct 2017 18:13

Re: Animation pour le Web

Messagepar P.Fradin » 22 Juil 2019 11:14

Juste pour donner une idée, j'ai repris le code javascript de JM Sarlat sur le site Syracuse, j'ai changé l'extension svg en png, adapté la taille et voilà ce que ça donne en reprenant les images povray du fichier testpovanim (lien temporaire) :
https://texgraph.tuxfamily.org/animjs/pyramide/pyramide
Je trouve que c'est beaucoup mieux que le gif animé et aussi bien que le flash.
P.Fradin
Avatar de l’utilisateur
P.Fradin
Administrateur du site
 
Messages: 1887
Inscription: 29 Oct 2008 15:04

Re: Animation pour le Web

Messagepar P.Fradin » 22 Juil 2019 17:49

Pour faire suite à mon exemple ci-dessus, toujours en m'inspirant des codes de JM Sarlat du site Syracuse, on peut embarquer le code javascript qui gère l'animation (svg ici) directement dans l'image svg (lien temporaire ) :
https://texgraph.tuxfamily.org/animjs/m ... ulaire.svg
La barre colorée sous le dessin est un menu cliquable :
La zone bleue : bouton play/stop.
La première zone saumon : bouton - (pour ralentir l'animation).
La deuxième zone saumon : bouton + (pour accélérer l'animation).
La première zone verte : bouton début (pour revenir à la frame 1).
La deuxième zone verte : bouton fin (pour aller à la dernière frame).
La première zone rose : bouton frame précédente.
La deuxième zone rose : bouton frame suivante.
P.Fradin
Avatar de l’utilisateur
P.Fradin
Administrateur du site
 
Messages: 1887
Inscription: 29 Oct 2008 15:04


Revenir vers Propositions - Discussions

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 8 invités

cron