From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- .../canvas_api/tutorial/basic_animations/index.md | 152 +++++++++++---------- 1 file changed, 77 insertions(+), 75 deletions(-) (limited to 'files/fr/web/api/canvas_api/tutorial/basic_animations') diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md index e37d15eba9..fecfd63ca6 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md @@ -11,61 +11,56 @@ tags: translation_of: Web/API/Canvas_API/Tutorial/Basic_animations original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques --- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}
+{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}} -

Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques.

+Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques. -

La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage.

+La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage. -

Les étapes d'une animation basique

+## Les étapes d'une animation basique -

Voici les étapes à suivre à chaque image dessinée (frame) :

+Voici les étapes à suivre à chaque image dessinée (frame) : -
    -
  1. Effacer le canevas
    - À moins que les formes que vous voulez dessiner remplissent complètement le canevas (par exemple une image en arrière-plan), vous devrez effacer toutes les formes qui ont été dessinées précédemment. La manière la plus simple de le faire est d'utiliser la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
    2. -
  2. Enregistrer l'état du canevas
    - Si vous changez des configurations qui affectent l'état du canevas (comme le style, les transformations, etc.), et vous voulez vous assurer que c'est l'état original qui est utilisé chaque fois que le canevas est redessiné, alors vous devez enregistrer l'état original.
    3. -
  3. Dessiner les formes animées
    - Vous effectuez toutes les opérations pour afficher l'image.
    4. -
  4. Restaurer l'état du canevas
    - Si l'état du canevas a été sauvegardé, vous  restaurez cet état avant le prochain rendu.
    5. -
+1. **Effacer le canevas** + À moins que les formes que vous voulez dessiner remplissent complètement le canevas (par exemple une image en arrière-plan), vous devrez effacer toutes les formes qui ont été dessinées précédemment. La manière la plus simple de le faire est d'utiliser la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}. +2. **Enregistrer l'état du canevas** + Si vous changez des configurations qui affectent l'état du canevas (comme le style, les transformations, etc.), et vous voulez vous assurer que c'est l'état original qui est utilisé chaque fois que le canevas est redessiné, alors vous devez enregistrer l'état original. +3. **Dessiner les formes animées** + Vous effectuez toutes les opérations pour afficher l'image. +4. **Restaurer l'état du canevas** + Si l'état du canevas a été sauvegardé, vous  restaurez cet état avant le prochain rendu. -

Contrôle d'une animation

+## Contrôle d'une animation -

Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle for.

+Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle `for`. -

Il nous faut donc un moyen d'exécuter nos fonctions de dessin sur une période de temps. Il existe à ce jour trois manières de le faire.

+Il nous faut donc un moyen d'exécuter nos fonctions de dessin sur une période de temps. Il existe à ce jour trois manières de le faire. -

Mises à jour planifiées

+### Mises à jour planifiées -

Les fonctions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, et {{domxref("window.requestAnimationFrame()")}} peuvent être utilisées :

+Les fonctions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, et {{domxref("window.requestAnimationFrame()")}} peuvent être utilisées : -
-
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
-
Lance la fonction définie par function chaque delay (délai) millisecondes.
-
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
-
Exécute la fonction définie par function dans delay millisecondes.
-
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
-
Dit au navigateur qu'on veut afficher une animation et lui demande d'appeler la fonction callback pour mettre à jour cette animation avant de dessiner la prochaine image.
-
+- {{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}} + - : Lance la fonction définie par `function` chaque `delay` _(délai)_ millisecondes. +- {{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}} + - : Exécute la fonction définie par `function` dans `delay` millisecondes. +- {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}} + - : Dit au navigateur qu'on veut afficher une animation et lui demande d'appeler la fonction `callback` pour mettre à jour cette animation avant de dessiner la prochaine image. -

Si vous n'avez pas besoin d'interaction utilisateur, vous pouvez utiliser la fonction setInterval(), elle va exécuter périodiquement votre code.

+Si vous n'avez pas besoin d'interaction utilisateur, vous pouvez utiliser la fonction `setInterval()`, elle va exécuter périodiquement votre code. -

Si vous voulez faire un jeu, et utiliser les événements du clavier et de la souris pour contrôler l'animation, vous pouvez utiliser setTimeout(). En utilisant des {{domxref("EventListener")}}, on peut récupèrer chaque interaction et d'exécuter nos fonctions d'animation.

+Si vous voulez faire un jeu, et utiliser les événements du clavier et de la souris pour contrôler l'animation, vous pouvez utiliser `setTimeout()`. En utilisant des {{domxref("EventListener")}}, on peut récupèrer chaque interaction et d'exécuter nos fonctions d'animation. -

Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible.

+Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible. -
-

Note : Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article L'anatomie d'un jeu vidéo dans notre section Développement de jeux vidéo.

-
+> **Note :** Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article [L'anatomie d'un jeu vidéo](/fr/docs/Jeux/Anatomie) dans notre section [Développement de jeux vidéo](/fr/docs/Jeux). -

Un système terrestre animé

+## Un système terrestre animé -

Cette exemple anime un petit modèle de notre système terrestre.

