Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste :
issue150:inkscape

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Dernière révisionLes deux révisions suivantes
issue150:inkscape [2019/11/07 11:13] – auntieeissue150:inkscape [2019/11/07 13:46] – auntiee
Ligne 61: Ligne 61:
 setTimeout(moveSquare, 2500);** setTimeout(moveSquare, 2500);**
  
-Avez-vous noté ce qu'on a fait ? Au lieu de juste paramétrer l'attribut directement, j'ai créé une variable globale (« currentX »),puis lui ai ajouté 10 avant que nous utilisions le résultat calculé. J'ai aussi une déclaration « if » pour ramener la valeur à zéro si elle devient trop grosse, assurant que le carré ne va pas se déplacer jusqu'à l'infini. En quoi tout cela nous aide à créer une animation ? Maintenant, nous appelons la fonction de façon répétitive pour que le carré se déplace de 10 unités à chaque fois. Copiez/collez les lignes suivantes d'un seul bloc, pour être sûr qu'elle sont toutes lancées avant que les 2 secondes de délai initial ne soit terminé : +Avez-vous remarqué ce qu'on a fait ? Au lieu de juste paramétrer l'attribut directement, j'ai créé une variable globale (« currentX »),puis lui ai ajouté 10 avant que nous utilisions le résultat calculé. J'ai aussi une déclaration « if » pour ramener la valeur à zéro si elle devient trop grosse, assurant que le carré ne va pas se déplacer jusqu'à l'infini. En quoi tout cela nous aide à créer une animation ? Maintenant, nous appelons la fonction de façon répétitive pour que le carré se déplace de 10 unités à chaque fois. Copiez/collez les lignes suivantes d'un seul bloc, pour être sûr qu'elle sont toutes lancées avant que les 2 secondes de délai initial ne soit terminé : 
  
 setTimeout(moveSquare, 2000); setTimeout(moveSquare, 2000);
Ligne 78: Ligne 78:
 clearInterval(i);** clearInterval(i);**
  
-Bon. Je ne pense pas que ça inquiète beaucoup Pixar, mais il est vraiment animé. La création d'une longue liste d'appels setTimeout()  n'est vraiment pas grand'chose. Par chance, Javascript a une fonction adaptée, setInterval(), qui fait la même chose qu'une liste infinie d'appels setTimeout(). Elle retourne un seul nombre qui peut être utilisé avec la méthode clearInterval() pour arrêter le traitement quand vous en avez marre de voir bouger ce carré par saccades.+Bon. Je ne pense pas que ça inquiète beaucoup Pixar, mais il est bel et bien animé. La création d'une longue liste d'appels setTimeout() n'est vraiment pas génial. Par chance, JavaScript a une fonction adaptée, setInterval(), qui fait la même chose qu'une liste infinie d'appels setTimeout(). Elle retourne un seul nombre qui peut être utilisé avec la méthode clearInterval() pour arrêter le traitement quand vous en avez marre de voir bouger ce carré par saccades.
  
 var i = setInterval(moveSquare, 100); var i = setInterval(moveSquare, 100);
Ligne 95: Ligne 95:
 Still a bit fast for you? Increase the delay in the setInterval() call. Not fast enough? You can reduce the delay further, but browsers clamp setTimeout() and setInterval() to a lower limit, so it probably won’t have much effect. Instead you can increase the delta value so the square moves two or three units at a time. Or 4.25 if you want – neither JS nor SVG require everything to be integers.** Still a bit fast for you? Increase the delay in the setInterval() call. Not fast enough? You can reduce the delay further, but browsers clamp setTimeout() and setInterval() to a lower limit, so it probably won’t have much effect. Instead you can increase the delta value so the square moves two or three units at a time. Or 4.25 if you want – neither JS nor SVG require everything to be integers.**
  
