Pour l'un de mes projets Web, il m'a été demandé de créer une animation pour mettre en avant certaines informations aux utilisateurs.
Étant un projet dans le thème de l'automobile, l'utilisation d'un compteur de vitesse semblait être une bonne voie, et l'idée était de faire bouger les aiguilles le long du cadrant comme dans une voiture selon l'information à afficher. Avec en valeurs de la graduation, l'unité de l'information (€, %, pts..).
L'image du compteur est en format SVG, recréé par un collègue graphique, permettant de rendre chaque élément totalement indépendant, dans le but de les mouvoir librement.
Pour éviter un effet linéaire de l'animation, c'est-à-dire, j'y ai ajouté quelques secousses aléatoires pendant sont trajet, donnant une petite impression d'instabilité que l'on retrouve dans une voiture entre les vibrations et les changements de rapport.
À la fin de cette animation, on peut conserver cet effet de secousse ou non, suivant ce que l'on veut.
Dans le cas de valeur négative, l'animation se lance normalement en se déplaçant dans le sens positif jusqu'à faire demi-tour pour retomber à la position 0, comme si nous avions calé, et l'affichage de l'information dans le cadrant continue à se mettre à jour pour afficher la valeur réelle.
Et avec quelques pincées de Javacript (et jQuery), on a les résultats suivant :
