Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste :
issue136: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
issue136:inkscape [2018/09/20 15:47] – auntieeissue136:inkscape [2018/09/21 07:16] (Version actuelle) – andre_domenech
Ligne 11: Ligne 11:
 As I’ve previously discussed in this column, there was a time when the W3C went full tilt in favor of XML. They defined and specified a wide range of XML languages – including SVG and XHTML (a pure XML version of HTML) – as well as working on various supporting technologies that could work with any XML language. One of these technologies was the “Synchronized Multimedia Integration Language”, or SMIL (pronounced “smile” apparently). SMIL is itself an XML language that describes how an XML document should change over time, or in response to certain interactions such as mouse movements and clicks. In the case of SVG, therefore, SMIL can be used to describe the way in which arbitrary attributes should change over time, allowing any part of the image to be animated.** As I’ve previously discussed in this column, there was a time when the W3C went full tilt in favor of XML. They defined and specified a wide range of XML languages – including SVG and XHTML (a pure XML version of HTML) – as well as working on various supporting technologies that could work with any XML language. One of these technologies was the “Synchronized Multimedia Integration Language”, or SMIL (pronounced “smile” apparently). SMIL is itself an XML language that describes how an XML document should change over time, or in response to certain interactions such as mouse movements and clicks. In the case of SVG, therefore, SMIL can be used to describe the way in which arbitrary attributes should change over time, allowing any part of the image to be animated.**
  
-Mais que se passe-t-il si vous voulez animer plus que le seul style de vos éléments ? Peut-être que vous voulez les faire se déplacer, tourner et changer de taille. Vous pourriez même vouloir que la forme du chemin elle-même change. Tout ceci et plus encore est possible avec SVG… mais, comme nous le verrons, je ne vous recommande pas nécessairement de le faire.+Mais que se passe-t-il si vous voulez animer plus que le seul style de vos éléments ? Peut-être que vous voulez les faire se déplacer, tourner et changer de taille. Vous pourriez même vouloir que la forme du chemin elle-même change. Tout ceci et plus encore est possible avec SVG..., mais, comme nous le verrons, je ne vous recommande pas nécessairement de le faire.
  
-Comme je l’ai déjà présenté dans cet article, il fut un temps où le W3C était à fond pour le XML. Ils ont défini et spécifié un large éventail de langages XML - y compris SVG et XHTML (une version pur XML du HTML) - tout en travaillant aussi des technologies de support qui pouvaient fonctionner avec n’importe quel langage XML. L'une de ces technologies était le « Synchronized Multimedia Integration Language » (Langage d’intégration du multimédia synchronisé) ou SMIL (prononcez « smile » (sourire) apparemment). SMIL est lui-même un langage XML qui décrit comment un document XML devrait changer dans le temps ou en réponse à certaines interactions comme les mouvements de souris ou les clics. Ainsi, dans le cas du SVG, SMIL peut être utilisé pour décrire de quelle manière des attributs arbitraires devraient changer au cours du temps, permettant d’animer n’importe quelle partie de l’image.+Comme je l’ai déjà présenté dans cet article, il fut un temps où le W3C était à fond pour le XML. Ils ont défini et spécifié un large éventail de langages XML, y compris SVG et XHTML (une version pur XML du HTML), tout en travaillant aussi des technologies de support qui pouvaient fonctionner avec n’importe quel langage XML. L'une de ces technologies était le « Synchronized Multimedia Integration Language » (Langage d’intégration du multimédia synchronisé) ou SMIL (prononcez « smile » (sourire) apparemment). SMIL est lui-même un langage XML qui décrit comment un document XML devrait changer dans le temps ou en réponse à certaines interactions comme les mouvements de souris ou les clics. Ainsi, dans le cas du SVG, SMIL peut être utilisé pour décrire de quelle manière des attributs arbitraires devraient changer au cours du temps, permettant d’animer n’importe quelle partie de l’image.
  
 **If the W3C’s plan for XML domination had panned out, SMIL would probably have become a universally implemented technology for animation and multimedia. In practice, however, browsers veered away from the XML-centric approach in favor of the more lax requirements of HTML, and Microsoft never implemented SMIL in their browsers. Faced with an animation standard that wasn’t supported by Internet Explorer, it’s no wonder that so much early animation on the web was outsourced to Flash. The result was that SVG languished for a long time and SMIL never really took off. In the meantime, CSS gained more and more abilities that were once the remit of SVG, and has begun to encroach on the domain of SMIL with CSS animations and transitions. **If the W3C’s plan for XML domination had panned out, SMIL would probably have become a universally implemented technology for animation and multimedia. In practice, however, browsers veered away from the XML-centric approach in favor of the more lax requirements of HTML, and Microsoft never implemented SMIL in their browsers. Faced with an animation standard that wasn’t supported by Internet Explorer, it’s no wonder that so much early animation on the web was outsourced to Flash. The result was that SVG languished for a long time and SMIL never really took off. In the meantime, CSS gained more and more abilities that were once the remit of SVG, and has begun to encroach on the domain of SMIL with CSS animations and transitions.