-Maintenant que nous n'avons plus à taper la fonction setTimeout() à chaque étape de notre animation, nous pouvons rendre le déplacement plus fluid e en diminuant delta et en réduisant en même temps l'intervalle entre les appels de fonction :+Maintenant que nous n'avons plus à taper la fonction setTimeout() à chaque étape de notre animation, nous pouvons rendre le déplacement plus fluide en diminuant delta et en réduisant en même temps l'intervalle entre les appels de fonction :
  
 var delta = 1; var delta = 1;
Ligne 103: Ligne 103:
 clearInterval(i); clearInterval(i);
  
-Est-ce encore un peu rapide pour vous ? Augmentez le délai dans l'appel de setInterval(). Pas encore assez rapide ? Vous pouvez réduire encore le délai, mais les navigateurs bloquent setTimeout() et setInterval() à une limite basse ; aussi, ça n'aura pas beaucoup d'effet. À la place, vous pouvez augmenter la valeur de delta de sorte que le carré se déplace de 2 ou 3 unités à chaque fois. Ou de 4,25, si vous voulez - Ni JS ni SVG n'imposent qu'ils soient des entiers.+Est-ce encore un peu rapide pour vous ? Augmentez le délai dans l'appel de setInterval(). Pas encore assez rapide ? Vous pouvez réduire encore le délai, mais les navigateurs bloquent setTimeout() et setInterval() à une limite basse ; aussi, ça n'aura pas beaucoup d'effet. À la place, vous pouvez augmenter la valeur de delta de sorte que le carré se déplace de 2 ou 3 unités à chaque fois. Ou de 4,25, si vous voulez - Ni JS ni SVG n'imposent que les valeurs soient des entiers.
  
 **For a long time setTimeout() and setInterval() were the only practical way to run some JavaScript at the sort of regular intervals needed for animation. Over the past few years, however, browsers have gained more support for technologies needed to run games – 2D bitmap canvases, 3D graphics and a little thing called requestAnimationFrame(). In case the name didn’t give it away, this function is intended to make animation a little easier. Specifically it does so by calling a function just before the browser is about to display the next frame on screen (typically about 60 times per second). It’s like a setTimeout() where the delay is automatically set to to an optimal value by the browser.** **For a long time setTimeout() and setInterval() were the only practical way to run some JavaScript at the sort of regular intervals needed for animation. Over the past few years, however, browsers have gained more support for technologies needed to run games – 2D bitmap canvases, 3D graphics and a little thing called requestAnimationFrame(). In case the name didn’t give it away, this function is intended to make animation a little easier. Specifically it does so by calling a function just before the browser is about to display the next frame on screen (typically about 60 times per second). It’s like a setTimeout() where the delay is automatically set to to an optimal value by the browser.**
  
-Pendant longtemps, setTimeout() et setInterval() furent la seule façon pratique de lancer du Javascript à des intervalles réguliers nécessaires à une animation. Dans les dernières années, cependant, les navigateurs ont disposé d'un support pour les technologies nécessaires pour faire tourner des jeux - canevas 2D en bitmap, affichage 3D et une petite chose appelée requestAnimationFrame(). Au cas où le nom ne vous dit rien, cette fonction a tendance à faciliter la réalisation d'une animation. En particlulier, elle le fait en appelant une fonction juste avant que le navigateur ne se mette à afficher la trame suivante sur l'écran (en général, 60 fois par seconde). Elle ressemble à setTimeout(), avec un délai mis automatiquement à la valeur optimale par le navigateur.+Pendant longtemps, setTimeout() et setInterval() furent la seule façon pratique de lancer du JavaScript aux intervalles réguliers nécessaires à une animation. Dans les dernières années, cependant, les navigateurs ont disposé d'un support pour les technologies nécessaires pour faire tourner des jeux - canevas 2D en bitmap, affichage 3D et une petite chose appelée requestAnimationFrame(). Au cas où le nom ne vous dit rien, cette fonction a tendance à faciliter la réalisation d'une animation. En particulier, elle le fait en appelant une fonction juste avant que le navigateur ne se mette à afficher la trame suivante sur l'écran (en général, 60 fois par seconde). Elle ressemble à setTimeout(), avec un délai mis automatiquement à la valeur optimale par le navigateur.
  
 **In human terms 1/60 of a second is a pretty short delay, so to test this in the console you will probably want to increate the “delta” variable again, so that it’s more obvious that your square moves. **In human terms 1/60 of a second is a pretty short delay, so to test this in the console you will probably want to increate the “delta” variable again, so that it’s more obvious that your square moves.
