| Les deux révisions précédentesRévision précédente | Prochaine révisionLes deux révisions suivantes |
| issue150:inkscape [2019/11/06 14:15] – d52fr | issue150:inkscape [2019/11/07 11:13] – auntiee |
|---|
| We have looked at animation in this series before: in part 75 we looked at some simple CSS animations, then in parts 76 and 77 we moved on to SMIL animation. At the time I commented that SMIL was something of a dead-end technology, largely due to Microsoft never implementing it in any browser. But times have changed, and Microsoft have effectively given up on developing their own browser engine: shortly Microsoft Edge will begin using the same engine as Chrome, so should gain SMIL support as a side-effect. Whether or not this is enough to turn the tide for SMIL remains to be seen. Personally I think it’s a great technology for animating SVG particularly, but the browser vendors seem to have settled on CSS animations as the way to go – even though that technology still doesn’t cover all the use-cases that SMIL can handle.** | We have looked at animation in this series before: in part 75 we looked at some simple CSS animations, then in parts 76 and 77 we moved on to SMIL animation. At the time I commented that SMIL was something of a dead-end technology, largely due to Microsoft never implementing it in any browser. But times have changed, and Microsoft have effectively given up on developing their own browser engine: shortly Microsoft Edge will begin using the same engine as Chrome, so should gain SMIL support as a side-effect. Whether or not this is enough to turn the tide for SMIL remains to be seen. Personally I think it’s a great technology for animating SVG particularly, but the browser vendors seem to have settled on CSS animations as the way to go – even though that technology still doesn’t cover all the use-cases that SMIL can handle.** |
| |
| Durant ces derniers mois, nous avons regardé les différentes façons de modifier dynamiquement votre contenu SVG quand il tourne dans un navigateur Web, en utilisant Javascript. En faisant ces modifications sur un certain laps de temps, nous pouvons effectivement utiliser JS pour animer nos fichiers SVG. | Durant ces derniers mois, nous avons regardé les différentes façons de modifier dynamiquement votre contenu SVG quand il tourne dans un navigateur Web, en utilisant JavaScript. En faisant ces modifications sur un certain laps de temps, nous pouvons utiliser JS efficacement pour animer nos fichiers SVG. |
| |
| Nous avons déjà une animation dans notre série : dans la partie 75, nous avons regardé des animations simples avec CSS, puis dans les parties 76 et 77, nous sommes passés à des animations avec SMIL. À ce moment-là, j'ai fait un commentaire pour indiquer que SMIL était une technologie en fin de vie, en grande partie parce que Microsoft ne l'avait jamais implémentée dans aucun navigateur. Mais les temps ont changé et Microsoft a réellement laissé tomber le développement de son propre moteur de navigation : dans peu de temps, Microsoft Edge commencera à utiliser le même moteur que Chrome, donnant par contre-coup un support à SMIL. Que ça suffise ou pas pour que ça inverse les choses pour SMIL, ça reste à voir. Personnellement, je pense que c'est une superbe technologie, en particulier pour l'animation des SVG, mais les fournisseurs de navigateurs semblent considérer que les animations avec CSS sont la voie à suivre - même si cette technologie ne couvre pas tous les cas d'utilisation que SMIL peut traiter. | Nous avons déjà une animation dans notre série : dans la partie 75, nous avons regardé des animations simples avec CSS, puis dans les parties 76 et 77, nous sommes passés à des animations avec SMIL. À ce moment-là, j'ai fait un commentaire pour indiquer que SMIL était une technologie en fin de vie, en grande partie parce que Microsoft ne l'avait jamais implémentée dans aucun navigateur. Mais les temps ont changé et Microsoft a réellement laissé tomber le développement de son propre moteur de navigation : dans peu de temps, Microsoft Edge commencera à utiliser le même moteur que Chrome, donnant par contre-coup un support à SMIL. Que ça suffise ou pas pour inverser les choses pour SMIL, reste à voir. Personnellement, je pense que c'est une superbe technologie, en particulier pour l'animation des SVG, mais les fournisseurs de navigateurs semblent considérer que les animations avec CSS sont la voie à suivre - même si cette technologie ne couvre pas tous les cas d'utilisation que SMIL peut traiter. |
| |
| **So we’re slightly stuck in limbo. SMIL offers huge power, but its time may be short. CSS animation is less powerful, but widely supported. However with JavaScript we can sort-of get the best of both worlds: as much power and flexibility as we need, in a way that has excellent cross-browser support. | **So we’re slightly stuck in limbo. SMIL offers huge power, but its time may be short. CSS animation is less powerful, but widely supported. However with JavaScript we can sort-of get the best of both worlds: as much power and flexibility as we need, in a way that has excellent cross-browser support. |
| Of course things aren’t all rosy. When using SMIL or CSS animations you essentially take a pretty hands-off approach to things. Your input is a simple instruction: “Animate this object from A to B, over 5 seconds”. You don’t need to work out how the position of the object changes from one frame to the next, or worry about your animation imposing a heavy load on the machine. Instead you simply let the browser handle all the intermediate calculations – and the browser’s code is a lot faster at handling those things than anything you could write for yourself in JavaScript.** | Of course things aren’t all rosy. When using SMIL or CSS animations you essentially take a pretty hands-off approach to things. Your input is a simple instruction: “Animate this object from A to B, over 5 seconds”. You don’t need to work out how the position of the object changes from one frame to the next, or worry about your animation imposing a heavy load on the machine. Instead you simply let the browser handle all the intermediate calculations – and the browser’s code is a lot faster at handling those things than anything you could write for yourself in JavaScript.** |
| |
| Ainsi, nous sommes un peu dans le flou. SMIL offre une puissance énorme, mais son temps est compté. Les animations avec CSS sont moins puissantes, mais largement supportées. Cependant, avec Javascript, nous pouvons avoir, en quelque sorte, le meilleur des deux mondes : autant de puissance et de flexibilité que nous voulons, avec le fait qu'il a un excellent support multi-navigateurs. | Ainsi, nous sommes un peu dans le flou. SMIL offre une puissance énorme, mais son temps est sans doute compté. Les animations avec CSS sont moins puissantes, mais largement supportées. Cependant, avec JavaScript, nous pouvons avoir, en quelque sorte, le meilleur des deux mondes : autant de puissance et de flexibilité que nous voulons, avec le fait qu'il a un excellent support multi-navigateurs. |
| |
| Bien sûr, les choses ne sont pas aussi roses. Quand nous utilisons des animations avec SMIL ou CSS, nous privilégions une approche plutôt légère des choses. Votre saisie est une simple instruction : « Animer cet objet de A à B, en 5 secondes ». Vous n'avez pas besoin de dire comment la position de votre objet changera d'une trame à l'autre, ou de vous inquiéter de ce que votre animation impose une forte charge à la machine. Au lieu de ça, vous laissez le navigateur gérer tous les calculs intermédiaires - et le code du navigateur est largement plus rapide pour gérer ces choses que tout ce que vous pourriez écrire en Javascript. | Bien sûr, les choses ne sont pas toutes roses. Quand nous utilisons des animations avec SMIL ou CSS, nous privilégions une approche plutôt légère des choses. Votre saisie est une simple instruction : « Animer cet objet de A à B, en 5 secondes ». Vous n'avez pas besoin de dire comment la position de votre objet changera d'une trame à l'autre, ou de vous inquiéter de ce que votre animation impose une forte charge à la machine. Au lieu de ça, vous laissez le navigateur gérer tous les calculs intermédiaires - et le code du navigateur est largement plus rapide pour gérer ces choses-là que tout ce que vous pourriez écrire en JavaScript. |
| |
| **So JS animation gives you flexibility, but at the expense of performance. Most of the time that won’t matter: the JavaScript engine in a modern browser is heavily optimised, so just moving an element or two around the screen isn’t likely to impose much of a burden. But if you start to animate a large number of objects, especially on a mobile device, you might find that your animations aren’t as smooth as they could be with the other technologies. | **So JS animation gives you flexibility, but at the expense of performance. Most of the time that won’t matter: the JavaScript engine in a modern browser is heavily optimised, so just moving an element or two around the screen isn’t likely to impose much of a burden. But if you start to animate a large number of objects, especially on a mobile device, you might find that your animations aren’t as smooth as they could be with the other technologies. |
| Enough of the pros and cons, on with the code! Once again we’ll do all this in the browser’s developer tools, so you’ll need a super simple SVG file to start with the code shown below.** | Enough of the pros and cons, on with the code! Once again we’ll do all this in the browser’s developer tools, so you’ll need a super simple SVG file to start with the code shown below.** |
| |
| L'animation en JS vous donne aussi de la flexibilité, mais au prix d'une moindre performance. Ça n'a pas d'importance la plupart du temps : le moteur de Javascript dans un navigateur moderne est fortement optimisé ; ainsi, le seul mouvement d'un ou deux éléments sur l'écran n'entraîne pas une grosse charge. Mais si vous commencez à animer un grand nombre d'objets, particulièrement sur un dispositif mobile, vous pourriez trouver que vos animations ne sont pas aussi fluides qu'elles pourraient l'être avec d'autres technologies. | L'animation en JS vous donne de la flexibilité, mais au prix d'une moindre performance. Ça n'a pas d'importance la plupart du temps : le moteur de JavaScript dans un navigateur moderne est fortement optimisé ; ainsi, le seul mouvement d'un ou deux éléments sur l'écran n'entraîne pas une grosse charge. Mais si vous commencez à animer un grand nombre d'objets, particulièrement sur un dispositif mobile, vous pourriez trouver que vos animations ne sont pas aussi fluides qu'elles pourraient l'être avec d'autres technologies. |
| |
| Arrêtons ces comparaisons, passons au code ! Une fois encore, nous ferons tout cela dans les outils du développeur du navigateur ; vous aurez besoin aussi d'un fichier SVG super simple pour commencer avec le code présenté ci-dessous. | Arrêtons ces comparaisons, passons au code ! Une fois encore, nous ferons tout cela dans les outils du développeur du navigateur ; vous aurez besoin aussi d'un fichier SVG super simple pour commencer avec le code présenté ci-dessous. |
| **If you were to load that file into Inkscape, it should look like the image below. The page boundary is a square of 100×100 units, as defined in the viewBox attribute. The square itself is positioned with its top left corner at 10 units down, and 10 units across from the origin (the top-left of the page in SVG). Remember these units are not pixels – the image will actually be scaled to fit the available space in the browser window. By using a 100×100 viewBox it can be convenient to think of the values as percentages, but in reality it’s better to treat them as proportions or ratios, as that mental model works regardless of the viewBox size.** | **If you were to load that file into Inkscape, it should look like the image below. The page boundary is a square of 100×100 units, as defined in the viewBox attribute. The square itself is positioned with its top left corner at 10 units down, and 10 units across from the origin (the top-left of the page in SVG). Remember these units are not pixels – the image will actually be scaled to fit the available space in the browser window. By using a 100×100 viewBox it can be convenient to think of the values as percentages, but in reality it’s better to treat them as proportions or ratios, as that mental model works regardless of the viewBox size.** |
| |
| Si vous chargiez ce fichier dans Inkscape, il ressemblerait à l'image du haut de la page suivante. Les limites de la page sont un carré de 100x100 unités, comme défini dans l'attribut de viewBox. Le carré lui-même est positionné avec son angle du haut à gauche à 10 unités sous, et 10 unités à droite, de l'origine (l'angle en haut à gauche dans SVG). Souvenez-vous que ces unités ne sont pas des pixels - l'image sera en fait redimensionnée pour s'adapter à la place disponible dans al fenêtre du navigateur. En utilisant une viewBox de 100x100, il est pratique de voir ces dimensions comme des pourcentages, mais, en fait, c'est mieux de les traiter comme des proportions ou des rapports, car ce modèle mental fonctionne quelque soit la taille de la viewBox. | Si vous chargiez ce fichier dans Inkscape, il ressemblerait à l'image du haut de la page suivante. Les limites de la page sont un carré de 100x100 unités, comme défini dans l'attribut de viewBox. Le carré lui-même est positionné avec son angle du haut à gauche à 10 unités sous, et 10 unités à droite, de l'origine (l'angle en haut à gauche dans SVG). Souvenez-vous que ces unités ne sont pas des pixels - l'image sera en fait redimensionnée pour s'adapter à la place disponible dans la fenêtre du navigateur. En utilisant une viewBox de 100x100, il est pratique de voir ces dimensions comme des pourcentages, mais, en fait, c'est mieux de les traiter comme des proportions ou des rapports, car ce modèle mental fonctionne quelle que soit la taille de la viewBox. |
| |
| **We’re going to animate the “x” attribute from its starting value of 10 up to a value of 90. Because the square is 30 units wide, this will leave it hanging off the right-hand side of the screen when the animation finishes. I’ve done this to demonstrate a key difference between animating the content of an SVG file, and animating a <div> or other box in an HTML page: in the latter case the page width will grow and a horizontal scroll bar will appear (unless you specifically prevent that behaviour). With an SVG file, anything outside the viewBox simply isn’t rendered, making it easier to have animations that start or end ‘off-screen’. Think of it a little like a theatre stage, with your props and characters moving to and from the wings.** | **We’re going to animate the “x” attribute from its starting value of 10 up to a value of 90. Because the square is 30 units wide, this will leave it hanging off the right-hand side of the screen when the animation finishes. I’ve done this to demonstrate a key difference between animating the content of an SVG file, and animating a <div> or other box in an HTML page: in the latter case the page width will grow and a horizontal scroll bar will appear (unless you specifically prevent that behaviour). With an SVG file, anything outside the viewBox simply isn’t rendered, making it easier to have animations that start or end ‘off-screen’. Think of it a little like a theatre stage, with your props and characters moving to and from the wings.** |
| |
| Nous allons animer l'attribut « x » depuis sa valeur de départ (10) jusqu'à une valeur de 90. Comme le carré fait 30 de coté, il dépassera la marge droite de l'écran à la fin de l'animation. Je l'ai fait pour vous montrer une différence capilale entre l'animation du contenu d'un fichier SVG et l'animation d'unn<div> ou d'un autre cadre dans une page HTML : dans ce dernier cas, la largeur de la page augmentera et une barre de défilement horizontale apparaîtra (sauf si vous empêchez spécifiquement ce comportement). Avec un fichier SVG, tout ce qui est hors de la viewBox est simplement non rendu, facilitant les animations qui commencent en dehors de l'écran. Pensez à cela comme à une scène de théatre, avec vos accessoires et vos personnages passant de la cour au jardin et vice-versa. | Nous allons animer l'attribut « x » depuis sa valeur de départ (10), jusqu'à une valeur de 90. Comme le carré fait 30 unités de coté, il dépassera la marge droite de l'écran à la fin de l'animation. Je l'ai fait pour vous montrer une différence capilale entre l'animation du contenu d'un fichier SVG et l'animation d'un <div> ou d'un autre cadre dans une page HTML : dans ce dernier cas, la largeur de la page augmentera et une barre de défilement horizontale apparaîtra (sauf si vous empêchez spécifiquement ce comportement). Avec un fichier SVG, tout ce qui est hors de la viewBox est simplement non rendu, facilitant les animations qui commencent ou terminent en dehors de l'écran. Pensez à cela comme à une scène de théatre, avec vos accessoires et vos personnages passant de la cour au jardin et vice-versa. |
| |
| **Load that file into your browser then in the developer console (F12) we’ll get a handle to it assigned to a variable for use later on. | **Load that file into your browser then in the developer console (F12) we’ll get a handle to it assigned to a variable for use later on. |
| var s1 = document.querySelector("#s1"); | var s1 = document.querySelector("#s1"); |
| |
| Rappel : voici comment la coordonnée x peut être modifiée, en utilisant JS. Lancez-la pour confirmer que la boîte se déplace un peu. | Rappel : voici comment la coordonnée x peut être modifiée en utilisant JS. Lancez-la pour confirmer que la boîte se déplace un peu. |
| |
| s1.setAttribute("x", 20); | s1.setAttribute("x", 20); |
| |
| En gros, notre animation consistera à lancer une ligne comme celle-là de façon répétitive. Javascript est un langage assez pauvre pour les tâches liées au temps telle que celle-ci, mais il offre bien quelques fonctions rudmentaires qui seront suffisantes pour nos besoins. Nous avons déjà vu la plus basique d'entre elles il y a quelques mois, quand nous avons utilisé setTimeout() pour éclairer et éteindre en séquence des feux tricolores. Le code suivant (ci-dessus) déplacera le carré, après un délai de 2000 ms (2 secondes). | En gros, notre animation consistera à lancer une ligne comme celle-là de façon répétitive. JavaScript est un langage assez pauvre pour les tâches liées au temps telle que celle-ci, mais il offre bien quelques fonctions rudimentaires qui seront suffisantes pour nos besoins. Nous avons déjà vu la plus basique d'entre elles il y a quelques mois, quand nous avons utilisé setTimeout() pour éclairer et éteindre en séquence des feux tricolores. Le code suivant (ci-dessus) déplacera le carré, après un délai de 2000 ms (2 secondes). |
| |
| |
