Pour cet exercice, nous allons créer une animation inspirée du jeu Nintendo Excitebike sorti en 1984! 🏍

Aperçu du résultat 👇

Matériel

Médias 🖼️

Moto mauve
https://ex.smnarnold.com/gsap/excitebike/bike-2.png
Moto turquoise
https://ex.smnarnold.com/gsap/excitebike/bike-3.png

Requis

  • Importez la librairie GSAP

  • Incorporez et installez le plugiciel (plugin) GSDevTools

  • Déplacez sur les X la piste de course de 3300px en l'espace de 5 secondes. Faites en sorte que l'animation commence plus doucement et s'accélère par la suite afin de créer une illusion de prise de vitesse.

  • Utilisez le GSDevTools afin de repérer quand le motocycliste doit s'animer et utiliser des positions absolues de temps afin de déclencher l'animation au moment propice.

  • 1re animation, faites monter le motocycliste de sorte qu'il se faufile entre les deux flaques d'huile au sol en l'espace d'une demi-seconde.

  • 2e animation, faites en sorte que le motocycliste évite le gazon en le faisant descendre d'un corridor sur la piste en l'espace d'un quart de seconde.

  • 3e animation, faites une rotation sur le motocycliste afin de lui faire entamer un "wheeler" en un quart de seconde.

  • 4e animation, annulez la rotation afin que le motocycliste retrouve sa position normale à la fin de la piste.

Bonus

  1. Étoffez votre animation en ajoutant les motocyclistes mauve et turquoise à votre animation.

Notes de cours 📚