Ligne 117: Ligne 117:
 Now you might be expecting me to introduce an equivalent animation function to setInterval(), but I’m afraid I’ll have to disappoint you. There’s no function that will repeatedly run a function just before each frame is redrawn. But what we can do is to call requestAnimationFrame() again from inside the animation function.** Now you might be expecting me to introduce an equivalent animation function to setInterval(), but I’m afraid I’ll have to disappoint you. There’s no function that will repeatedly run a function just before each frame is redrawn. But what we can do is to call requestAnimationFrame() again from inside the animation function.**
  
-À l'échelle humaine, 1/60e de seconde est un temps plutôt court ; aussi, pour le tester sur la console vous voudrez peut-être encore augmenter la variable « delta », de sorte que ça paraisse plus évident que le carré bouge.+À l'échelle humaine, 1/60e de seconde est un temps plutôt court ; aussi, pour le tester sur la console vous voudrez peut-être encore augmenter la variable « delta », de sorte que le déplacement du carré est plus évident.
  
 var delta = 10; var delta = 10;
Ligne 127: Ligne 127:
 **We’ll create a different animation function (shown above) for this next example. It’s similar to the previous one, except that it always moves the square by 1 unit, and stops when it reaches the right-hand side, rather than looping back round. This latter change is mainly so that the code doesn’t keep running indefinitely, otherwise it gets a bit tricky to proceed with the rest of this tutorial. Notice that we call requestAnimationFrame() to start the function running, but we also call this from within the “if” block, firing off another trip to our animation function just before the next frame is rendered.** **We’ll create a different animation function (shown above) for this next example. It’s similar to the previous one, except that it always moves the square by 1 unit, and stops when it reaches the right-hand side, rather than looping back round. This latter change is mainly so that the code doesn’t keep running indefinitely, otherwise it gets a bit tricky to proceed with the rest of this tutorial. Notice that we call requestAnimationFrame() to start the function running, but we also call this from within the “if” block, firing off another trip to our animation function just before the next frame is rendered.**
  
-Nous créerons une fonction d'animation différente (voir ci-dessus) pour ce nouvel exemple. Il est semblable au précédent, sauf que le carré se déplace toujours d'une unité et qu'il s'arrête qand il atteint le côté droit, plutôt que de tourner en rond pour le retour. Ce dernier changement est fait de telle sorte que le code ne continue pas à tourner indéfiniment ; autrement, ce serait un peu compliqué pour réaliser le reste de ce tutoriel. Notez que nous appelons requestAnimationFrame() pour commencer le lancement de la fonction, mais nous l'appelons aussi à l'intérieur du bloc « if », déclenchant un nouveau parcours pour notre fonction d'animation juste avant que le rendu de la trame suivante ne soit affiché.+Nous créerons une fonction d'animation différente (voir ci-dessus) pour ce nouvel exemple. Il est semblable au précédent, sauf que le carré se déplace toujours d'une unité et qu'il s'arrête quand il atteint le côté droit, plutôt que de tourner en rond pour le retour. Ce dernier changement est fait de telle sorte que le code ne continue pas à s'exécuter indéfiniment ; autrement, ce serait un peu compliqué pour réaliser le reste de ce tutoriel. Notez que nous appelons requestAnimationFrame() pour commencer le lancement de la fonction, mais nous l'appelons aussi à l'intérieur du bloc « if », déclenchant un nouveau parcours pour notre fonction d'animation juste avant que le rendu de la trame suivante ne soit affiché.
  
 **Now we’ve got an animation running, but we don’t really have any control over it. The duration of the animation will depend on how frequently requestAnimationFrame() fires in your browser, and all we can do is change “+ 1” to a different value to make the square move more or less on each iteration. But really that’s all we need to be able to do. So long as we know the exact time that the function is called, we can calculate how far into the animation we are, and therefore what position the square should be at. To achieve this, the function that is called by getAnimationFrame() receives a single parameter: a high-resolution timestamp.** **Now we’ve got an animation running, but we don’t really have any control over it. The duration of the animation will depend on how frequently requestAnimationFrame() fires in your browser, and all we can do is change “+ 1” to a different value to make the square move more or less on each iteration. But really that’s all we need to be able to do. So long as we know the exact time that the function is called, we can calculate how far into the animation we are, and therefore what position the square should be at. To achieve this, the function that is called by getAnimationFrame() receives a single parameter: a high-resolution timestamp.**
  