Ligne 21: Ligne 21:
 Si les plans du W3C pour une domination du XML avaient réussi, SMIL serait probablement devenue une technologie universellement implémentée pour l’animation et le multimédia. En pratique, cependant, les navigateurs se sont éloignés d’une approche centrée sur le XML en faveur des exigences plus laxistes du HTML, et Microsoft n’a jamais implémenté SMIL dans ses navigateurs. Face à une norme d’animation qui n’était pas prise en charge par Internet Explorer, ce n’est pas étonnant que tant de premières animations sur le Web aient été externalisées en Flash. Le résultat a été que le SVG a stagné pendant longtemps et que SMIL n’a jamais vraiment décollé. Entre temps, le CSS a gagné de plus en plus de capacités qui avaient été autrefois dans les attributions du SVG, et commence à empiéter sur le domaine de SMIL avec des animations et des transitions CSS. Si les plans du W3C pour une domination du XML avaient réussi, SMIL serait probablement devenue une technologie universellement implémentée pour l’animation et le multimédia. En pratique, cependant, les navigateurs se sont éloignés d’une approche centrée sur le XML en faveur des exigences plus laxistes du HTML, et Microsoft n’a jamais implémenté SMIL dans ses navigateurs. Face à une norme d’animation qui n’était pas prise en charge par Internet Explorer, ce n’est pas étonnant que tant de premières animations sur le Web aient été externalisées en Flash. Le résultat a été que le SVG a stagné pendant longtemps et que SMIL n’a jamais vraiment décollé. Entre temps, le CSS a gagné de plus en plus de capacités qui avaient été autrefois dans les attributions du SVG, et commence à empiéter sur le domaine de SMIL avec des animations et des transitions CSS.
  
-L’avant-dernier clou dans le cercueil de SMIL est venu de la publication 45 du navigateur Chrome de Google, qui a officiellement listé cette technologie comme obsolète. Il fonctionnerait encore à l’heure actuelle, mais c’était le préavis qu’il partirait finalement. Après une réaction défavorable de la communauté, l’annonce fut révoquée, de sorte que SMIL n’est plus obsolète dans Chrome - mais ce n’est qu’une question de temps avant qu’ils ne décident que les animations du CSS ont suffisamment de capacités pour qu’ils réessayent. Aussi, c’est pour cela que je ne vous recommande pas d’utiliser SMIL : sans aucun support dans Internet Explorer ou Edge, et avec la perspective d’être déprécié puis supprimé de Chrome à un moment indéterminé, ce n’est pas une solution technologique viable sur laquelle s’appuyer pour un usage étendu sur le Web.+L’avant-dernier clou dans le cercueil de SMIL est venu de la publication 45 du navigateur Chrome de Google, qui a officiellement listé cette technologie comme obsolète. Il fonctionnerait encore à l’heure actuelle, mais c’était le préavis qu’il partirait finalement. Après une réaction défavorable de la communauté, l’annonce fut révoquée, de sorte que SMIL n’est plus obsolète dans Chrome, mais ce n’est qu’une question de temps avant qu’ils ne décident que les animations du CSS ont suffisamment de capacités pour qu’ils réessayent. Aussi, c’est pour cela que je ne vous recommande pas d’utiliser SMIL : sans aucun support dans Internet Explorer ou Edge, et avec la perspective d’être déprécié puis supprimé de Chrome à un moment indéterminé, ce n’est pas une solution technologique viable sur laquelle s’appuyer pour un usage étendu sur le Web.
  
 **Given this situation I’m not going to discuss SMIL in any great detail. But as it is (currently) usable in (most) web browsers, I’ll spend a couple of articles giving you a brief introduction in case you feel it is a technology that you can use and wish to investigate further – and as an insight into the sort of web we might have now, had Microsoft played ball, and XML gained stronger support from the browser vendors. **Given this situation I’m not going to discuss SMIL in any great detail. But as it is (currently) usable in (most) web browsers, I’ll spend a couple of articles giving you a brief introduction in case you feel it is a technology that you can use and wish to investigate further – and as an insight into the sort of web we might have now, had Microsoft played ball, and XML gained stronger support from the browser vendors.
