Bon, \u00e7a faisait longtemps que je n'avais pas \u00e9crit ici mais j'arrive avec un truc int\u00e9ressant - enfin j'esp\u00e8re : un nouveau plugin jQuery. (youhou, wahou, sons de cris et de foule en liesse, et non pas en laisse, m\u00eame si au fond \u00e7a pourrait \u00eatre bien marrant.)<\/p>\n
En r\u00e9sum\u00e9<\/em><\/strong><\/p>\n ImgAnimation <\/a><\/strong>est un plugin qui va permettre de mettre en place facilement une animation bas\u00e9e sur une suite de fichier images qui forment une animation, fa\u00e7on dessin anim\u00e9. Pourquoi pas en Canvas ?<\/em> Pourquoi pas simplement une vid\u00e9o ?<\/em> Pourquoi ne pas charger les images directement dans le plugin ?<\/em> Comment s'en servir ?<\/em><\/strong><\/p>\n D\u00e9j\u00e0, voici un exemple assez parlant<\/a> pour expliquer le fonctionnement global. 1\/ Il faut mettre en place la base : mettre les tags pour charger le Javascript (en n'oubliant pas jQuery bien sur!)<\/p>\n 2\/ Charger les images en tant qu'objets \u00e0 int\u00e9grer, pour cela j'utilise PreloadJS<\/a> mais tout autre m\u00e9thode ira tr\u00e8s bien.<\/p>\n 3\/ Instancier le plugin sur un conteneur<\/p>\n Les options sont (\u00e0 l'heure actuelle) : 4\/ R\u00e9cup\u00e9rer l'objet data de l'animation pour en prendre le contr\u00f4le. Voil\u00e0 les fonctions de contr\u00f4le de l'animation. Si vous \u00e9tiez (\u00eates?) familiers des MovieClips de Flash et de l'AS(2-3), \u00e7a ne vous changera pas beaucoup. Et comment disent les anglo-saxons : \"Et voil\u00e0 !\"
\n
\nLe principe est que les images sont affich\u00e9es et cach\u00e9es selon le besoin.
\nPour cel\u00e0, il suffit de charger les images, de lancer le plugin sur un conteneur avec les images en param\u00e8tres et hop, on y est !<\/p>\n
\nParce que \u00e7a ne tourne pas sur les navigateurs <IE9 et comme il m'arrive encore de bosser dessus malgr\u00e9 mes pleurs, mes cris et mes larmes, j'ai voulu d\u00e9velopper un truc compatible. (pour info je l'avais commenc\u00e9 en canvas \u00e0 la base mais EaselJS<\/a> a d\u00e9j\u00e0 des outils pour faire un peu pareil)<\/p>\n
\nParce 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. :)<\/p>\n
\nCe n'\u00e9tait pas le but et \u00e7a ne permet que peu de lancer \u00e7a dans un loader plus global. Mais mon exemple montre comment faire assez facilement.<\/p>\n
\nMais pour r\u00e9sumer : <\/p>\n\r\n
\r\n$('#imgAnimation').ImgAnimation(options);\r\n<\/pre>\n
\n- loop <\/strong>: boolean \/\/ pour que l'animation reprenne depuis le d\u00e9but une fois arriv\u00e9 \u00e0 la derni\u00e8re frame (default : true)
\n- images <\/strong>: array \/\/ contient la liste des images(default : tableau vide mais je conseille quand m\u00eame de le remplir un peu :))
\n- labels <\/strong>: object \/\/ contient les noms de labels et la frame associ\u00e9e,ex {nomframe:numframe}, utile pour les fonctions gotoAndPlay et gotoAndStop (default : object vide)
\n- onAnimationEnterFrame <\/strong>\/\/ lanc\u00e9 \u00e0 chaque apparition d'une frame. (default : fonction vide)
\n- intervalTime <\/strong>\/\/ en millisecondes le d\u00e9lai entre l'apparition de deux frames \u00e0 la lecture. (default : 25)<\/p>\n
\nLe plugin a \u00e9t\u00e9 bas\u00e9 sur le jQuery Plugin Boilerplate de Stefan Gabos<\/a>, donc voil\u00e0 la m\u00e9thode pour r\u00e9cup\u00e9rer l'objet et utiliser les fonctions principales.<\/p>\n\r\nvar objAnim = $('#imgAnimation').data('ImgAnimation');\r\nobjAnim.play();\r\n<\/pre>\n
\n- animObject.play();
\n- animObject.stop();
\n- animObject.gotoAndStop(num or label);
\n- animObject.gotoAndPlay(num or label);
\n- animObject.nextFrame();
\n- animObject.prevFrame();
\n- animObject.playTo(num or label, callback function);
\n- animObject.destroy();<\/p>\n
\nJe vous conseille vivement de regarder l'exemple car il regroupe pas mal de fonctionnements classiques.<\/p>\n