-Maintenant, notre animation tourne, mais nous n'avons vraiment aucun contrôle sur elle. La durée de l'animation dépendra du nombre de fois où requestAnimationFrame() se déclenchera dans votre navigateur et tout ce que nous pouvons faire est de changer « +1 » pour une autre valeur pour que le carré bouge plus ou moins rapidement à chaque itération.  Mais vraiment, c'est tout ce que nous sommes capables de faire. Tant que nous connaissons le moment exact où la fonction est appelée, nous pouvons calculer le temps que prendra l'animation, et par conséquent, où devrait en être le carré. Pour terminer cela, la fonction qui est appelée par getAnimationFrame() reçoit un seul paramètre : une horodatage en haute-résolution.+Maintenant, notre animation tourne, mais nous n'avons vraiment aucun contrôle sur elle. La durée de l'animation dépendra du nombre de fois où requestAnimationFrame() se déclenchera dans votre navigateur et tout ce que nous pouvons faire est de changer « +1 » pour une autre valeur pour que le carré bouge plus ou moins rapidement à chaque itération.  Mais vraiment, c'est tout ce que nous sommes capables de faire. Tant que nous connaissons le moment exact où la fonction est appelée, nous pouvons calculer le temps déjà pris par l'animation, et par conséquent, où devrait en être le carré. Pour faire cela, la fonction qui est appelée par getAnimationFrame() reçoit un seul paramètre : une horodatage en haute-résolution.
  
 **Let’s work on a practical example: suppose we want our animation to take 10 seconds. At 60 frames per second that’s about 600 movements our square will make, each of them a fraction of a unit. We could divide the total distance by 600 to calculate the exact amount of movement, but that will fail if we run the code on something that refreshes at 30 or 120 frames per second, or if some frames get dropped due to the load on the machine. A better idea is to track how long has passed since the start of the animation, and use that to calculate where the object should be. We can then set the coordinates to the new value, before we fire off another requestAnimationFrame() for the next step in the animation.** **Let’s work on a practical example: suppose we want our animation to take 10 seconds. At 60 frames per second that’s about 600 movements our square will make, each of them a fraction of a unit. We could divide the total distance by 600 to calculate the exact amount of movement, but that will fail if we run the code on something that refreshes at 30 or 120 frames per second, or if some frames get dropped due to the load on the machine. A better idea is to track how long has passed since the start of the animation, and use that to calculate where the object should be. We can then set the coordinates to the new value, before we fire off another requestAnimationFrame() for the next step in the animation.**
Ligne 139: Ligne 139:
 **The parameter that gets passed to our function is a value in milliseconds since the document was loaded. We don’t really care about that specific point in time – we need to know how long the animation itself has been running. What we need to do, therefore, is to record the timestamp the first time our function is called. On subsequent calls we can subtract that value from the latest timestamp to work out how far along the animation timeline we have progressed.** **The parameter that gets passed to our function is a value in milliseconds since the document was loaded. We don’t really care about that specific point in time – we need to know how long the animation itself has been running. What we need to do, therefore, is to record the timestamp the first time our function is called. On subsequent calls we can subtract that value from the latest timestamp to work out how far along the animation timeline we have progressed.**
  