Ligne 35: Ligne 35:
 • Animate the position and, optionally, rotation of an object by making it follow another path (<animateMotion>).** • Animate the position and, optionally, rotation of an object by making it follow another path (<animateMotion>).**
  
-Étant donné la situation, je ne vais pas présenter SMIL en détail. Mais, comme il est utilisable (actuellement) dans (la plupart) des navigateurs Web, je vous en donnerai une courte introduction en quelques articles, au cas où vous sentez que c’est une technologie que vous pouvez utiliser et que vous souhaitez l’examiner plus en détail -- et comme un aperçu de la sorte de Web que vous pourriez avoir maintenant, si Microsoft avait joué le jeu et que XML ait reçu un support plus appuyé de la part des fournisseurs de navigateurs.+Étant donné la situation, je ne vais pas présenter SMIL en détail. Mais, comme il est utilisable (actuellement) dans (la plupart) des navigateurs Web, je vous en donnerai une courte introduction en quelques articles, au cas où vous sentez que c’est une technologie que vous pouvez utiliser et que vous souhaitez l’examiner plus en détail, et comme un aperçu de la sorte de Web que vous pourriez avoir maintenant, si Microsoft avait joué le jeu et que XML ait reçu un support plus appuyé de la part des fournisseurs de navigateurs.
  
 Il y a quatre types d’animations qui peuvent être réalisés en utilisant SMIL avec SVG, en ajoutant, dans chaque cas, la balise d’animation correcte (montrée entre parenthèses) dans l’élément que vous voulez animer : Il y a quatre types d’animations qui peuvent être réalisés en utilisant SMIL avec SVG, en ajoutant, dans chaque cas, la balise d’animation correcte (montrée entre parenthèses) dans l’élément que vous voulez animer :
Ligne 51: Ligne 51:
 Note that, for simplicity, I’ve rounded all the coordinates down to whole numbers. There’s also a transform attribute that translates the star 20 units to the right, and 20 units down: I could have done the calculations to adjust the coordinates for the path, removing the need for this entirely. As Inkscape seems rather keen to put transforms onto its content, however, I decided to leave it in to better represent the sort of (minimised) output you might see from the program.** Note that, for simplicity, I’ve rounded all the coordinates down to whole numbers. There’s also a transform attribute that translates the star 20 units to the right, and 20 units down: I could have done the calculations to adjust the coordinates for the path, removing the need for this entirely. As Inkscape seems rather keen to put transforms onto its content, however, I decided to leave it in to better represent the sort of (minimised) output you might see from the program.**
  
