Savoir créer des animations en Javascript ou jQuery est toujours intéressant, notamment depuis la chute indéfinie de Flash qui prenait à cœur cette tâche. Plusieurs techniques sont disponibles pour remplacer la solution d’Adobe, notamment les canvas HTML, ou la fonction animate() de jQuery. Dans ce tutoriel pas-à-pas, nous allons justement prendre ces techniques à contre-courant, et faire sans. L’objectif est de montrer que nous pouvons animer dans n’importe quel contexte. La programmation a cela de magnifique qu’il est possible de presque tout faire, tant que notre imagination et notre talent le permet, profitons-en…
Dans l’exemple que nous allons mettre en place, le but est de comprendre comment gérer un déplacement automatique et surtout comment créer l’effet de rebond sur les bordures d’une zone. En effet, ce sont bien les collisions qu’il faut penser à gérer, sinon l’animation dépassera du cadre et se perdra dans la nature. Nous allons donc maîtriser ces deux points, et dans un prochain tutoriel, nous verrons comment faire le même type d’animation avec une gestion des déplacements au clavier (plutôt que des déplacements automatiques).
Vous pouvez télécharger les codes deux deux tutoriels dès maintenant si votre patience a des limites. ^^
Télécharger “Effet d’animation en jQuery (avec collisions et rebonds)”rebond1.zip – Téléchargé 3478 fois – 83 Ko
Dans le <body> d’une page HTML, ajoutez une zone contenant un élément à déplacer.
Ici, il s’agit de deux <div> distinctes.
Rien de bien compliqué ici, attribuez un style à la zone de démarcation à l’élément à déplacer.
Dans l’exemple, il s’agit d’un rectangle et d’une balle rebondissante.
Ajouter jQuery dans la section <head> de la page ainsi qu’un couple de balises <script>…</script> avec la fonction de lancement de jQuery.
Nous ajoutons une fonction spécifique pour notre usage (non obligatoire).
Pour bien gérer les collisions contre les bordures, il faut absolument connaître toutes les dimensions de la « boîte » (zone d’accueil de la première <div>), mais aussi celles de l’élément à déplacer (la <div> de la balle).
Ces éléments sont fondamentaux pour que le système fonctionne.
Selon la méthode utilisée (canvas en HTML, fonction animate(), offset, etc.), cette étape peut être quelque peu différente !
Il convient d’indiquer au programme de combien de pixel sera déplacé l’élément en X (abscisse) et en Y (ordonnée).
La variable timing gère le nombre d’images par seconde à afficher.
Plus la valeur des orientations en X et Y est faible, plus le mouvement est précis et lent, cela signifie qu’il faut augmenter la vitesse parallèlement. Jouez avec ces valeurs.
On créé une boucle infinie avec la fonction setInterval() de Javascript. C’est ici que le « timing » est pris en compte pour créer la récurrence du mouvement et l’animation.
Dans d’autres langages, la boucle while() aurait été utilisée (mais occupe beaucoup plus de ressources ici).
Il faut absolument récupérer l’emplacement de l’élément à déplacer pendant son mouvement afin de créer les collisions.
Ces données sont récupérées dans la boucle créée par setInterval() car elles changent à chaque « tour ».
La création des collisions se fait en deux étapes :
Il suffit d’attribuer les nouveaux déplacements à l’élément en mouvement pour que l’animation reste fluide en continu.
Résultat final de l’animation jQuery avec rebonds et collisions contre les bords.
Ce premier tutoriel montre comment gérer un effet de rebond automatique avec collision contre des bordures de zone. Il faut imaginer que l’animation de la balle rouge n’est vraiment qu’un exemple, c’est l’idée qu’il faut conserver pour créer toutes sortes d’animations automatisées (avec des valeurs de départ au hasard par exemple, ou variables en X et en Y…), en multipliant les éléments en mouvement et les éléments fixes.
Le même type d’animation peut être utilisé pour créer des mini-jeux. Avec une balle et une zone, il ne nous manque plus que deux traits en mouvement pour recréer Pong, le célèbre jeu vidéo. Et pour tout vous dire, j’avais reprogrammé Pong en GW Basic quand j’étais tout jeune (ça ne me rajeunit pas ^^), ce tutoriel est en fait la réponse à ce bon moment de mon passé, je voulais juste l’adapter avec un langage dans l’ère du temps (Javascript et ici un peu de la bibliothèque jQuery).
J’espère en tout cas que cela vous aura éclairci un peu les idées et vous donnera une méthode supplémentaire pour créer des mouvements avec rebonds et collisions en jQuery/Javascript.
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 32,00 € (345 pages)
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 32,00 € (570 pages)
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 29,90 € (522 pages)
Auteur : Mathieu Chartier
Editeur : First Interactive
Prix : 19,90 € (411 pages)
Auteur : Mathieu Chartier
Editeur : First Interactive
Prix : 29,90 € (622 pages)
Ce blog est le résultat de plusieurs années de travail mais il ne fait pas manger son homme. Découvrez l’agence web et l’organisme de formation géré par Mathieu Chartier et n’hésitez pas à prendre contact pour suivre des formations personnalisées.
Tous droits réservés © Blog Internet-Formation 2009 – 2023
C