-Le paramètre qui a été passé à notre fonction quand le document a été chargé est une valeur en millisecondes. Nous ne nous soucions vraiment pas de ce point spécifique au bon moment - nous avons besoin de savoir depuis combien de temps l'animation tourne. Par conséquent, ce que nous avons à faire, c'est d'enregistrer l'hotodatage lors du premier appel de la fonction.  Lors des appels suivants, nous pouvons soustraire cette valeur du plus récent horodatage pour calculer de combien nous avons progressé sur la durée de l'animation.+Le paramètre qui a été passé à notre fonction quand le document a été chargé est une valeur en millisecondes. Nous ne nous soucions vraiment pas de ce moment spécifique - nous avons besoin de savoir depuis combien de temps l'animation tourne. Par conséquent, ce que nous avons à faire, c'est d'enregistrer l'hotodatage lors du premier appel de la fonction.  Lors des appels suivants, nous pouvons soustraire cette valeur du plus récent horodatage pour calculer de combien nous avons progressé sur la durée de l'animation.
  
 **Let’s start by initialising a few variables. We’ll create a variable to hold our starting position, setting it to 10. Next we have a “duration” (in milliseconds) to hold the time we want our animation to run for, and “endX” for the X coordinate we want to end up with. Putting these into variables makes it easier to modify the animation to run at a different speed or cover a different distance. Finally we’ll include a “startTime” variable, with an “undefined” value initially, into which we’ll store a copy of the timestamp we receive the first time our animation code is called. **Let’s start by initialising a few variables. We’ll create a variable to hold our starting position, setting it to 10. Next we have a “duration” (in milliseconds) to hold the time we want our animation to run for, and “endX” for the X coordinate we want to end up with. Putting these into variables makes it easier to modify the animation to run at a different speed or cover a different distance. Finally we’ll include a “startTime” variable, with an “undefined” value initially, into which we’ll store a copy of the timestamp we receive the first time our animation code is called.
Ligne 159: Ligne 159:
 **Now for our reworked animation function. The main animation code is fairly similar to the previous incarnation, except that we work with the timestamp that is passed to the function in order to calculate the new X value. The first time the function is called we don’t need to update the X coordinate – by definition we’re at the start of the animation – so we just store the current timestamp, then queue up another call before the next frame, then exit. On subsequent calls, the startTime is no longer “undefined” so this part of the function is skipped entirely.** **Now for our reworked animation function. The main animation code is fairly similar to the previous incarnation, except that we work with the timestamp that is passed to the function in order to calculate the new X value. The first time the function is called we don’t need to update the X coordinate – by definition we’re at the start of the animation – so we just store the current timestamp, then queue up another call before the next frame, then exit. On subsequent calls, the startTime is no longer “undefined” so this part of the function is skipped entirely.**
  
