Différences

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

--- issue152:inkscape [2020/01/08 15:14] – andre_domenech
+++ issue152:inkscape [2020/01/08 15:36] (Version actuelle) – auntiee
@@ Ligne 101: / Ligne 101: @@
 Pour notre animation, cependant, nous voulons une valeur qui varie linéairement vers le haut et vers le bas, sans saut brusque entre les itérations. Nous voulons un tracé triangulaire :
-Comme vous le voyez, pour un nombre impair d'itérations, nous voulons que l'animation se déroule comme d'habitude, mais pour un nombre pair d'itérations, nous voulons que la valeur de la position décroisse plutôt que croisse. Dans le code ci-dessus, c'est fait en créant une variable « skewXDirection » qui contient le modulo du temps de l'exécution en cours quand il est divisé par deux fois la durée. Cette valeur montera à partir de zéro au début d'une itération impaire, passant par la valeur de la durée à la fin de l'itération impaire, et continuant jusqu'à deux fois la valeur de la durée à la fin de l'itération impaire suivante. Nous avons créé une autre courbe en dents de scie, mais, cette fois, le temps court de zéro à durationx2 sur l'ensemble de deux itérations.
+Comme vous le voyez, pour un nombre impair d'itérations, nous voulons que l'animation se déroule comme d'habitude, mais pour un nombre pair d'itérations, nous voulons que la valeur de la position décroisse plutôt que croisse. Dans le code ci-dessus, c'est fait en créant une variable « skewXDirection » qui contient le modulo du temps de l'exécution en cours quand il est divisé par deux fois la durée. Cette valeur montera à partir de zéro au début d'une itération impaire, passant par la valeur de la durée à la fin de l'itération impaire, et continuant jusqu'à deux fois la valeur de la durée à la fin de l'itération paire suivante. Nous avons créé une autre courbe en dents de scie, mais, cette fois, le temps court de zéro à durationx2 au cours de deux itérations.
 **The “if” statement that follows checks to see if this direction value is greater than the duration: if it is then we must be on an even cycle. In that case the “skewXPosition” variable (which, if you recall, ranges from 0 to 1) is subtracted from 1, so as the animation progresses the final position value first steps upwards, then steps downwards, before the cycle repeats in a triangle wave pattern.
@@ Ligne 109: / Ligne 109: @@
 Phew! That was a lot to take in for a few lines of code. If you find it easier to follow, try adding some console.log() lines amongst the code so you can see how the values change in the developer tools.**
-La déclaration « if » qui suit vérifie si cette valeur de direction est plus grande que la durée : si oui, alors nous sommes dans un cycle impair. Dans ce cas, la variable « skewXPosition » (qui, pour mémoire, varie de 0 à 1) est soustraite de 1, de sorte que l'animation progresse vers la position finale, d'abord en croissant, puis en décroissant, avant que le cycle ne se répète sous la forme d'une courbe triangulaire.
+La déclaration « if » qui suit vérifie si cette valeur de direction est plus grande que la durée : si oui, alors nous sommes dans un cycle pair. Dans ce cas, la variable « skewXPosition » (qui, pour mémoire, varie de 0 à 1) est soustraite de 1, de sorte que l'animation progresse vers la position finale, d'abord en croissant, puis en décroissant, avant que le cycle ne se répète sous la forme d'une courbe triangulaire.
 La dernière étape du calcul de la valeur réelle est pour multiplier la position actuelle dans le cycle par l'étendue totale de l'animation, puis d'y ajouter la valeur minimum pour replacer le résultat final dans la bonne tranche de nombres.
-Ouf ! Ça fait beaucoup à prendre en compte en si peu de lignes de code. Si ça vous permet de suivre plus facilement, essayez d'ajouter quelques lignes console.log() au milieu du code ; ainsi, vous pourrez voir les changements de valeur dans les outils du développeur.
+Ouf ! Ça fait beaucoup à prendre en compte en si peu de lignes de code. Pour vous permettre de suivre plus facilement, essayez d'ajouter quelques lignes console.log() au milieu du code ; ainsi, vous pourrez voir les changements de valeur dans les outils du développeur.
 **With our final value calculated, the last step is to update the transform attribute to hold both the rotate() and the skewX() functions. Extend the previous template string to this:
@@ Ligne 119: / Ligne 119: @@
 Loading the file into the browser, you should see the square being skewed as it rotates. But you’ll also notice that our simple, constrained rotation in the middle of the screen has turned into a whirling dervish that swoops out of the bounds of our image before flying back in and then setting off into the distance once more. Next time we’ll discuss why this is happening, and finish this little animation by adding scaling and translation. In the meantime why not test your own understanding of this code by adding the necessary lines to make the shape also skew in the Y direction, at a different frequency to the skewX() effect.**
-Avec le calcul de notre valeur finale, la dernière étape est de mettre à jour l'attribut transform pour garder en même temps les fonctions rotate() et skewX(). Complétez le modèle précédent avec ceci :
+Avec le calcul de notre valeur finale, la dernière étape est de mettre à jour l'attribut transform pour garder en même temps les fonctions rotate() et skewX(). Complétez la chaîne modèle précédente avec ceci :
-En chargeant le fichier dans le navigateur, vous devriez voir le carré qui se déforme tout en tournant. Mais vous devriez noter aussi que notre simple rotation contrainte au milieu du de l'écran s'est transformée en un derviche tournant qui descend hors des limites de notre image avant de revenir à l'intérieur et ensuite de redisparaître dans le lointain une nouvelle fois. La prochaine fois, nous  expliquerons pourquoi ça arrive, puis finirons cette petite animation en ajoutant le changement d'échelle et la translation. Entre temps, pourquoi ne pas tester votre compréhension toute fraîche de ce code en ajoutant les lignes nécessaires pour que la forme se déforme sur l'axe Y, à une fréquence différente de l'effet skewX().
+En chargeant le fichier dans le navigateur, vous devriez voir le carré qui se déforme tout en tournant. Mais vous devriez noter aussi que notre simple rotation contrainte au milieu de l'écran s'est transformée en un derviche tournant qui descend hors des limites de notre image avant de revenir à l'intérieur et ensuite de redisparaître dans le lointain une nouvelle fois. La prochaine fois, nous verrons les raisons de ce comportement, puis finirons cette petite animation en ajoutant le changement d'échelle et la translation. Entre temps, pourquoi ne pas tester votre compréhension de ce code en ajoutant les lignes nécessaires pour que la forme se déforme sur l'axe Y, à une fréquence différente de l'effet skewX().