issue137: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 | ||
issue137:inkscape [2018/10/02 07:44] – d52fr | issue137:inkscape [2018/10/12 12:42] (Version actuelle) – auntiee | ||
---|---|---|---|
Ligne 2: | Ligne 2: | ||
I much prefer SMIL to CSS animations. I find the code easier to understand, and the fact that the animation data tend to live inside the elements they’re animating avoids any confusion as to which rules apply to which objects as your document becomes more complex.** | I much prefer SMIL to CSS animations. I find the code easier to understand, and the fact that the animation data tend to live inside the elements they’re animating avoids any confusion as to which rules apply to which objects as your document becomes more complex.** | ||
+ | |||
+ | La dernière fois, nous avons regardé comment animer un élément SVG en utilisant SMIL à la place des animations du CSS. Nous continuerons sur ce sujet pour un article de plus, mais mes avertissements du mois dernier doivent être répétés : bien que SMIL soit (actuellement) plus puissant et plus flexible que l' | ||
+ | |||
+ | Je préfère de beaucoup les animations SMIL à celles du CSS. Je trouve le code plus facile à comprendre et le fait que les données d' | ||
**With a complex document it becomes ever more likely that your animations won’t all have to run at the same time, but instead might run sequentially – or a mixture of both. Consider trying to animate something as sophisticated as a cartoon: being able to finely adjust the timing of each character’s movements is essential. CSS animations offer little to help you in this case, other than the brute-force option of adding a delay to your animations with this the sort of approach (shown right). | **With a complex document it becomes ever more likely that your animations won’t all have to run at the same time, but instead might run sequentially – or a mixture of both. Consider trying to animate something as sophisticated as a cartoon: being able to finely adjust the timing of each character’s movements is essential. CSS animations offer little to help you in this case, other than the brute-force option of adding a delay to your animations with this the sort of approach (shown right). | ||
Here we’re changing the fill color of a pair of rectangles (with IDs of “rect1” and “rect2”). The first changes from red to blue over 3 seconds. After a 3 second delay, the second rectangle changes from red to white over a 5 second period. Due to that 3 second delay, the animations occur sequentially.** | Here we’re changing the fill color of a pair of rectangles (with IDs of “rect1” and “rect2”). The first changes from red to blue over 3 seconds. After a 3 second delay, the second rectangle changes from red to white over a 5 second period. Due to that 3 second delay, the animations occur sequentially.** | ||
+ | |||
+ | Avec un document complexe, il devient toujours plus probable que vos animations ne devront pas toutes tourner en même temps mais plutôt en séquence - ou un mélange des deux. Imaginez que vous essayez d' | ||
+ | |||
+ | Ici, nous avons changé la couleur de remplissage d'une paire de rectangles (avec les repères « rect1 » et « rect2 »). Le premier passe du rouge au bleu en 3 secondes. Après un retard de 3 secondes, le second rectangle passe du rouge au blanc dans une période de 5 secondes. Du fait du retard de 3 secondes, les animations ont lieu séquentiellement. | ||
**Now what happens if you want to change the length of the first animation? You must also keep the delay for the second animation synchronised to the same value, otherwise it will either overlap the first, or occur some time after the first has finished. CSS does now support variables, so you can set the animation length once and reuse it as necessary, but the syntax is ugly and unwieldy (previous page, bottom right). | **Now what happens if you want to change the length of the first animation? You must also keep the delay for the second animation synchronised to the same value, otherwise it will either overlap the first, or occur some time after the first has finished. CSS does now support variables, so you can set the animation length once and reuse it as necessary, but the syntax is ugly and unwieldy (previous page, bottom right). | ||
Now imagine what your CSS would look like when you want to chain five animations, or ten – or a hundred! How much better it would be if you could just tell the second animation that it should start when the first one finishes. With SMIL, that’s exactly what you can do. The SMIL animation elements have an optional “begin” attribute which allows various ways of defining when the animation should start. At its simplest, you can just enter a delay, giving the same effect as the CSS animation above (shown top right).** | Now imagine what your CSS would look like when you want to chain five animations, or ten – or a hundred! How much better it would be if you could just tell the second animation that it should start when the first one finishes. With SMIL, that’s exactly what you can do. The SMIL animation elements have an optional “begin” attribute which allows various ways of defining when the animation should start. At its simplest, you can just enter a delay, giving the same effect as the CSS animation above (shown top right).** | ||
+ | |||
+ | Mais que se passe-t-il si vous voulez changer la durée de la première animation ? Vous devez aussi la maintenir synchronisée avec la même valeur de retard de la seconde animation. Autrement, soit elle va empiéter sur la première, soit arriver quelques instants après sa fin. CSS supporte maintenant les variables ; aussi, vous pouvez régler une fois la durée de l' | ||
+ | |||
+ | Maintenant, imaginez à quoi ressemblerait votre CSS si vous vouliez chaîner cinq animations, ou dix, ou une centaine ! Ce serait beaucoup mieux si vous pouviez dire à la seconde animation de commencer quand la première finit. Avec SMIL, c'est exactement ce que vous pouvez faire. Les éléments de l' | ||
**But you can also define the beginning of an animation to be triggered by the end of another by using the ID of the other animation, followed by “.end” (bottom right). | **But you can also define the beginning of an animation to be triggered by the end of another by using the ID of the other animation, followed by “.end” (bottom right). | ||
What happens if we want to change the length of the first animation now? No problem! Just modify the “dur” attribute and the second animation will still dutifully follow after the end of the first one. As well as the “.end” syntax you can also use “.begin” to link animations together so that they always start at the same time. You can optionally add an offset, such as “anim1.begin+2s” to make the animation begin 2 seconds after “anim1” starts, or even “anim1.end-0.5s” if you want your animation to begin half a second before the end of “anim1”.** | What happens if we want to change the length of the first animation now? No problem! Just modify the “dur” attribute and the second animation will still dutifully follow after the end of the first one. As well as the “.end” syntax you can also use “.begin” to link animations together so that they always start at the same time. You can optionally add an offset, such as “anim1.begin+2s” to make the animation begin 2 seconds after “anim1” starts, or even “anim1.end-0.5s” if you want your animation to begin half a second before the end of “anim1”.** | ||
+ | |||
+ | Mais vous pouvez aussi décider que le début d'une animation sera déclenché par la fin d'une autre en utilisant l' | ||
+ | |||
+ | Qu' | ||
**SMIL allows animations to be repeated by adding a “repeatCount” or “repeatDur” attribute. For example, repeatCount=" | **SMIL allows animations to be repeated by adding a “repeatCount” or “repeatDur” attribute. For example, repeatCount=" | ||
In theory, these values can also be used for the “end” attribute, rather than for “begin”. That should allow you to specify that a second animation should finish three seconds after the end of the first animation, with the browser calculating when the animation should start in order to produce that result. Similarly, you should be able to specify values for “begin” and “end” with no duration set. In practice browsers fail to honor anything but a simple time-based “end” value.** | In theory, these values can also be used for the “end” attribute, rather than for “begin”. That should allow you to specify that a second animation should finish three seconds after the end of the first animation, with the browser calculating when the animation should start in order to produce that result. Similarly, you should be able to specify values for “begin” and “end” with no duration set. In practice browsers fail to honor anything but a simple time-based “end” value.** | ||
+ | |||
+ | SMIL permet la répétition des animations en ajoutant un attribut « repeatCount » ou « repeatDur ». Par exemple, repeatCount=" | ||
+ | |||
+ | En théorie, ces valeurs peuvent aussi être utilisées avec l’attribut « end », plutôt qu' | ||
**Speaking of features that don’t work in the browsers, the “begin” (and “end”) attributes can, theoretically, | **Speaking of features that don’t work in the browsers, the “begin” (and “end”) attributes can, theoretically, | ||
Ligne 30: | Ligne 50: | ||
begin=" | begin=" | ||
</ | </ | ||
+ | |||
+ | À propos des fonctionnalités qui ne marchent pas dans les navigateurs, | ||
+ | |||
+ | Il y a cependant une dernière option qui fonctionne plus ou moins bien : les événements. La syntaxe suivante, par exemple, déclenchera (en principe) une animation quand on clique sur le rectangle : | ||
+ | |||
+ | <rect id=" | ||
+ | <animate id=" | ||
+ | attributeName=" | ||
+ | from="# | ||
+ | dur=" | ||
+ | begin=" | ||
+ | </ | ||
**There are various events available, covering not only clicks but also mouse movements, scrolling and even changes to the structure of the document. Although the example above uses the parent element to trigger the animation, in practice you could use the ID of another element in the image – allowing a click on one element (styled as a Start button, perhaps) to trigger an animation on another. | **There are various events available, covering not only clicks but also mouse movements, scrolling and even changes to the structure of the document. Although the example above uses the parent element to trigger the animation, in practice you could use the ID of another element in the image – allowing a click on one element (styled as a Start button, perhaps) to trigger an animation on another. | ||
In practice this option does work, but only in situations when JavaScript would also be executed: when the SVG image is loaded directly, via an < | In practice this option does work, but only in situations when JavaScript would also be executed: when the SVG image is loaded directly, via an < | ||
+ | |||
+ | De nombreux évènements sont disponibles, | ||
+ | |||
+ | En pratique, cette option fonctionne bien, mais seulement dans des situations où Javascript serait aussi exécuté : quand l' | ||
**And that pretty much sums up the failed promise of SMIL. If fully implemented it would have allowed the creation of complex animations triggered by mouse events or keypresses, with each component synchronised to other parts, all with a fairly simple declarative syntax that makes it safe to use via an <img> tag. Imagine a complex interactive animation, of the sort that you might see in a museum, but with the ability to be shared on forums or social media as easily as any other image. | **And that pretty much sums up the failed promise of SMIL. If fully implemented it would have allowed the creation of complex animations triggered by mouse events or keypresses, with each component synchronised to other parts, all with a fairly simple declarative syntax that makes it safe to use via an <img> tag. Imagine a complex interactive animation, of the sort that you might see in a museum, but with the ability to be shared on forums or social media as easily as any other image. | ||
Before bidding farewell to SMIL entirely, I’m going to briefly discuss the last of the animation elements that are supported by SVG: < | Before bidding farewell to SMIL entirely, I’m going to briefly discuss the last of the animation elements that are supported by SVG: < | ||
+ | |||
+ | Et voilà ce qui résume assez bien les promesses non tenues de SMIL. S'il avait été complètement implémenté, | ||
+ | |||
+ | Avant de dire un adieu définitif à SMIL, je vais vous présenter brièvement le dernier des éléments d' | ||
**Note the orange path across the night sky, which I’ve given an ID of “animPath”. The yellow shooting star is made up of a group of objects, drawn so that the center of the star is at the top left of the document area (0,0 in SVG coordinates) – though I’ve moved it into the middle of the scene for this screenshot so that you can see it. By adding an < | **Note the orange path across the night sky, which I’ve given an ID of “animPath”. The yellow shooting star is made up of a group of objects, drawn so that the center of the star is at the top left of the document area (0,0 in SVG coordinates) – though I’ve moved it into the middle of the scene for this screenshot so that you can see it. By adding an < | ||
The < | The < | ||
+ | |||
+ | Notez le chemin orange traversant la nuit étoilée, à qui j'ai donné l'ID “animPath”. L' | ||
+ | |||
+ | L' | ||
**An alternative to directly including the path data in the < | **An alternative to directly including the path data in the < | ||
The second attribute that is specific to < | The second attribute that is specific to < | ||
+ | |||
+ | Une alternative à l' | ||
+ | |||
+ | Le deuxième attribut spécifique à < | ||
**You may be wondering about that orange path. The final step in designing an animation like this is typically to hide the animation path somehow. I usually move the path down in the z-stack behind everything else, or change its stroke color or opacity to make it transparent. Even when it’s transparent you can still get to it using Inkscape’s View ‣ Display Mode ‣ Outline option, if you do need to make some later changes. Although this simple example uses just a single curved path segment, the animation path can be as complex as you like with loops, twists, curves and sharp corners, so being able to tweak it graphically in Inkscape can be invaluable. | **You may be wondering about that orange path. The final step in designing an animation like this is typically to hide the animation path somehow. I usually move the path down in the z-stack behind everything else, or change its stroke color or opacity to make it transparent. Even when it’s transparent you can still get to it using Inkscape’s View ‣ Display Mode ‣ Outline option, if you do need to make some later changes. Although this simple example uses just a single curved path segment, the animation path can be as complex as you like with loops, twists, curves and sharp corners, so being able to tweak it graphically in Inkscape can be invaluable. | ||
One final thing to note is that although my test animation ran smoothly in both Chrome and Firefox when the SVG file was loaded directly, referencing it via an <img> tag in a web page resulted in a choppy animation in Firefox.** | One final thing to note is that although my test animation ran smoothly in both Chrome and Firefox when the SVG file was loaded directly, referencing it via an <img> tag in a web page resulted in a choppy animation in Firefox.** | ||
+ | |||
+ | Vous pourriez vous poser des questions sur ce chemin orange. L' | ||
+ | |||
+ | Une dernière chose à noter est que, bien que mon animation de test puisse fonctionner sans encombre dans Chrome comme dans Firefox, quand le fichier SVG est chargé directement, | ||
**I’ll leave you with a little SMIL anecdote: back in 2011 I made use of SMIL for an Easter egg in one of my webcomics, to animate a UFO flying over the scene. The animation path itself is seemingly jerky and erratic, but digging into the file in Inkscape reveals that the path actually encodes a URL. Visiting that address shows a small demo of what SMIL can do: by using some JavaScript to dynamically add and modify SVG and SMIL elements, I wrote a simple Space Invaders style game that runs in the browser. JavaScript handles the game logic, with SMIL responsible for ensuring that the flying saucers move smoothly around the sky. For the time being, at least, it runs in all the major browsers, except Microsoft’s… | **I’ll leave you with a little SMIL anecdote: back in 2011 I made use of SMIL for an Easter egg in one of my webcomics, to animate a UFO flying over the scene. The animation path itself is seemingly jerky and erratic, but digging into the file in Inkscape reveals that the path actually encodes a URL. Visiting that address shows a small demo of what SMIL can do: by using some JavaScript to dynamically add and modify SVG and SMIL elements, I wrote a simple Space Invaders style game that runs in the browser. JavaScript handles the game logic, with SMIL responsible for ensuring that the flying saucers move smoothly around the sky. For the time being, at least, it runs in all the major browsers, except Microsoft’s… | ||
These couple of articles have just provided a brief introduction to SMIL. With browser support waning, it’s unlikely to ever fulfill its early promise of allowing interactive animations in a way that can be safely used online anywhere a simple image is allowed. As is too often the case, it appears that corporate politics has killed a promising technology.** | These couple of articles have just provided a brief introduction to SMIL. With browser support waning, it’s unlikely to ever fulfill its early promise of allowing interactive animations in a way that can be safely used online anywhere a simple image is allowed. As is too often the case, it appears that corporate politics has killed a promising technology.** | ||
+ | |||
+ | Je vous quitte avec une petite anecdote sur SMIL : en 2011, j' | ||
+ | |||
+ | Ces deux articles ont tout simplement fourni une courte introduction à SMIL. Avec la disparition du support par les navigateurs, |
issue137/inkscape.1538459048.txt.gz · Dernière modification : 2018/10/02 07:44 de d52fr