-Pour ce qui est de notre fonction d'animation retravaillée, le principal code de l'animation est très similaire à la précédente version, sauf que nous travaillons avec l'horodatage qui est passé à la fonction de façon à calculer la nouvelle valeur de X. La première fois que la fonction est appelée, nous n'avons pas besoin de mettre à jour la coordonnée X - par définition, nous sommes au début de l'animation - ; aussi, nous ne faisons qu'enregistrer l'horodatage actuel.  Puis, un autre appel suit avant la prochaine trame, et nous sortons. Lors des appels suivants, startTime n'est plus indéfini, et cette partie de la fonction est sautée complètement.+Pour ce qui est de notre fonction d'animation retravaillée, le principal code de l'animation est très similaire à la précédente version, sauf que nous travaillons avec l'horodatage qui est passé à la fonction de façon à calculer la nouvelle valeur de X. La première fois que la fonction est appelée, nous n'avons pas besoin de mettre à jour la coordonnée X - par définition, nous sommes au début de l'animation - ; aussi, nous ne faisons qu'enregistrer l'horodatage actuel. Puis, un autre appel suit avant la prochaine trame, et nous sortons. Lors des appels suivants, startTime n'est plus indéfini, et cette partie de la fonction est sautée complètement.
  
 **By storing the initial timestamp outside the function, we can calculate how long the animation has been running. Since the two timestamps are in milliseconds, we’ll divide the result by 1000 to convert it to seconds. Since we know the total time for the animation, a quick division will give the proportion of the animation that has passed: we can then multiply that value by the total distance to travel in order to calculate the new X position for that moment in time. Code is shown below.** **By storing the initial timestamp outside the function, we can calculate how long the animation has been running. Since the two timestamps are in milliseconds, we’ll divide the result by 1000 to convert it to seconds. Since we know the total time for the animation, a quick division will give the proportion of the animation that has passed: we can then multiply that value by the total distance to travel in order to calculate the new X position for that moment in time. Code is shown below.**
Ligne 167: Ligne 167:
 **Running this should produce a smooth animation that takes 10s to complete. Re-run the previous block of “var” lines to reset everything, then the final requestAnimationFrame() call to kick it off again. Try changing the values in the variables to alter the distance the square moves, or the time it takes to perform the animation. In every case you should find that the animation is, if not smooth, at least a lot smoother than you saw with setTimeout() and setInterval().** **Running this should produce a smooth animation that takes 10s to complete. Re-run the previous block of “var” lines to reset everything, then the final requestAnimationFrame() call to kick it off again. Try changing the values in the variables to alter the distance the square moves, or the time it takes to perform the animation. In every case you should find that the animation is, if not smooth, at least a lot smoother than you saw with setTimeout() and setInterval().**
  
-En tournant, il produira une animation fluide qui prendra 10 s en tout. Relancez le bloc précédent des lignes « var » pour tout remettre à zéro, puis finissez avec un dernier appel requestAnimationFrame() pour redémarrer. Essayez de changer les valeurs des variables pour modifier la distance de déplacement du carré, ou le temps pris pour dérouler l'animation. Dans chaque cas, vous devriez trouver que l'animation est, sinon fluide, au moins plus fluide que celle que vous vîmes avec setTimeout() et setInterval().+Une fois lancé, il produira une animation fluide qui prendra 10 s en tout. Relancez le bloc précédent des lignes « var » pour tout remettre à zéro, puis finissez avec un dernier appel requestAnimationFrame() pour redémarrer. Essayez de changer les valeurs des variables pour modifier la distance de déplacement du carré, ou le temps pris pour dérouler l'animation. Dans chaque cas, vous devriez trouver que l'animation est, sinon fluide, au moins plus fluide que celle que vous vîtes avec setTimeout() et setInterval().
  
 **Creating all these variables outside a function (so-called “global” variables) is generally seen as bad form in the programming world. It also makes it tricky to animate more than one thing, as they’ll all potentially be sharing the same global variables. A better approach is to encapsulate all the variables in a single JavaScript object, then attach that to the SVG element you’re trying to manipulate. Here’s the code above rewritten to work in this way (shown right).** **Creating all these variables outside a function (so-called “global” variables) is generally seen as bad form in the programming world. It also makes it tricky to animate more than one thing, as they’ll all potentially be sharing the same global variables. A better approach is to encapsulate all the variables in a single JavaScript object, then attach that to the SVG element you’re trying to manipulate. Here’s the code above rewritten to work in this way (shown right).**
  
