Animation Sprite Sheet - Sonic Knuckles
Pour cet exercice, vous devrez animer l'ancien rival et maintenant meilleur ami de Sonic : Knuckles !
Pour cet exercice, vous devrez animer l'ancien rival et maintenant meilleur ami de Sonic : Knuckles !
Aperçu du résultat 👇
Matériel
Pen de départ
Médias
Sprite sheet de KnucklesVous n'avez qu'à ajouter du CSS (nul besoin de modifier le HTML ou le JS).
Requis
0%
- Chaque frame de la sprite sheet de Knuckles a une dimension de 252x222px. Faites en sorte que l'élément
.spriteaffiche en background-image le premier frame de cette sprite sheet. - Animez la sprite sheet de sorte que Knuckles donne l'impression de courir sur place. L'animation devrait s'effectuer en l'espace de 1 seconde ⏱.
- Animez l'élément
.knucklespour qu'il apparaisse au milieu à gauche de l'écran et sorte au milieu à droite de celui-ci, créant ainsi l'illusion qu'il court de gauche à droite sur la plateforme plutôt que sur place. Cette deuxième animation devrait s'effectuer en 4 secondes.
Notes de cours 📚
Animation Sprite Sheet
animation image par image