Quelle technique pour une animation sur mon site?

(reprise du message précédent)

Freez a écrit :
@senteur_honrable v30? Ce n'est pas forcément étonnant que vous ayez des problèmes vous n'êtes pas à jour de 10 versions...
Concernant requestAnimationFrame qu'en pensez vous?

Edit ma version : je suis effectivement en chrome v.40 ! Mais la version de chrome, quelle qu'elle soit depuis 2011 () est instable pour le css3. Authentiquement instable. Il faudra bien admettre que chrome a mené une campagne de conquête plutôt effrénée et décérébrante : quitte à briser finalement notre beau Rêve. O Propagande, Mythologie et Légende, gracieuses Nymphes des Temps modernes ... et du web.

Concernant requestAnimationFrame qu'en pensez vous? : j'y cours, j'y cours ...

===========

Je suis de retour de requestAnimationFrame : j'ai le sentiment que ma préoccupation est fort semblable à la leur ().

Reste à démontrer que leur démarche, pour être d'un abord plus complexe, offrira une solution autrement plus performante que la mienne. Je ne sais pas encore mais je m'y intéresserai de près.
Modifié par senteur_honrable (10 Feb 2015 - 14:37)

PapyJP a écrit :
Pour info: un vieux gif animé du millénaire précédent!
http://www.icone-gif.com/gif/personnages/pegase/pegase004.gif
on n'est pas obligé de le faire tourner continuellement en boucle.

Toutefois sur une page web, personne ne pourra intervenir sur le cours de cette animation : ni l'interrompre, ni la redémarrer, ni changer sa vitesse de défilement, ni inverser son sens de lecture ...

Or le js que je présente, est effectivement capable de le faire ou de pouvoir le faire.

senteur_honrable a écrit :

Toutefois sur une page web, personne ne pourra intervenir sur le cours de cette animation : ni l'interrompre, ni la redémarrer, ni changer sa vitesse de défilement, ni inverser son sens de lecture ...

Or le js que je présente, est effectivement capable de le faire ou de pouvoir le faire.

Bien entendu!
Tu peux quand même le démarrer ou l'arrêter par JS en changeant l'image entre "pegase-anime.gif" et "pegase-au-repos.gif".
La question est de savoir si on a besoin de plus dans le cas présent. S'il y a d'autres animations que celle de l'appareil photo, il certainement préférable de mettre un script d'animation dans la bibliothèque de fonctions JavaScript et de l'utiliser également pour cette animation.

Encore une fois, je ne plaide pas pour l'utilisation des gif animés en général, c'était une techno que nous étions très heureux de pouvoir utiliser à l'époque où le réseau était lent et que nous évitions les photos, avant que l'ADSL se généralise) Le premier site public que j'ai fait ne comportait que quelques icônes et dessins genre BD, seule la page d’accueil comportait une seule photo, et qui plus est toute petite.

Pour en revenir au cœur du débat, je n'ai pas bien compris après lecture quel était le statut de requestAnimationFrame, qui m'a l'air d'être THE ULTIMATE SOLUTION pour ce qui nous préoccupe.
Est-ce suffisamment répandu dans la nature pour que l'on puisse s'y fier?

PapyJP a écrit :
Pour en revenir au cœur du débat, je n'ai pas bien compris après lecture quel était le statut de requestAnimationFrame (...)

Ce que je pense avoir compris de la différence entre le setInterval et le frame/rate (requestAnimationFrame) est ceci :

-le setInterval est basé sur une boîte flottante de temps qu'un navigateur calcule par lui-même. Après qu'un temps soit accompli, un nouveau temps égal est engagé, et ainsi de suite sans fin. Ainsi tous les navigateurs n'obtiennent pas, par exemple en 60 sec, la même durée globale de tous les intervals de 40millisec, et pour cet exemple précis, la différence de durée peut être, ai-je constaté, de 1sec (ce qui est beaucoup, finalement !). Seule l'image, sans le son est ici envisagée.

-le frame/rate est calculé par un retour systématique à l'horloge interne de l'ordi. Pour être plus précise au final que le setInterval, cette démarche est plus longue à chaque fois. Ceci peut expliquer la consommation de CPU beaucoup plus élevée qu'avec le setInterval intervenant dans une animation telle que je la propose. Un frame/rate détermine la fréquence d'image de tous les formats de video du web : .mov .mp4 .avi .wmv .flv .swf .3gp .webm ... Son et image ! Un frame/rate peut être appliqué à des animations par js des propriétés de style (color opacity left top bottom right height z-index padding margin background-color ... toutes quantifiables numériquement ; c-à-d impossible pour les propriétés font-family float visibility display position background-image ...) et est toujours vorace en CPU.

Mais je me trompe peut-être, ou je n'aurais pas tout compris ...
Modifié par senteur_honrable (10 Feb 2015 - 14:51)

@senteur_honrable des ressources en français
https://developer.mozilla.org/fr/docs/Web/API/window.requestAnimationFrame
http://openclassrooms.com/forum/sujet/html5-javascript-requestanimationframe...

En gros, c'est juste pour remplacer setTimeout ou setInterval qui sont plus voraces en CPU.

Freez a écrit :
@senteur_honrable des ressources en français
https://developer.mozilla.org/fr/docs/Web/API/window.requestAnimationFrame
http://openclassrooms.com/forum/sujet/html5-javascript-requestanimationframe...