-La création de toutes ces variables en dehors d'une fonction (appelées variables « globales ») est généralement vu comme une mauvaise pratique dans le monde de la programmation. Cela rend difficile l'animation de plus d'un objet, car ils se partagent tous théoriquement les mêmes variables globales. Une meilleure approche consiste à encapsuler toutes les variables dans un seul ojet Javascript, puis de l'attacher à l'élément SVG que vous essayez de manipuler. Voici, à droite, le code réécrit de cette façon.+La création de toutes ces variables en dehors d'une fonction (appelées variables « globales ») est généralement vu comme une mauvaise pratique dans le monde de la programmation. Cela rend difficile l'animation de plus d'un objet, car ils se partagent tous théoriquement les mêmes variables globales. Une meilleure approche consiste à encapsuler toutes les variables dans un seul ojet JavaScript, puis de l'attacher à l'élément SVG que vous essayez de manipuler. Voici, à droite, le code réécrit de cette façon.
  
 **Notice that I’ve removed the “X” from the end of the parameter names, and created a new “attribute” entry with a value of “x”. This starts to make the code more generic: you could change the “x” to a “y” in order to animate movement in the vertical direction, or “r” to animate the radius of a circle. **Notice that I’ve removed the “X” from the end of the parameter names, and created a new “attribute” entry with a value of “x”. This starts to make the code more generic: you could change the “x” to a “y” in order to animate movement in the vertical direction, or “r” to animate the radius of a circle.
Ligne 183: Ligne 183:
 **At the moment our animation is also strictly linear: the attributes are changed at a constant rate over time. More “natural” animation can be achieved with rates that vary – accelerating and decelerating  over the course of the movement. The maths to produce such effects, referred to as an “easing function”, is well outside the scope of this series. That alone is a good reason why CSS animation, SMIL, and third-party animation libraries are usually a better option than rolling your own JS animations from scratch. But for simple animations, or just your own education, it’s good to see how the same code you might use to dynamically modify your SVG in discrete steps, can also be put to work to achieve continuous effects.** **At the moment our animation is also strictly linear: the attributes are changed at a constant rate over time. More “natural” animation can be achieved with rates that vary – accelerating and decelerating  over the course of the movement. The maths to produce such effects, referred to as an “easing function”, is well outside the scope of this series. That alone is a good reason why CSS animation, SMIL, and third-party animation libraries are usually a better option than rolling your own JS animations from scratch. But for simple animations, or just your own education, it’s good to see how the same code you might use to dynamically modify your SVG in discrete steps, can also be put to work to achieve continuous effects.**
  
-Pour l'instant, notre animation est strictement linéaire : les attributs sont modifiés à un rythme régulier. Une animation plus « naturelle » peut être réalisée avec des rythmes qui varient - accélération et décélération durant la durée du mouvement. Les maths pour produire de tels effets, en se référant à une fonction « de facilitation », sont en dehors du champ de cette série. Rien que ça est une bonne raison pour laquelle l'animation avec du CSS, SMIL et des bibliothèques d'animation tierces est généralement une meilleure option que de dérouler vos propres animations créées de rien en JS. Mais pour des animations simples, ou simplement votre formation, il est bien de voir comment le même code que vous pourriez utiliser pour modifier dynamiquement votre SVG par incréments, peut aussi être mis en œuvre pour réaliser des effets continus.+Pour l'instant, notre animation est strictement linéaire : les attributs sont modifiés à un rythme régulier. Une animation plus « naturelle » peut être réalisée avec des rythmes qui varient - accélération et décélération durant la durée du mouvement. Les maths pour produire de tels effets, en se référant à une fonction « de facilitation », sont en dehors du champ de cette série. C'est une bonne raison pour laquelle l'animation avec du CSS, SMIL et des bibliothèques d'animation tierces est généralement une meilleure option que de dérouler vos propres animations créées de rien en JS. Mais pour des animations simples, ou simplement votre formation, il est bien de voir comment le même code que vous pourriez utiliser pour modifier dynamiquement votre SVG par incréments, peut aussi être mis en œuvre pour réaliser des effets continus.
  
  
issue150/inkscape.txt · Dernière modification : 2019/11/07 14:03 de andre_domenech