+Cette exemple anime un petit modèle de notre système terrestre. -
var sun = new Image();
+```js
+var sun = new Image();
 var moon = new Image();
 var earth = new Image();
 function init(){
@@ -112,17 +107,20 @@ function draw() {
 }
 
 init();
-
+``` - +```html hidden + +``` -

{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "canvas_animation1.png")}}

+{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "canvas_animation1.png")}} -

Une horloge animée

+## Une horloge animée -

Cette exemple dessine une horloge animée qui affiche l'heure actuelle.

+Cette exemple dessine une horloge animée qui affiche l'heure actuelle. -
function clock(){
+```js
+function clock(){
   var now = new Date();
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.save();
@@ -137,7 +135,7 @@ init();
 
   // Marquage des heures
   ctx.save();
-  for (var i=0;i<12;i++){
+  for (var i=0;i<12;i++){
     ctx.beginPath();
     ctx.rotate(Math.PI/6);
     ctx.moveTo(100,0);
@@ -149,7 +147,7 @@ init();
   // Marquage des minutes
   ctx.save();
   ctx.lineWidth = 5;
-  for (i=0;i<60;i++){
+  for (i=0;i<60;i++){
     if (i%5!=0) {
       ctx.beginPath();
       ctx.moveTo(117,0);
@@ -163,7 +161,7 @@ init();
   var sec = now.getSeconds();
   var min = now.getMinutes();
   var hr  = now.getHours();
-  hr = hr>=12 ? hr-12 : hr;
+  hr = hr>=12 ? hr-12 : hr;
 
   ctx.fillStyle = "black";
 
@@ -219,17 +217,21 @@ init();
   window.requestAnimationFrame(clock);
 }
 
-window.requestAnimationFrame(clock);
+window.requestAnimationFrame(clock); +``` - +```html hidden + +``` -

{{EmbedLiveSample("Une_horloge_animée", "180", "180", "canvas_animation2.png")}}

+{{EmbedLiveSample("Une_horloge_animée", "180", "180", "canvas_animation2.png")}} -

Un panorama défilant en boucle

+## Un panorama défilant en boucle -

Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une image du parc Yosemite National récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas.

+Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une [image du parc Yosemite National](http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg) récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas. -
var img = new Image();
+```js
+var img = new Image();
 
 // Variables utilisateur - les personnaliser pour changer l'image qui défile, ses
 // directions, et la vitesse.
@@ -255,17 +257,17 @@ img.onload = function() {
     imgW = img.width * scale;
     imgH = img.height * scale;
 
-    if (imgW > CanvasXSize) {
+    if (imgW > CanvasXSize) {
         // image plus grande que le canvas
         x = CanvasXSize - imgW;
     }
-    if (imgW > CanvasXSize) {
+    if (imgW > CanvasXSize) {
         // largeur de l'image plus grande que le canvas
         clearX = imgW;
     } else {
         clearX = CanvasXSize;
     }
-    if (imgH > CanvasYSize) {
+    if (imgH > CanvasYSize) {
         // hauteur de l'image plus grande que le canvas
         clearY = imgH;
     } else {
@@ -282,30 +284,30 @@ img.onload = function() {
 function draw() {
     ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
 
-    // si image est <= taille du canvas
-    if (imgW <= CanvasXSize) {
+    // si image est <= taille du canvas
+    if (imgW <= CanvasXSize) {
         // réinitialise, repart du début
-        if (x > CanvasXSize) {
+        if (x > CanvasXSize) {
             x = -imgW + x;
         }
         // dessine image1 supplémentaire
-        if (x > 0) {
+        if (x > 0) {
             ctx.drawImage(img, -imgW + x, y, imgW, imgH);
         }
         // dessine image2 supplémentaire
-        if (x - imgW > 0) {
+        if (x - imgW > 0) {
             ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
         }
     }
 
-    // image est > taille du canvas
+    // image est > taille du canvas
     else {
         // réinitialise, repeart du début
-        if (x > (CanvasXSize)) {
+        if (x > (CanvasXSize)) {
             x = CanvasXSize - imgW;
         }
         // dessine image supplémentaire
-        if (x > (CanvasXSize-imgW)) {
+        if (x > (CanvasXSize-imgW)) {
             ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
         }
     }
@@ -314,21 +316,21 @@ function draw() {
     // quantité à déplacer
     x += dx;
 }
-
+``` -

En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables CanvasXZSize et CanvasYSize dans le code JavaScript.

+En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables `CanvasXZSize` et `CanvasYSize` dans le code JavaScript. -
<canvas id="canvas" width="800" height="200"></canvas>
+```html + +``` -

{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}}

+{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}} -

Autres exemples

+## Autres exemples -
-
Un raycaster basique avec canvas
-
Un bon exemple d'animation contrôlée par le clavier.
-
Animations avancées
-
Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre.
-
+- [Un raycaster basique avec canvas](/fr/docs/Un_raycaster_basique_avec_canvas) + - : Un bon exemple d'animation contrôlée par le clavier. +- [Animations avancées](/fr/docs/Tutoriel_canvas/Advanced_animations) + - : Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre. -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}

+{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}} -- cgit v1.2.3-54-g00ecf