French subtitles

← cs255_unit1_08_s_Animation

Get Embed Code
7 Languages

Showing Revision 1 created 04/21/2013 by Maude MARQUANT.

  1. Jetons un oeil à la solution pour ce problème, c'est un peu délicat. Tout d'abord,
  2. en haut de notre fichier, nous déclarons deux nouvelles variables, frameRate et frame. Maintenant,
  3. frameRate représente combien de fois nous aimerions effectivement appeler la fonction "animate".
  4. frame est une variable que nous allons utiliser pour représenter quel est le cadre courant
  5. dans notre "flip book". Puisque nous avons déjà notre gamme de cadres (frames) disponible, la prochaine
  6. étape est de parcourir notre "assert" prédéfinit, et de charger chacune des images
  7. définies dans le tableau de cadres. Ceci suit les même trois étapes du processus que nous
  8. avons vu avant : créer une nouvelle image, mettre son résultat de chargement et puis définir sa source.
  9. Ceci fait on peut réellement appeler cette fonction "setInterval", qui appellera
  10. la fonction "animate" du "frameRate" que nous avons fourni avant. Maintenant
  11. la fonction "animate" a une logique un peu délicate à l'intérieur. Tout d'abord, nous
  12. avons notre compteur de vues que nous avons défini. Nous utilisons cela pour définir quelle image
  13. du tableau de cardre nous devons afficher sur le canvas, et bien sûr, à notre belle
  14. position de 192 par 192. Une fois que nous avons dessiné le cadre actuel,
  15. nous devons l'incrémenter, et c'est là que ce petit morceau de math arrive.
  16. Ce que nous faisons, c'est incrémenter le compteur "frame", puis on fait le modulo par la taille du tableau "frames".
  17. Ce qui se passera ici, c'est que si le compteur "frame" devient plus long que la taille du tableau "frames",
  18. la fonction modulo bouclera et retournera à 0, sans avoir à déclarer toute
  19. autre condition if. Il s'agit d'un beau petit morceau de maths que vous
  20. devriez mettre dans votre code. Votre employeur sera impressionné par cela. Maintenant si vous
  21. avez suivi tout le code, vous devriez voir quelque chose comme ceci courant autour sur l'écran.
  22. Si vous le remarquerez, quelque chose n'a pas l'air d'être exactement bon.
  23. Vous obtenez effectivement chacune des images dessinées sur chacune des autres, créant ce genre
  24. d'effet d'auréole. Il y a une raison à cela. Il est intéressant de noter que la toile (le canvas)
  25. ne efface pas lui-même chaque image. Au lieu de cela il vous permet de simplement garder un
  26. empilage de pixels sur ce que vous aviez. Afin de se débarrasser de cet effet de rémanence,
  27. vous devez mettre cette ligne que nous avons laissé commodément hors de notre fonction précédente
  28. dedans, et c'est "context.clearRect". Ce que cela va faire, c'est effectivement effacer tous les
  29. pixels à une valeur par défaut permettant de redessiner en au-dessus de celui-ci.
  30. Donc vous n'obtiendrez pas les images précédentes dessinées sur l'autre.
  31. Le résultat est un joli petit robot courant sur votre écran, tout comme
  32. il se doit. Le résultat avec "clearRect" est ce robot marchant, joli et fantaisiste.