Différences

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

--- issue153:inkscape [2020/02/07 08:07] – tran d52fr
+++ issue153:inkscape [2020/02/09 09:02] – d52fr
@@ Ligne 54: / Ligne 54: @@
 Reload the page and we’ve got what we expected: a square that rotates and skews in-place at the top-left of the screen. Our last step is to move it back to (50, 50) with an extra translate() step inserted to the start of the list, whose values are hard-coded (next page, top right).**
+En rechargeant maintenant la page, nous voyons que, en fait que les choses ont empirées ! Maintenant, le carré tourne sur une étendue encore plus grande qu'avant, passant le plus clair de son temps en doehors des limites. La raison en est simple : souvenez-vous que nous avons utilisé la version à trois paramètres de la fonction de transformation rotate() ; aussi, même si notre objet est centré sur (0, 0), il tourne encore autour de (50, 50). Maintenant, pour y parer, nous pouvons utiliser la fonction à une seule valeur et la ligne où nous règlons la valeur de l'attribut transform devient ainsi (en bas à droite).
+Rechargez la page et nous obtenons ce que nous attendions : un carré qui tourne et se déforme sur place en haut à gauche de l'écran. Notre dernière étape est de le ramener à (50, 50) avec un mouvement translate() inséré au début de laliste, dont les valeurs sont codées en dur (pae suivante, en haut à droite).
 **Note that the transformations are actually applied in reverse order: first the skewY(), then skewX(), then rotate() then finally translate(). When all we had was rotate and skew functions the order made little difference, but adding the translate() makes a huge difference. Put it at the end of the list, and we’re back to the same problem with the square zooming around as it skews. At the start of the list, however, we’ve got a nicely controlled square, rotating and skewing whilst never leaving the middle of the screen.
 To complete our set of transform functions, let’s add a scale(), so that our square also grows and shrinks. This function can take one or two parameters to indicate the scale factor: if only one is provided then the object is scaled equally in both the x and y directions; if you wish to scale the two directions differently, then you have to provide two parameters.**
+Notez que les transformations sont réellement appliquées dans l'ordre inverse : d'abord skewY(), puis kewX(), puis rotate() et, enfin, translate(). Quand tout ce que nous avions était des fonctions de rotations et de déformation, l'ordre n'avait que peu d'importance, mais l'ajout de translate() fait une énorme différence. Mettez-la à la fin de liste et vous reviendrez au même problème avec le carré qui va et vient pendant qu'il se déforme. Cependant, placée au début de la liste, nous aons un carré bien piloté qui tourne et se déforme sans jamais quitter le milieu de l'écran.
+Pour compléter notre ensemble de fonctions de transformation, ajoutons scale(), de sorte que notre carré grandit et rapetisse. Cette fonction peut prendre un ou deux paramètes pour indiquer le facteur d'échelle : si un seul paramètre est fourni, alors l'objet change de taille à égalité dans les directions x et y ; si vous souhaitéz des mises à l'échelle différentes dans les deux directions, vous devez alors fournir deux paramètres.
 **Note, however, that there’s no parameter for the center point of the scaling operation. As with the skew functions, your object has to be positioned with its center at (0, 0) if you don’t want it to move as well as change size. Since we’ve already handled this problem for skewing, we just need to ensure that our scale() function is put into the transform attribute after the translate(), to ensure that the scale operation is performed before the translation.
 To make our animation more interesting we’re going to animate the change in x and y scale separately, over different time periods but within the same range of 0.1 (one tenth of the width or height) to 3.0 (treble the width or height). We’ll encompass these parameters as two more sets of properties in the group.animProperties object (middle right).**
+Notez, cependant, qu'il n'y a pas de paramètre pour un point central de l'opération de mise à l'échelle. Comme pour les focntions skew, votre objet doit être centré à (0, 0) si vous ne voulez pas qu'il bouge pendant qu'il change de taille. Comme nous avons déjà géré ce problème pour la déformation, nous avons juste à vérifier que notre focntion scale() est placée dans l'attribut transform parès translate(), pour assurer que l'opération de mise à l'échelle est réalisée avant la translation.
+Pour rendre notre animation plus intéressante, nous allons animer la modification d'échelle séparément sur x et sur y, à des instants différents dans la même plage de 0,1 (un dixième de largeur et de hauteur à 3,0 (le triple de la largeur ou de la hauteur). Nous inclurons ces paramètres comme deux nouveaux jeux de propriétés dans l'objet group.animProperties (à droite, au milieu).
 **Like the skew functions we also want to animate from the minimum to the maximum, then back again – as opposed to continuously going in one direction as we did with rotate(). We therefore need a couple of blocks of code to calculate the relevant value at any given time point, changing direction after each period. Below is the code for the x-axis scaling – compare it to the equivalent block for skewX() from last month and you should be able to reproduce code for the y-axis scaling yourself.