En gros, c'est juste pour remplacer setTimeout ou setInterval qui sont plus voraces en CPU.

Fort intéressant tout ça !

Mais dis-moi, comment ferais-je pour animer 240 vraies images .jpg extraites d'une séquence de ma cam, avec requestAnimationFrame, au rythme de 25 img/sec ?

Imaginons que j'ai un dossier img qui contienne mes 240 images .jpg, chacune renommée i1.jpg i2.jpg i3.jpg ... i240.jpg. Ensuite ...

Logiquement, je commence par mon script (pour toute absence du setInterval) :

<script>
Chiffre=1;
NombreImages=240;

	function Image()
{
document.image_generique.src="img/i"+Chiffre+".jpg";
}


	function EnAvant()
{
Chiffre=Chiffre+1;
if(Chiffre>NombreImages)
	{
Chiffre=1;
	}
Image();
}


	function EnArriere()
{
Chiffre=Chiffre-1;
if(Chiffre<1)
	{
Chiffre=NombreImages;
	}
Image();
}
</script>

et ensuite je fais appel à un script de requestAnimationFrame qui intègrera mes fonctions EnAvant() et EnArriere() (le play/pause intégré directement à requestAnim...) Non ?

Franchement j'ai hâte de pouvoir constater le résultat : telle est ma curiosité (ré)créative.

Et d'apprécier la part des Anges du CPU avec l'une et autre méthode : setInterval ou requestAnimationFrame.

Entretemps j'ai déjà cherché sur le web un exemple concret : en vain.
Modifié par senteur_honrable (11 Feb 2015 - 11:54)

Bonjour.

J'ai trouvé ce lien qui a l'air intéressant.

SolidSnake a écrit :
Bonjour.

J'ai trouvé ce lien qui a l'air intéressant.

Bonjour SolidSnake,

merci. Et ce qui est marrant, c'est que je travaillais sur ceci http://jsfiddle.net/wMkJg/ à l'heure où tu postais ton post ... qui est exactement la même chose.

De fait, c'est une piste sérieuse. Il me restera à y intégrer mes fonctions EnAvant() EnArriere() PlayPause()

Ca devrait finalement venir.
Modifié par senteur_honrable (11 Feb 2015 - 15:38)

Et au premier des Alsanautes qui trouve la bonne intégration des fonctions EnAvant() EnArriere PlayPause() EnArriereEnAvant() à requestAnimationFrame, j'offre une bouteille de Taittinger au Bar du Forum !
Modifié par senteur_honrable (11 Feb 2015 - 15:51)

Alors alors alors ... j'ai rédigé ceci qui fonctionne. Ma proposition apparaît plutôt rudimentaire, mais elle fonctionne effectivement sur des images .png de l'une des animations que j'avais créée.

J'y ai supprimé le setInterval pour un setTimeout conditionné par un requestAnimationFtrame ; l'animation tourne à 25 fps (frame/sec), et le CPU est raisonnable (15% de mon ordi c-à-d comme auparavant) :

<script>
var conteneur=document.getElementById("conteneur");

var Chiffre=1;
var NombreImages=177;
var fps = 25;


	function Image()
{
document.image_generique.src="img/a"+Chiffre+".png";
}


	function PlayEnAvant()
{
defile=setTimeout(function(){
requestAnimationFrame(PlayEnAvant);
Chiffre=Chiffre+1;
if(Chiffre>NombreImages)
		{
Chiffre=1;
		}
Image();
	}, 1000/fps);
}

/* ... */
</script>

L'animation, diversement configurée à 60 fps, est également véloce ...

Il me suffira de compléter le script par une mise en compatibilité de tous les navigateurs (+/- anciens), de rédiger PlayEnArriere(), Stop() avec cancelAnimationFrame, etc... pour obtenir un joyeux mécanisme d'animation dynamique et interactif.

Un préchargement des images est ici opportun. Ainsi, au plus haut dans le head j'ai rédigé ceci :

<script>
/* Preload minimaliste des 177 images de l'animation */
var mes_images = new Image(177);for (var i=1; i <= 177; i++){mes_images[i] = new Image();mes_images[i].src = "img/a"+i+".png";}
</script>

[/i][/i]

note : il semblerait qu'un bug initié par les square brackets contenant i corrompe les posts sur Alsa.
Par un screenshot de mon éditeur, voici ce qu'il faut en lire :


Ma conclusion sur l'usage de setInterval ou de requestAnimationFrame :

-dans le cas d'une utilisation d'images .png .jpg pour reconstituer une séquence animée (de durée courte : quelques secondes), le setInterval est opérationnel et ne semble souffrir que peu de réserve (même jusquà 60 img/s), en dépit qu'il n'ait pas été conçu pour cet usage. Le CPU alors consommé relève du volume de chacune des images, et bien sûr de la fréquence de rafraîchissement d'un écran (ces phénomènes affectent nécessairement les transitions en css3).

-requestAnimationFrame est à requérir lorsqu'une animation ne concerne pas des images ... mais une rédaction "pur JS" des frames animées.

Image a60.png (sur 177) de ma séquence animée par un setInterval (chute de billes ...)

Modifié par senteur_honrable (12 Feb 2015 - 18:05)