-Regardons un simple exemple, en essayant de reproduire l’animation CSS de la même étoile rouge que j’ai utilisée ci-dessus. Dans ce cas-ci, nous aurons à animer les couleurs de remplissage et de contour, ainsi que la largeur du trait, en utilisant la balise <animate>. Plutôt que d’avoir ces valeurs stockées dans les propriétés du CSS, elles devront être enlever et devenir des attributs indépendants. Ceci fait ressembler notre fichier SVG à quelque chose comme ce qui est montré en haut à droite.+Regardons un simple exemple, en essayant de reproduire l’animation CSS de la même étoile rouge que j’ai utilisée ci-dessus. Dans ce cas-ci, nous aurons à animer les couleurs de remplissage et de contour, ainsi que la largeur du trait, en utilisant la balise <animate>. Plutôt que d’avoir ces valeurs stockées dans les propriétés du CSS, elles devront être enlevées et devenir des attributs indépendants. Ceci fait ressembler notre fichier SVG à quelque chose comme ce qui est montré en haut à droite.
  
 Notez que, pour la simplicité, j’ai arrondi toutes les coordonnées à l’entier en-dessous. Il y a aussi un attribut de transformation qui déplace l’étoile de 20 unités vers la droite et 20 vers le bas : j’aurais pu faire des calculs pour ajuster les coordonnées au chemin, supprimant entièrement le besoin de celui-ci. Cependant, comme Inkscape semble plutôt désireux de mettre les transformations sur son contenu, j’ai décidé de les laisser dedans pour mieux représenter le type de sortie (minimisée) du programme que vous pourriez voir. Notez que, pour la simplicité, j’ai arrondi toutes les coordonnées à l’entier en-dessous. Il y a aussi un attribut de transformation qui déplace l’étoile de 20 unités vers la droite et 20 vers le bas : j’aurais pu faire des calculs pour ajuster les coordonnées au chemin, supprimant entièrement le besoin de celui-ci. Cependant, comme Inkscape semble plutôt désireux de mettre les transformations sur son contenu, j’ai décidé de les laisser dedans pour mieux représenter le type de sortie (minimisée) du programme que vous pourriez voir.
Ligne 69: Ligne 69:
 C’est assez facile, mais notre animation d’origine n’était pas une simple transition d’une valeur à une autre ; elle avait aussi une valeur intermédiaire précise, nous donnant trois trames-clés au total.  Ceci peut être aussi réalisé avec SMIL en remplaçant nos attributs « from » et « to » par les attributs « values » et « keyTimes » qui contiennent les trois valeurs que nous voulons atteindre, et la proportion de la progression de l’animation à laquelle chacune est appliquée. Dans chacune des listes, ces valeurs sont séparées par des points-virgules. Le code est présenté en haut à droite. C’est assez facile, mais notre animation d’origine n’était pas une simple transition d’une valeur à une autre ; elle avait aussi une valeur intermédiaire précise, nous donnant trois trames-clés au total.  Ceci peut être aussi réalisé avec SMIL en remplaçant nos attributs « from » et « to » par les attributs « values » et « keyTimes » qui contiennent les trois valeurs que nous voulons atteindre, et la proportion de la progression de l’animation à laquelle chacune est appliquée. Dans chacune des listes, ces valeurs sont séparées par des points-virgules. Le code est présenté en haut à droite.
  
-J’utilise l’élément générique <animate> pour animer la couleur de remplissage. Il existe aussi un élément <animateColor> qui pourrait être utilisé à la place, mais, comme <animate> peut faire tout ce que peut réaliser <animateColor>, voire plus, il n’y a pas de raison d’utiliser ce dernier de nos jours. Même la spécification SMIL recommande maintenant d’utiliser <animate> plutôt que <animateColor>, alors pourquoi discuter.+J’utilise l’élément générique <animate> pour animer la couleur de remplissage. Il existe aussi un élément <animateColor> qui pourrait être utilisé à la place, mais, comme <animate> peut faire tout ce que peut réaliser <animateColor>, voire plus, il n’y a pas de raison d’utiliser ce dernier de nos jours. Même la spécification SMIL recommande maintenant d’utiliser <animate> plutôt que <animateColor>, alors pourquoi discuter ?
  
 **Our original animation not only changed the fill color, but also the stroke color and width. This obviously entails animating three attributes – which we do just by using three <animate> elements (shown right). **Our original animation not only changed the fill color, but also the stroke color and width. This obviously entails animating three attributes – which we do just by using three <animate> elements (shown right).
Ligne 77: Ligne 77:
 Animating attributes works well where the attribute can hold only a single, simple value, such as a length or color. The “transform” attribute is a more complex case, as it can hold a combination of translate(), rotate, scale(), and skew() functions. If your element already has a transformation applied – as many will do if they’re created in Inkscape – you probably want your animation to be added to the current transformation rather than replacing it entirely. To achieve this requires more than a simple <animate> element; it needs something that understands the syntax and structure of the transform attribute. It needs <animateTransform> (next page, top right).** Animating attributes works well where the attribute can hold only a single, simple value, such as a length or color. The “transform” attribute is a more complex case, as it can hold a combination of translate(), rotate, scale(), and skew() functions. If your element already has a transformation applied – as many will do if they’re created in Inkscape – you probably want your animation to be added to the current transformation rather than replacing it entirely. To achieve this requires more than a simple <animate> element; it needs something that understands the syntax and structure of the transform attribute. It needs <animateTransform> (next page, top right).**
  
-Notre animation d’origine modifiait non seulement la couleur de remplissage, mais modifiait aussi la couleur et l‘épaisseur du contour. Ceci implique évidemment d’animer trois attributs - ce que nous pouvons faire simplement en utilisant trois éléments <animate> (montré à droite).+Notre animation d’origine modifiait non seulement la couleur de remplissage, mais modifiait aussi la couleur et l‘épaisseur du contour. Ceci implique évidemment d’animer trois attributs, ce que nous pouvons faire simplement en utilisant trois éléments <animate> (montré à droite).
  
-Notez que j’ai dû ajuster un peu les valeurs de l’épaisseur du contour pour obtenir un résultat similaire à la version animée avec CSS. Je ne sais pas exactement pourquoi cette différence existe - peut-être que les valeurs du CSS sont interprétées en pixels, alors que celles de SMIL sont traitées dans les unités SVG de l’utilisateur, basées sur la « viewBox » déclarée au début du fichier. Quelle que soit la raison sous-jacente, un petit ajustement était nécessaire, mais j'ai été néanmoins capable d’obtenir le même résultat.+Notez que j’ai dû ajuster un peu les valeurs de l’épaisseur du contour pour obtenir un résultat similaire à la version animée avec CSS. Je ne sais pas exactement pourquoi cette différence existe, peut-être que les valeurs du CSS sont interprétées en pixels, alors que celles de SMIL sont traitées dans les unités SVG de l’utilisateur, basées sur la « viewBox » déclarée au début du fichier. Quelle que soit la raison sous-jacente, un petit ajustement était nécessaire, mais j'ai été néanmoins capable d’obtenir le même résultat.
  
-Les attributs d’animation fonctionnent bien là où l’attribut ne contient qu’une seule valeur simple, telle qu’une longueur ou une couleur. L’attribut « transform » est un cas plus complexe, car il peut contenir une combinaison des fonctions translate(), rotate, scale() et skew(). Si votre élément a déjà subi une transformation - comme c'est le cas pour beaucoup qui sont créés dans Inkscape -  vous voudrez probablement que votre animation soit ajoutée à la transformation courante plutôt que de la remplacer entièrement. Pour le réaliser, plus qu’un simple élément <animate> est nécessaire ; il a besoin de quelque chose qui comprend la syntaxe et la structure de l’attribut transform. <animateTransform> est nécessaire (page suivante, en haut à droite).+Les attributs d’animation fonctionnent bien là où l’attribut ne contient qu’une seule valeur simple, telle qu’une longueur ou une couleur. L’attribut « transform » est un cas plus complexe, car il peut contenir une combinaison des fonctions translate(), rotate, scale() et skew(). Si votre élément a déjà subi une transformation, comme c'est le cas pour beaucoup qui sont créés dans Inkscape,  vous voudrez probablement que votre animation soit ajoutée à la transformation courante plutôt que de la remplacer entièrement. Pour le réaliser, plus qu’un simple élément <animate> est nécessaire ; il a besoin de quelque chose qui comprend la syntaxe et la structure de l’attribut transform. <animateTransform> est nécessaire (page suivante, en haut à droite).
  
 **Here I’ve used a couple of <animateTransform> elements to zoom and rotate the star during the course of its animation. The first element scales the star (type="scale"), first making it bigger (1 > 1.5) and then smaller (1.5 > 1 > 0.75), covering four keyframes in the five second duration. You might think that attributeName="transform" is redundant when the element itself is called <animateTransform> – and I would agree with you but the animation doesn’t work without it. **Here I’ve used a couple of <animateTransform> elements to zoom and rotate the star during the course of its animation. The first element scales the star (type="scale"), first making it bigger (1 > 1.5) and then smaller (1.5 > 1 > 0.75), covering four keyframes in the five second duration. You might think that attributeName="transform" is redundant when the element itself is called <animateTransform> – and I would agree with you but the animation doesn’t work without it.
