18 février 2013
Category:
Javascript
Comments: 0

Animer un dessin vectoriel avec jQuery

Avec l’arrivée des éléments canvas et les capacités de dessin de javascript, nous pouvons désormais calculer et faire des présentations dans un navigateur. Ce genre de dessins peut être animés, mais l’inconvénient provient du fait que beaucoup de programmation est nécessaire pour arriver à un résultat. Si la programmation n’est pas votre fort, ou tout simplement si vous souhaitez gagner du temps, nous vous présentons le plugin jQuery Lazy Line Painter qui pourrait vous sauver de longues heures de programmation.

Lazy Line Painter : Convertissez un fichier en SVG et animez le sur la toile !

Voici la façon dont procède le plugin Lazy Line Painter : Si vous voulez animer votre image, alors vous devrez utilisez un fichier de type SVG. Plusieurs applications comme Illustrator vous offrent la possibilité d’exporter vers ce format. Les images simples ne pourront pas fonctionner avec ce plugin. Les formes et les dégradés sont également en dehors des limites. Les cercles et rectangles devront être préparés à l’avance. De manière visuelle vous ne remarquerez rien, mais le plugin fera la différence car il utilise l’écart entre la trajectoire de début et celle de fin.

lazy-line-painter

Les couleurs et contours seront ignorés par le plugin, mais vous pourrez les définir dans les paramètres. Comme le fichier SVG ne peut pas être intégrer directement au plugin, il doit être convertit en variable Javascript. Le site web qui héberge le plugin vous permets de charger vos fichiers SVG afin de les convertir en variables. Les variables obtenues vous donne ensuite les chemins et coordonnées pour être intégré au plugin comme par exemple :

L’appel suivant est accepté par le plugin

La taille et la couleur des contour seront définis à côté de la variable. La dernière étape consiste à démarré l’animation :

Attention : Lazy Line Painter nécessite jQuery et Raphaël

Vous aurez besoin d’intégrer jQuery pour que le plugin fonctionne sur votre site. La bibliothèque Raphaël est également nécessaire, cette bibliothèque offre des possibilités et des fonctions spécifiques pour les fichiers de type SVG.

En conclusion, l’effort d’intégration, qui reste toutefois très léger en vos véritablement la chandelle quand on voit le peu d’effort qu’il est demandé pour animer un fichier SVG avec ce plugin.



Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *