Timeline-The incredible machine

Pour cet exercice, vous allez devoir animer le premier niveau du jeu The Incredible Machine, aussi surnommé TIM 😉

Classique de 1992, ce jeu consiste à positionner des éléments afin de générer des réactions en chaine permettant d’arriver à un résultat précis, dans ce cas, lancer le ballon de basket dans le panier.

Aperçu du résultat 👇

Matériel Pen de départ Vous n’avez qu’à ajouter du JavaScript (nul besoin de modifier le HTML ou le CSS).

La librairie GSAP a aussi été ajoutée afin de vous laisser vous concentrer sur l'animation. Celle-ci n'aura pas à être 100% identique à celle de l'exemple ci-dessus, puisqu'une animation se conçoit beaucoup en se fiant à son instinct. L'important est que l'animation produite recrée le fonctionnement logique de la machine.

Puisque tous les éléments sont positionnés avec l'unité vmin, il vous sera nécessaire d'utiliser cette unité à chaque fois que vous désirerez déplacer un élément.

Puisque le but de l'exercice est d'expérimenter la Timeline GSAP, il est interdit d'utiliser la propriété delay. Utilisez plutôt les paramètres de position de la timeline.

Requis Par défaut, faites en sorte que votre animation soit sur pause tant que le bouton "Démarrer" n'est pas appuyé. Faites chuter la boule de quilles 🎳 sur la cage de la souris 🐁. Faites attention à choisir le ease adéquat afin de créer l'effet de rebondissement souhaité. Démarrez l'animation de la souris (.mouse) qui court à l'infini un peu avant la fin de l'animation de la boule de quilles. En même temps que l'animation de la souris, faites tourner le roue (.wheel) à l'infini. En même temps que l'animation précédente, faites tourner la roue (.wheel) du premier tapis roulant (.treadmill) à l'infini. Déclenchez en même temps l'animation de la 2^e boule de quilles. Celle-ci doit:
- Se déplacer pour aller frapper sur la 2^e cage à souris.
- Tourner à l'infini. Assurez-vous de bien peaufiner les étapes 3 à 6 de votre animation. Récupérez les animations des étapes 3 à 6 et appliquez-les aux cages à souris, tapis roulants et boule de quilles restants. Combinez différentes animations afin de faire:
- Rouler le ballon de basket 🏀
- Le déplacer dans le panier.
- Le faire rebondir au sol.
- L'amené dans le coin inférieur droit de la scène ↘️ Notes de cours 📚