Ligne 87: Ligne 87:
 The second element rotates the star. In this case the values each consist of three space- or comma-separated numbers. These represent the amount of rotation (in degrees), and the x and y coordinates to be used as the center of rotation. I’ve selected 40 for each, to put the center roughly in the middle of the star, so it doesn’t spin off-screen entirely.** The second element rotates the star. In this case the values each consist of three space- or comma-separated numbers. These represent the amount of rotation (in degrees), and the x and y coordinates to be used as the center of rotation. I’ve selected 40 for each, to put the center roughly in the middle of the star, so it doesn’t spin off-screen entirely.**
  
-Ici, j’utilise deux éléments <animateTransform> pour agrandir et faire tourner l’étoile a cours de son animation. Le premier élément change la taille de l’étoile (type="scale"), la rendant d’abord plus grande (1 > 1.5), puis plus petite (1.5 > 1 > 0.75), parcourant quatre trames-clés pendant une durée de cinq secondes. Vous pourriez penser que attributeName="transform" est superflu quand l’élément lui-même est appelé <animateTransform> – et je suis d’accord avec vous – mais l’animation ne fonctionne pas sans lui.+Ici, j’utilise deux éléments <animateTransform> pour agrandir et faire tourner l’étoile au cours de son animation. Le premier élément change la taille de l’étoile (type="scale"), la rendant d’abord plus grande (1 > 1.5), puis plus petite (1.5 > 1 > 0.75), parcourant quatre trames-clés pendant une durée de cinq secondes. Vous pourriez penser que attributeName="transform" est superflu quand l’élément lui-même est appelé <animateTransform> - et je suis d’accord avec vous - mais l’animation ne fonctionne pas sans lui.
  
 Le second élément fait tourner l’étoile. Dans ce cas, chacune des valeurs est constituée de trois nombres séparés par une espace ou une virgule.  Ceux-ci représentent la quantité de rotation (en degrés) et les coordonnées x et y à utiliser comme centre de rotation. J’ai choisi 40 pour chacun, pour mettre en gros le centre au milieu de l’étoile ; ainsi elle ne tourne pas complètement en dehors de l’écran. Le second élément fait tourner l’étoile. Dans ce cas, chacune des valeurs est constituée de trois nombres séparés par une espace ou une virgule.  Ceux-ci représentent la quantité de rotation (en degrés) et les coordonnées x et y à utiliser comme centre de rotation. J’ai choisi 40 pour chacun, pour mettre en gros le centre au milieu de l’étoile ; ainsi elle ne tourne pas complètement en dehors de l’écran.
Ligne 109: Ligne 109:
 Au fil des années, CSS a gagné encore plus des possibilités du SVG, avec pour résultat que les animations SMIL que je vous ai montrées jusqu'ici peuvent toutes être implémentées comme des animations CSS. Nous avons parlé des remplissage et contour la dernière fois, et même <animateTransform> a un équivalent dans CSS, maintenant que ce dernier supporte une propriété « transform » qui permet aux éléments d’être translatés, tournés, changés de taille et penchés. Contrairement à SVG, il supporte aussi quelques options pour transformer vos éléments en trois dimensions. Au fil des années, CSS a gagné encore plus des possibilités du SVG, avec pour résultat que les animations SMIL que je vous ai montrées jusqu'ici peuvent toutes être implémentées comme des animations CSS. Nous avons parlé des remplissage et contour la dernière fois, et même <animateTransform> a un équivalent dans CSS, maintenant que ce dernier supporte une propriété « transform » qui permet aux éléments d’être translatés, tournés, changés de taille et penchés. Contrairement à SVG, il supporte aussi quelques options pour transformer vos éléments en trois dimensions.
  
