| Les deux révisions précédentesRévision précédente | |
| issue138:inkscape [2018/11/10 11:36] – auntiee | issue138:inkscape [2018/11/11 16:08] (Version actuelle) – andre_domenech |
|---|
| That’s where SMIL comes in. It’s an older specification for animation, created around the same time as the original SVG specs, and does provide the ability to animate arbitrary attributes in SVG. It can animate the “d” attribute that makes up the shape of a path, for example – a task that can only otherwise be accomplished in the browser via JavaScript. But although SMIL is more powerful than CSS in this regard, it has never been adopted in any Microsoft browser, leading to its inexorable decline and a likely deprecation in the browsers that do support it.** | That’s where SMIL comes in. It’s an older specification for animation, created around the same time as the original SVG specs, and does provide the ability to animate arbitrary attributes in SVG. It can animate the “d” attribute that makes up the shape of a path, for example – a task that can only otherwise be accomplished in the browser via JavaScript. But although SMIL is more powerful than CSS in this regard, it has never been adopted in any Microsoft browser, leading to its inexorable decline and a likely deprecation in the browsers that do support it.** |
| |
| Résumé rapide : durant les quelques articles passés, nous avons regardé certaines techniques d'animation pour les fichiers SVG. La première consistait à utiliser les capacités d'animation du CSS, qui a un bon support des navigateurs, mais est limité à l'animation de celles des propriétés qui peuvent être affichées via CSS (c'est-à-dire, celles qui fonctionneront dans l'attribut « style »). Ceci recouvre un grand nombre de possibilités , mais ne comprend pas beaucoup des attributs centraux que l'on trouve dans les éléments SVG, tels que leurs coordonnées ou les définitions des chemins. Pour quelques cas, comme pour les transformations, suffisamment de possibilités ont été ajoutés au CSS afin que de telles restrictions ne soient rien d'autre qu'un désagrément qui peut être contourné. Toutefois, pour d'autres, CSS n'est pas à la hauteur de la tâche. | Résumé rapide : durant les quelques articles passés, nous avons regardé certaines techniques d'animation pour les fichiers SVG. La première consistait à utiliser les capacités d'animation du CSS, qui a un bon support des navigateurs, mais est limité à l'animation de celles des propriétés qui peuvent être affichées via CSS (c'est-à-dire, celles qui fonctionneront dans l'attribut « style »). Ceci recouvre un grand nombre de possibilités , mais ne comprend pas beaucoup des attributs centraux que l'on trouve dans les éléments SVG, tels que leurs coordonnées ou les définitions des chemins. Pour quelques cas, comme pour les transformations, suffisamment de possibilités ont été ajoutées au CSS afin que de telles restrictions ne soient rien d'autre qu'un désagrément qui peut être contourné. Toutefois, pour d'autres, CSS n'est pas à la hauteur de la tâche. |
| |
| C'est là que SMIL entre en scène. C'est une spécification ancienne pour l'animation, créée à peu près au même moment que les spécifs du SVG d'origine, et il fournit la possibilité d'animer n'importe quel attribut dans SVG. Il peut animer l'attribut « d » qui suit la forme d'un chemin - une tâche qui ne peut être accomplie dans un navigateur autrement que via Javascript. Mais, bien que SMIL soit plus puissant que le CSS à cet égard, il n'a jamais été adopté dans un navigateur Microsoft, l'entraînant vers son déclin inexorable et une dépréciation probable dans les navigateurs qui le prennent effectivement en charge. | C'est là que SMIL entre en scène. C'est une spécification ancienne pour l'animation, créée à peu près au même moment que les spécifs du SVG d'origine, et il fournit la possibilité d'animer n'importe quel attribut dans SVG. Il peut animer l'attribut « d » qui suit la forme d'un chemin - une tâche qui ne peut être accomplie dans un navigateur autrement que via Javascript. Mais, bien que SMIL soit plus puissant que le CSS à cet égard, il n'a jamais été adopté dans un navigateur Microsoft, l'entraînant vers son déclin inexorable et une dépréciation probable dans les navigateurs qui le prennent effectivement en charge. |
| The first thing we’ll need is a path to animate. It should not have a fill, but will require a stroke. For this demonstration I’ve used Inkscape’s star tool to create an eight pointed star, then converted it to a path and roughly moved every second point inwards to give more of a cartoon gunshot appearance. I’ve given it a stroke-width of 2px and saved it using the “Optimised SVG” option in order to strip out most of the excess baggage from the file, just so that this tutorial isn’t filled with several pages of code.** | The first thing we’ll need is a path to animate. It should not have a fill, but will require a stroke. For this demonstration I’ve used Inkscape’s star tool to create an eight pointed star, then converted it to a path and roughly moved every second point inwards to give more of a cartoon gunshot appearance. I’ve given it a stroke-width of 2px and saved it using the “Optimised SVG” option in order to strip out most of the excess baggage from the file, just so that this tutorial isn’t filled with several pages of code.** |
| |
| Étant donnée la situation, nous n'étudierons pas plus SMIL, mais il y a encore quelques astuces qui peuvent être réalisées avec CSS qui méritent une investigation plus poussée. Cette fois, nous regarderons une technique d'animation de plus en plus populaire qui est en fait le résultat du choix d'une simple fonctionnalité de SVG et de son utilisation dans des façons pour lesquelles elle n'était pas prévue. Il est classique d'y faire référence comme étant la « ligne animée », bien que la ligne elle-même ne change pas de forme (souvenez-vous que ça ne peut pas encore se faire avec le CSS). Cela est appelé aussi, parfois, une image « auto-dessinée », ce qui la décrit un peu mieux : cette technique crée un chemin qui semble être tracé sur l'écran de la même manière que si vous le traciez avec un stylo. | Étant donné la situation, nous n'étudierons pas plus SMIL, mais il y a encore quelques astuces qui peuvent être réalisées avec CSS qui méritent une investigation plus poussée. Cette fois, nous regarderons une technique d'animation de plus en plus populaire qui est en fait le résultat du choix d'une simple fonctionnalité de SVG et de son utilisation dans des façons pour lesquelles elle n'était pas prévue. Il est classique d'y faire référence comme étant la « ligne animée », bien que la ligne elle-même ne change pas de forme (souvenez-vous que ça ne peut pas encore se faire avec le CSS). Cela est appelé aussi, parfois, une image « auto-dessinée », ce qui la décrit un peu mieux : cette technique crée un chemin qui semble être tracé sur l'écran de la même manière que si vous le traciez avec un stylo. |
| |
| La première chose dont nous aurons besoin est un chemin à animer. Il ne devra pas avoir de remplissage, mais aura obligatoirement un contour. Pour cette démonstration, j'ai utilisé l'outil Étoile d'Inkscape pour créer une étoile à huit pointes, puis je l'ai convertie en chemin et j'ai rétracté grossièrement une pointe sur deux pour qu'elle ressemble plus à l'éclair d'un tir dans un dessin animé. Je lui ai donné une largeur de trait de 2 px et je l'ai sauvegardé avec l'option « SVG optimisé » de façon à supprimer la plupart de l'excédent de bagages du fichier, simplement afin que ce tutoriel ne soit pas rempli de plusieurs pages de code. | La première chose dont nous aurons besoin est un chemin à animer. Il ne devra pas avoir de remplissage, mais aura obligatoirement un contour. Pour cette démonstration, j'ai utilisé l'outil Étoile d'Inkscape pour créer une étoile à huit pointes, puis je l'ai convertie en chemin et j'ai rétracté grossièrement une pointe sur deux pour qu'elle ressemble plus à l'éclair d'un tir dans un dessin animé. Je lui ai donné une largeur de trait de 2 px et je l'ai sauvegardé avec l'option « SVG optimisé » de façon à supprimer la plupart de l'excédent de bagages du fichier, simplement afin que ce tutoriel ne soit pas rempli de plusieurs pages de code. |
| L'autre fonctionnalité - et c'est celle qui nous intéresse ici - est que vous pouvez réduire la valeur à un seul nombre pour obtenir des longueurs de ligne et d'espace égales. Une valeur unique de « 10 » équivaut à « 10 10 », vous donnant une série répétée de lignes ayant une longueur de 10 unités, séparées par des espaces de 10 unités de long. Dans mon fichier exemple, cela vous donne quelque chose comme ceci : | L'autre fonctionnalité - et c'est celle qui nous intéresse ici - est que vous pouvez réduire la valeur à un seul nombre pour obtenir des longueurs de ligne et d'espace égales. Une valeur unique de « 10 » équivaut à « 10 10 », vous donnant une série répétée de lignes ayant une longueur de 10 unités, séparées par des espaces de 10 unités de long. Dans mon fichier exemple, cela vous donne quelque chose comme ceci : |
| |
| Regardez maintenant ce qui se passe si vous augmentez la valeur. Plus le nombre croît, plus les segments de ligne grandissent - pareil pour les espaces. Ci-dessous, une succession de copies d'écran de la même image où la valeur de stroke-dasharray est réglée à 10, 20, 50, 100 et 500, est présentée. | Regardez maintenant ce qui se passe si vous augmentez la valeur. Plus le nombre croît, plus les segments de ligne grandissent, c'est pareil pour les espaces. Ci-dessous, une succession de copies d'écran de la même image où la valeur de stroke-dasharray est réglée à 10, 20, 50, 100 et 500, est présentée. |
| |
| Quand nous arrivons à 500, notre premier segment de ligne visible couvre à peu près tout le chemin. Si vous continuez à augmenter la valeur jusqu'à ce qu'elle égale la longueur du chemin, le rendu sera identique à une absence de la propriété stroke-dasharray. Et c'est exactement ce que nous voulons faire ! | Quand nous arrivons à 500, notre premier segment de ligne visible couvre à peu près tout le chemin. Si vous continuez à augmenter la valeur jusqu'à ce qu'elle égale la longueur du chemin, le rendu sera identique à une absence de la propriété stroke-dasharray. Et c'est exactement ce que nous voulons faire ! |
| The simplest option, though, is to ask the browser to do the hard work for you by invoking a little JavaScript. There is a method on the <path> object called getTotalLength() which will return the calculated length of the path. You can call it via the developer console in the browser, or modify your <svg> element to call the method when the file loads and display the value on screen. Here’s an example that will work for a file with a single path:** | The simplest option, though, is to ask the browser to do the hard work for you by invoking a little JavaScript. There is a method on the <path> object called getTotalLength() which will return the calculated length of the path. You can call it via the developer console in the browser, or modify your <svg> element to call the method when the file loads and display the value on screen. Here’s an example that will work for a file with a single path:** |
| |
| Rechargez votre fichier dans le navigateur et vous devriez voir l'effet que nous recherchons - et comme il s'agit simplement d'une animation du CSS directement intégrée dans le fichier SVG, il marchera même si le fichier est mis dans une page Web via une balise <img>. | Rechargez votre fichier dans le navigateur et vous devriez voir l'effet que nous recherchons, et comme il s'agit simplement d'une animation du CSS directement intégrée dans le fichier SVG, il marchera même si le fichier est mis dans une page Web via une balise <img>. |
| |
| Attendez une minute ! D'où vient la valeur de 575 mise dans dasharray et dashoffset ? Comme vous l'avez probablement réalisé, c'est la longueur totale du chemin. Vous pouvez théoriquement la trouver dans Inkscape via l'extension Extensions > Visualisation d'un chemin > Mesurer un chemin…, mais ceci déclenche une erreur de Python sur mon système. À la place, vous pouvez simplement le faire par tâtonnements : augmentez la valeur de dasharray jusqu'à ce que le chemin soit complètement rempli (ce qui se fait facilement en utilisant les outils pour développeur dans le navigateur, si vous êtes à l'aise avec eux). | Attendez une minute ! D'où vient la valeur de 575 mise dans dasharray et dashoffset ? Comme vous l'avez probablement réalisé, c'est la longueur totale du chemin. Vous pouvez théoriquement la trouver dans Inkscape via l'extension Extensions > Visualisation d'un chemin > Mesurer un chemin..., mais ceci déclenche une erreur de Python sur mon système. À la place, vous pouvez simplement le faire par tâtonnements : augmentez la valeur de dasharray jusqu'à ce que le chemin soit complètement rempli (ce qui se fait facilement en utilisant les outils pour développeur dans le navigateur, si vous êtes à l'aise avec eux). |
| |
| Toutefois, l'option la plus simple consiste à demander au navigateur de faire le travail pour vous en invoquant un peu de Javascript. Voici une méthode de l'objet <path> appelée getTotalLength() qui retournera la longueur calculée du chemin. Vous pouvez l'appeler via la console de développeur du navigateur ou modifier votre élément <svg> pour appeler la méthode quand le fichier se charge et afficher la valeur à l'écran. Voici un exemple qui fonctionnera pour un fichier avec un seul chemin : | Toutefois, l'option la plus simple consiste à demander au navigateur de faire le travail pour vous en invoquant un peu de Javascript. Voici une méthode de l'objet <path> appelée getTotalLength() qui retournera la longueur calculée du chemin. Vous pouvez l'appeler via la console de développeur du navigateur ou modifier votre élément <svg> pour appeler la méthode quand le fichier se charge et afficher la valeur à l'écran. Voici un exemple qui fonctionnera pour un fichier avec un seul chemin : |
