issue153:inkscape
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédente | Prochaine révisionLes deux révisions suivantes | ||
issue153:inkscape [2020/02/08 07:59] – d52fr | issue153:inkscape [2020/02/09 09:02] – d52fr | ||
---|---|---|---|
Ligne 80: | 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. | 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:** | 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' | ||
+ | |||
+ | Et, bien sûr, nous avons besoin d' | ||
+ | |||
+ | Enfin, nous avons un objet qui tourne, se déforme et change d' | ||
+ | |||
+ | Je terminerai ce mois avec quelques exercices que vous essaierez, qui s' | ||
**• 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! | **• 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 < | • 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 < | ||
+ | |||
+ | ••Notre attribut transform final a une fonction translate() fixe pour positionner le carré au milieu de l' | ||
+ | ••Essayez de remplacer le contenu du groupe avec quelque chose d' | ||
**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 < | **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 < | ||
+ | |||
+ | 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' | ||
issue153/inkscape.txt · Dernière modification : 2020/02/10 10:43 de auntiee