-Mais SMIL a encore quelques trucs dans sa manche que CSS ne peut pas (encore) concurrencer. L’un d’eux est la capacité d’animer un chemin d’une forme à une autre. Très proche de l’animation de la couleur, c’est simplement un cas spécial d’animation d’un attribut -- dans ce cas, l’attribut « d » qui contient les données représentant la forme du chemin. Pour mémoire, voici à quoi ressemble les données du chemin de notre étoile : +Mais SMIL a encore quelques trucs dans sa manche que CSS ne peut pas (encore) concurrencer. L’un d’eux est la capacité d’animer un chemin d’une forme à une autre. Très proche de l’animation de la couleur, c’est simplement un cas spécial d’animation d’un attribut - dans ce cas, l’attribut « d » qui contient les données représentant la forme du chemin. Pour mémoire, voici à quoi ressemble les données du chemin de notre étoile : 
  
 d="m 40,15 6,18 19,0 L 49,45 56,64  d="m 40,15 6,18 19,0 L 49,45 56,64 
Ligne 131: Ligne 131:
 To my eye, SMIL animation is easier to follow than its CSS counterpart. Admittedly, it’s rather verbose which can result in having to edit a lot of elements to make a simple timing change. But that verbosity also has its advantages, as we’ll see next time – when we’ll also send our star on a trip along a path.** To my eye, SMIL animation is easier to follow than its CSS counterpart. Admittedly, it’s rather verbose which can result in having to edit a lot of elements to make a simple timing change. But that verbosity also has its advantages, as we’ll see next time – when we’ll also send our star on a trip along a path.**
  
-Il est important de noter que les valeurs d’animation de « d » doivent toutes contenir le même nombre de paramètres pour une transition douce. Évidemment, le navigateur ne saurait pas comment faire l'animation d’une étoile à 5 branches devenant une flèche à 12 pointes ; ou quelles seraient les nouveaux nœuds à faire apparaître ? Mais c'est la même chose pour les autres paramètres contenus dans l’attribut « d » - si vous voulez des lignes courbes dans votre animation, vous devez commencer avec celles-ci incurvées (même si leur courbure n’est pas visible) pour vous assurer que chaque partie de l’animation contient les mêmes types de lignes et nombres de coordonnées pour tous les nœuds et les points de contrôle de Bézier. Si votre chemin comprend différents segments de lignes, l’animation se fera encore, mais, plutôt qu’une transition douce d’une forme à une autre, vous aurez des sauts soudains et discontinus de forme en forme.+Il est important de noter que les valeurs d’animation de « d » doivent toutes contenir le même nombre de paramètres pour une transition douce. Évidemment, le navigateur ne saurait pas comment faire l'animation d’une étoile à 5 branches devenant une flèche à 12 pointes ; ou quelles seraient les nouveaux nœuds à faire apparaître ? Mais c'est la même chose pour les autres paramètres contenus dans l’attribut « d » : si vous voulez des lignes courbes dans votre animation, vous devez commencer avec celles-ci incurvées (même si leur courbure n’est pas visible) pour vous assurer que chaque partie de l’animation contient les mêmes types de lignes et nombres de coordonnées pour tous les nœuds et les points de contrôle de Bézier. Si votre chemin comprend différents segments de lignes, l’animation se fera encore, mais, plutôt qu’une transition douce d’une forme à une autre, vous aurez des sauts soudains et discontinus de forme en forme.
  
-À mes yeux, l’animation avec SMIL est plus facile à suivre que son équivalent dans CSS. J’avoue qu’elle est plutôt verbeuse ce qui a pour résultat de modifier beaucoup d’éléments pour faire un simple changement de rythme temporel. Mais cette verbosité a aussi ses avantages, comme nous le verrons la prochaine fois - quand nous enverrons notre étoile faire un tour le long d’un chemin.+À mes yeux, l’animation avec SMIL est plus facile à suivre que son équivalent dans CSS. J’avoue qu’elle est plutôt verbeuse ce qui a pour résultat de modifier beaucoup d’éléments pour faire un simple changement de rythme temporel. Mais cette verbosité a aussi ses avantages, comme nous le verrons la prochaine fois, quand nous enverrons notre étoile faire un tour le long d’un chemin.
issue136/inkscape.1537451242.txt.gz · Dernière modification : 2018/09/20 15:47 de auntiee