Bon, ça faisait longtemps que je n'avais pas écrit ici mais j'arrive avec un truc intéressant - enfin j'espère : un nouveau plugin jQuery. (youhou, wahou, sons de cris et de foule en liesse, et non pas en laisse, même si au fond ça pourrait être bien marrant.)
En résumé
ImgAnimation est un plugin qui va permettre de mettre en place facilement une animation basée sur une suite de fichier images qui forment une animation, façon dessin animé.
Le principe est que les images sont affichées et cachées selon le besoin.
Pour celà, il suffit de charger les images, de lancer le plugin sur un conteneur avec les images en paramètres et hop, on y est !
Pourquoi pas en Canvas ?
Parce que ça ne tourne pas sur les navigateurs <IE9 et comme il m'arrive encore de bosser dessus malgré mes pleurs, mes cris et mes larmes, j'ai voulu développer un truc compatible. (pour info je l'avais commencé en canvas à la base mais EaselJS a déjà des outils pour faire un peu pareil)
Pourquoi pas simplement une vidéo ?
Parce que le seek fonctionne assez mal sur les tablettes et mobiles et peuvent prendre parfois quelques secondes pour arriver au bout. Pas pratique pour une animation fluide. :)
Pourquoi ne pas charger les images directement dans le plugin ?
Ce n'était pas le but et ça ne permet que peu de lancer ça dans un loader plus global. Mais mon exemple montre comment faire assez facilement.
Comment s'en servir ?
Déjà, voici un exemple assez parlant pour expliquer le fonctionnement global.
Mais pour résumer :
1/ Il faut mettre en place la base : mettre les tags pour charger le Javascript (en n'oubliant pas jQuery bien sur!)
2/ Charger les images en tant qu'objets à intégrer, pour cela j'utilise PreloadJS mais tout autre méthode ira très bien.
3/ Instancier le plugin sur un conteneur
1 | <div id="imgAnimation"></div> |
1 | $('#imgAnimation').ImgAnimation(options); |
Les options sont (à l'heure actuelle) :
- loop : boolean // pour que l'animation reprenne depuis le début une fois arrivé à la dernière frame (default : true)
- images : array // contient la liste des images(default : tableau vide mais je conseille quand même de le remplir un peu :))
- labels : object // contient les noms de labels et la frame associée,ex {nomframe:numframe}, utile pour les fonctions gotoAndPlay et gotoAndStop (default : object vide)
- onAnimationEnterFrame // lancé à chaque apparition d'une frame. (default : fonction vide)
- intervalTime // en millisecondes le délai entre l'apparition de deux frames à la lecture. (default : 25)
4/ Récupérer l'objet data de l'animation pour en prendre le contrôle.
Le plugin a été basé sur le jQuery Plugin Boilerplate de Stefan Gabos, donc voilà la méthode pour récupérer l'objet et utiliser les fonctions principales.
1 2 | var objAnim = $('#imgAnimation').data('ImgAnimation'); objAnim.play(); |
Voilà les fonctions de contrôle de l'animation. Si vous étiez (êtes?) familiers des MovieClips de Flash et de l'AS(2-3), ça ne vous changera pas beaucoup.
- animObject.play();
- animObject.stop();
- animObject.gotoAndStop(num or label);
- animObject.gotoAndPlay(num or label);
- animObject.nextFrame();
- animObject.prevFrame();
- animObject.playTo(num or label, callback function);
- animObject.destroy();
Et comment disent les anglo-saxons : "Et voilà !"
Je vous conseille vivement de regarder l'exemple car il regroupe pas mal de fonctionnements classiques.
Ah, j'allais oublier, j'ai bien évidemment mis tout ça en place sur un repo GitHub : jQuery-ImgAnimation.
Et sans vouloir faire mon youtubeur de base, dites-moi ce que vous en pensez, d'une part çe me ferait plaisir et d'autre part ça m'aiderait surement à l'améliorer (et moi par là même).