@@ Ligne 68: / Ligne 80: @@
 At last we have our object rotating, skewing and scaling, all while centered in the browser window – though a static screenshot doesn’t really do it justice.
 I’m going to finish this month with a couple of exercises for you to try, which build on the animation we’ve created over these previous few articles:**
+Comme pour les fonctions skew, nous voulons les animer entre un minimum et un maxium, puis revenir - contrairement au mouvment dans un seul sens que nous avions avec rotate(). Par conséquen, nous avons besoin de quelques blocs de codes pour calculer la valeur correcte à tout instant, en modifiant la direction après chaque période. Ci-dssous, voici le code pour la mise à l'échelle sur l'axe des x ; comparez-le au bloc équivalent du mois dernier pour skewX() et vous devriez pouvir reproduire vous-même le code pour la mise à l'échelle sur l'axe des y.
+Et, bien sûr, nous avons besoin d'ajouter notre fonction scale() et deux nouveaux paramètres à l'attribut transform (en haut à droite).
+Enfin, nous avons un objet qui tourne, se déforme et change d'échelle, tout cela centré dans la fenêtre du navigateur - bien qu'une copie d'écran, statique, ne lui rende pas vraiment justice.
+Je terminerai ce mois avec quelques exercices que vous essaierez, qui s'ajoutent à l'animation que nous avons créé pendant ces quelques derniers mois.
 **• Our final transform attribute has a fixed translate() function to position the square in the middle of the screen. Why not add another two sets of parameters to also animate the x and y position, causing the square to move around the window a little as well. Setting min and max values either side of 50 means you can replace the hard-coded coordinates in the existing translate(). Or you could have a negative min and positive max, then use the values in a second translate() function – but be careful of the ordering!
 • Try replacing the contents of the group with something else. It could be a more interesting single shape, such as a star or more faceted polygon, but it could also be any other Inkscape drawing – with multiple shapes and colors. Simply replacing the <rect> with an <image> element makes for an interesting effect, reminiscent of the kind of thing that required a Hollywood budget back in the 1980s.**
+••Notre attribut transform final a une fonction translate() fixe pour positionner le carré au milieu de l'écran. Pourquoi ne pas ajouter aussi un autre ensemble de paramètres pour animer la position en x et en y, entraînant un peu un mouvement du carré dans la fenêtre. Le paramétrage de valeurs min et max de part et d'autre des 50 vous permet de remplacer les coordonnées codées en dur dans l'actuelle translate(). Ou, vous pouvez avoir une valeur mi négative et un max positif, puis utiliser les valeurs dans une seconde fonction translate() - mais attention à l'ordre !
+••Essayez de remplacer le contenu du groupe avec quelque chose d'autre. Ce peut être une forme unique plus intéressante, telle qu'étoile ou un polygone à plus de faces, mais ce peut être aussi par n'importe quel dessin d'Inkscape - avec de nombreuses formes et couleurs. Le simple remplacement du <rect> par un élément <image> donne un effet intéressant, rappelant le genre de chose qui nécessitait un budget hollywwodien dans les années 80.
 **The most important thing to remember is that this animation code – and the JS that we used previously in this series – are just examples to get you going. There’s no reason why you can’t create an animation that messes with the transform attribute whilst at the same time altering the fill and stroke, or manipulating the “d” attribute of a <path> in order to change the shape being drawn. With an understanding of how to change attributes and properties from JS you can create interactive or animated SVG images that go way beyond the frame-based limitations of an animated GIF. It’s a bit of a cliché, but the only real limit is your own imagination.**
+Ma chose la plus important à mémoriser est que le code de cette animation - et le JS que nous avons utilisé précédemment dans cette série - ne sont que des exemples pour que vous alliez plus loin. Il n'y a aucune raison que vous ne puissiez pas créer une animation qui est mixée avec l'attribut transform, tout en ayant dans le même temps une modification du remplissage et du contour, ou en manipulant l'attribut « d » d'un <path> de façon à changer la forme qui se dessine. En comprenant comment modifier les attributs et les propriétés dans le JS, vous pouvez créer des images SVG interactives ou animées qui dépassent les limitations des animations GIF, basées sur des trames. C'est un peu un cliché, mais la seule vraie limite, c'est celle de votre imagination.