issue136: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édenteProchaine révision | Révision précédente | ||
issue136:inkscape [2018/09/13 09:32] – d52fr | issue136:inkscape [2018/09/21 07:16] (Version actuelle) – andre_domenech | ||
---|---|---|---|
Ligne 2: | Ligne 2: | ||
By reusing the same animation that we had in the previous article, we can produce the same set of three snapshots, but this time of a more complex shape. For this example I created a star in Inkscape and converted it to a path. The first CSS rule, which previously had a selector of “rect”, also needed to be updated to change the selector to “path”.** | By reusing the same animation that we had in the previous article, we can produce the same set of three snapshots, but this time of a more complex shape. For this example I created a star in Inkscape and converted it to a path. The first CSS rule, which previously had a selector of “rect”, also needed to be updated to change the selector to “path”.** | ||
+ | |||
+ | La dernière fois, nous avons regardé comment il était possible d’inclure des animations dans un fichier SVG qui est chargé comme une image. Je vous ai présenté l’idée générale en animant les couleurs de remplissage et de contour, ainsi que la largeur du trait, d’un carré que j’avais dessiné dans Inkscape. Si vous ne travaillez que sur un carré - ou même sur un rectangle arrondi - vous pouvez obtenir le même effet en HTML en animant les propriétés « background » (arrière-plan) et « border » (bordure) du CSS, sans avoir besoin de vous rapprocher de SVG. Mais le point important à noter est que nous avons utilisé réellement le CSS pour animer des propriétés qui n’ont de sens qu’en SVG. En d’autres termes, bien que le CSS soit utilisé plus couramment avec du HTML, nous pouvons toujours l’utiliser pour modifier de nombreuses valeurs propres à SVG. En outre, nous pouvons animer ces propriétés, | ||
+ | |||
+ | En réutilisant la même animation que celle de l’article précédent, | ||
**But what if you want to animate more than just the style of your elements? Perhaps you want to make them move around, to spin, or to change size. You might even want the shape of the path itself to change. All this and more is possible with SVG… but, as will become clear, I don’t necessarily recommend doing it. | **But what if you want to animate more than just the style of your elements? Perhaps you want to make them move around, to spin, or to change size. You might even want the shape of the path itself to change. All this and more is possible with SVG… but, as will become clear, I don’t necessarily recommend doing it. | ||
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”, | 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”, | ||
+ | |||
+ | Mais que se passe-t-il si vous voulez animer plus que le seul style de vos éléments ? | ||
+ | |||
+ | 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. | ||
The penultimate nail in the SMIL coffin came with the release of version 45 of Google’s Chrome browser, which officially listed the technology as deprecated. It would still work for the time being, but that was notification that it’s eventually going away. After a backlash from the community they revoked this announcement, | The penultimate nail in the SMIL coffin came with the release of version 45 of Google’s Chrome browser, which officially listed the technology as deprecated. It would still work for the time being, but that was notification that it’s eventually going away. After a backlash from the community they revoked this announcement, | ||
+ | |||
+ | 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é, | ||
**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 15: | Ligne 27: | ||
There are four types of animation that can be performed using SMIL with SVG, in each case by adding the relevant animation tag (shown in brackets) inside the element you want to animate: | There are four types of animation that can be performed using SMIL with SVG, in each case by adding the relevant animation tag (shown in brackets) inside the element you want to animate: | ||
- | • Animate the attributes of an SVG element | + | • Animate the attributes of an SVG element |
• Animate the transformation that can be applied to an SVG element (< | • Animate the transformation that can be applied to an SVG element (< | ||
Ligne 22: | Ligne 34: | ||
• Animate the position and, optionally, rotation of an object by making it follow another path (< | • Animate the position and, optionally, rotation of an object by making it follow another path (< | ||
+ | |||
+ | É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 : | ||
+ | |||
+ | • Animer les attributs de l' | ||
+ | |||
+ | • Animer la transformation qui peut être appliquée à un élément SVG (< | ||
+ | |||
+ | • Animer les couleurs de remplissage et contour (< | ||
+ | |||
+ | • Animer la position et, optionnellement, | ||
**Let’s look at a simple example, by trying to replicate the CSS animation of the same red star I used earlier. In this case we will need to animate the fill and stroke color, and the stroke width, using the < | **Let’s look at a simple example, by trying to replicate the CSS animation of the same red star I used earlier. In this case we will need to animate the fill and stroke color, and the stroke width, using the < | ||
Ligne 27: | 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.** | ||
- | **As with the CSS animations from last time, I’m going to start by just animating the fill color. This involves putting the < | + | 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 < |
+ | |||
+ | Notez que, pour la simplicité, | ||
+ | |||
+ | **As with the CSS animations from last time, I’m going to start by just animating the fill color. This involves putting the < | ||
The new element is pretty self-explanatory: | The new element is pretty self-explanatory: | ||
+ | |||
+ | Comme avec les animations CSS de la dernière fois, je vais commencer par animer uniquement la couleur de remplissage. Celle-ci est invoquée en plaçant la balise < | ||
+ | |||
+ | Le nouvel élément se comprend bien de lui-même : | ||
**That’s easy enough, but our original animation wasn’t a simple transition from one value to another, it also had a specific intermediate value, giving us three keyframes in total. That can be achieved with SMIL as well, by replacing our “from” and “to” attributes with “values” and “keyTimes” attributes which hold the three values we want to hit, and the proportion of the way through the animation that each is applied. The values in each list are separated by a semicolon. Code is shown top right. | **That’s easy enough, but our original animation wasn’t a simple transition from one value to another, it also had a specific intermediate value, giving us three keyframes in total. That can be achieved with SMIL as well, by replacing our “from” and “to” attributes with “values” and “keyTimes” attributes which hold the three values we want to hit, and the proportion of the way through the animation that each is applied. The values in each list are separated by a semicolon. Code is shown top right. | ||
I’m using a generic < | I’m using a generic < | ||
+ | |||
+ | 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. | ||
+ | |||
+ | J’utilise l’élément générique < | ||
**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 < | **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 < | ||
Ligne 41: | 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(), | 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(), | ||
- | **Here I’ve used a couple of < | + | Notre animation d’origine modifiait non seulement la couleur de remplissage, |
+ | |||
+ | 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, | ||
+ | |||
+ | 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(), | ||
+ | |||
+ | **Here I’ve used a couple of < | ||
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 < | ||
+ | |||
+ | 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. | ||
**Thanks to the scale animation, however, it does still move around quite a bit. As the star is scaled in size, so its center point moves and the values in the rotation animation are no longer correct. This could be accommodated, | **Thanks to the scale animation, however, it does still move around quite a bit. As the star is scaled in size, so its center point moves and the values in the rotation animation are no longer correct. This could be accommodated, | ||
- | You’ll have noticed that both the < | + | You’ll have noticed that both the < |
+ | |||
+ | Cependant, grâce à l’animation de mise à l’échelle, | ||
+ | |||
+ | Vous aurez noté que les deux éléments < | ||
**Over the years, CSS has gained ever more of SVG’s capabilities, | **Over the years, CSS has gained ever more of SVG’s capabilities, | ||
Ligne 56: | Ligne 106: | ||
40,53 24,65 30,45 14,34 34,34 Z"** | 40,53 24,65 30,45 14,34 34,34 Z"** | ||
+ | |||
+ | 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' | ||
+ | |||
+ | 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 | ||
+ | |||
+ | 40,53 24,65 30,45 14,34 34,34 Z" | ||
**I’m going to animate the star turning into a large arrow, pointing to the top right of the screen. To do this, I just use another < | **I’m going to animate the star turning into a large arrow, pointing to the top right of the screen. To do this, I just use another < | ||
Ligne 62: | Ligne 120: | ||
Removing the comment tags to reinstate the other animations results in a star that smoothly changes to an arrow whilst it’s rotating, changing size, and it transitions from a red fill with a thin dark red outline to a blue fill with a thick dark blue outline (via a purple fill along the way). Stacking up multiple individual transitions to create one larger animation is something that SMIL excels at.** | Removing the comment tags to reinstate the other animations results in a star that smoothly changes to an arrow whilst it’s rotating, changing size, and it transitions from a red fill with a thin dark red outline to a blue fill with a thick dark blue outline (via a purple fill along the way). Stacking up multiple individual transitions to create one larger animation is something that SMIL excels at.** | ||
+ | |||
+ | Je vais animer l’étoile en la transformant en une grande flèche, pointant vers le côté droit du haut de l’écran. Pour le faire, je n’utilise qu’un autre élément < | ||
+ | |||
+ | En commentant les autres éléments < | ||
+ | |||
+ | Le retrait des balises de commentaires pour faire réapparaître les résultats des autres animations entraîne la modification douce de l’étoile en flèche pendant qu' | ||
**It’s important to note that the animated “d” values must all contain the same number of parameters for a smooth transition. Obviously the browser wouldn’t know how to animate from a 5-pointed star to a 12-pointed star; which lines should the new nodes appear on? But the same goes for the other parameters in a “d” attribute – if you want curved lines in your animation, you need to start out with them curved (even if the curvature is visually non-existent) to ensure that each part of the animation contains the same line types and number of coordinates for all the nodes and Bézier control points. If your paths contain different line segments the animation will still take place but, rather than a smooth transition from one shape to another, you’ll get sudden, discontinuous jumps from shape to shape. | **It’s important to note that the animated “d” values must all contain the same number of parameters for a smooth transition. Obviously the browser wouldn’t know how to animate from a 5-pointed star to a 12-pointed star; which lines should the new nodes appear on? But the same goes for the other parameters in a “d” attribute – if you want curved lines in your animation, you need to start out with them curved (even if the curvature is visually non-existent) to ensure that each part of the animation contains the same line types and number of coordinates for all the nodes and Bézier control points. If your paths contain different line segments the animation will still take place but, rather than a smooth transition from one shape to another, you’ll get sudden, discontinuous jumps from shape to shape. | ||
Ligne 67: | 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, | ||
+ | |||
+ | À 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.1536823978.txt.gz · Dernière modification : 2018/09/13 09:32 de d52fr