css svg animation post #156

ameliedefrance · 2017-07-31T15:00:28Z

No description provided.

cmeiller

C'pas mal mais ca mérite de rentrer plus dans le détails sur les animations, avec des bouts de code, ainsi que comment et pourquoi ça marche :)

cmeiller · 2017-08-01T10:00:04Z

content/elao/animer-un-svg-en-css.md

+
+## Avant l'animation : définir la viewbox
+
+Le svg est limité dans l’espace par sa viewbox. Dans Illustrator ou sketch, la viewbox correspond au canvas ou à _l’artboard_ dans lequel nous dessinons. Si un élément sort de la viewbox, par exemple lors de l'animation, il se sera plus visible. Les dimensions de la viewbox sont donc à réfléchir avant de commencer à animer.


- il se sera plus visible. + il ne sera plus visible.

cmeiller · 2017-08-01T10:01:48Z

content/elao/animer-un-svg-en-css.md

+
+Les transformations css permettent 4 mouvements : la translation, la rotation, la redimension et l’inclinaison oblique. Les transformations qui nous intéressent pour l’animation d’un SVG se situent principalement sur les axes x et y.
+
+Ici, nous jouons avec scale() pour déformer les paths du logo Elao, puis rotate() pour se déplacer en rotation en définissant le centre de la lettre A comme origine.


Rajoute des ` autour des méthodes :

`scale()` `rotate()`

cmeiller · 2017-08-01T10:19:58Z

content/elao/animer-un-svg-en-css.md

+
+Même si l’animation en css offre déjà de larges possibilités d’animation, elle se confronte à certaines limites, auxquelles on peut toutefois pallier grâce à SMIL ou Javascript.
+
+La plus flagrante est l’absence d’interactivité avec l’animation : difficile à priori de faire réagir un élément svg à des événements uniquement en css. Impossible également de déformer complètement le path d’un élément, ou encore de se déplacer de façon non-linéaire, en suivant une courbe par exemple.


ou encore de se déplacer de façon non-linéaire, en suivant une courbe par exemple.

Faux :p
http://tobiasahlin.com/blog/curved-path-animations-in-css/

cmeiller · 2017-08-01T10:20:51Z

content/elao/animer-un-svg-en-css.md

+
+## Le mot de la fin
+
+L'éventail de mouvements et d'animations possibles en css ouvre énormément de possibilités, lorsque cette animation est décorative et n'impacte pas le fonctionnel. L'animation en css est largement supportée sur les navigateurs récents (source : [CanIUse](https://caniuse.com/#search=svg)). Pour le reste, il existe d'excellentes alternatives grâce à SMIL -- attention toutefois : pas de support sur IE ni sur Edge, ou en Javascript grâce notamment à Snap.svg.


- lorsque cette animation est décorative et n'impacte pas le fonctionnel. + du moment que cette animation reste décorative et n'impacte pas le fonctionnel.

cmeiller

Je trouve que ça manque de transition fluide dans tes explications. Ce que je veux dire c'est que tu devrais essayer de "raconter une histoire", de te fixer un objectif au début de l'article et de le développer au fur et à mesure de la lecture.
Par exemple, tu peux montrer le résultat en tout début d'article pour attirer l'attention.
Ensuite, dans tes explications, tu peux ajouter des transitions : tu commences par parler de la viewbox avec un exemple concret, jusque là parfait ; ensuite tu parles des transformations avec CSS, je trouve la transition assez dure. Tu pourrais par exemple dire :

Maintenant qu'on a défini notre viewbox dans le body de la page, nous allons y ajouter notre image pour commencer l'animation...

Et à partir de là tu peux rebondir sur le principe des animations etc.
En gros tu vas construire ton animation étape par étape, c'est ce que j'appelle "raconter une histoire".
En gros tu fais tout le temps référence à ta viewbox et tu la fais évoluer :)
Qu'en penses-tu ?

Je sais que je te fais tout modifier encore mais ça nous entraine à faire de meilleurs articles ;)

cmeiller · 2017-08-04T08:38:04Z

content/elao/animer-un-svg-en-css.md

+
+thumbnail:          "/images/posts/thumbnails/animation.jpg"
+header_img:         "/images/posts/headers/animation.jpg"
+tags:               ["svg","animation","css", "integration"]


Aucune idée si ça un impact mais met des espaces pour plus de régularité entre les items.

cmeiller · 2017-08-04T08:38:50Z

content/elao/animer-un-svg-en-css.md

+author_username:    "adefrance"
+---
+
+> Le SVG est un langage XML utilisé pour décrire des graphiques en 2 dimensions. Il     permet 3 types d'objet graphiques : des formes vectorielles, des images et du texte.  -- W3C


Chelou le gros espace entre "il et "permet"

cmeiller · 2017-08-04T08:39:13Z

content/elao/animer-un-svg-en-css.md

+
+## Avant l'animation : définir la viewbox
+
+Le svg est limité dans l’espace par sa viewbox. Dans Illustrator ou sketch, la viewbox correspond au canvas ou à _l’artboard_ dans lequel nous dessinons. Si un élément sort de la viewbox, par exemple lors de l'animation, il ne sera plus visible. Les dimensions de la viewbox sont donc à réfléchir avant de commencer à animer.


Majuscule à Sketch

cmeiller · 2017-08-04T08:40:04Z

content/elao/animer-un-svg-en-css.md

+```
+<svg width="500px" height="500px" viewBox="0 0 500 500">
+</svg>
+```


Micro explication sur la signification du 0 0 500 500 ? :) ainsi que les units qu'il utilise

cmeiller · 2017-08-04T08:52:22Z

content/elao/animer-un-svg-en-css.md

+
+### Démo: animer la transformation `scale()`
+#### La théorie
+La fonction `scale()` permet permet de modifier la taille d'un élément selon une échelle sur 2 dimensions : c'est à dire sur les axes X et/ou Y. Par défaut, tous les élements sont à l'échelle 1. Soit `scale(1)`.


2x permet

- c'est à dire + c'est-à-dire

cmeiller · 2017-08-04T08:54:10Z

content/elao/animer-un-svg-en-css.md

+  // Pas d'étape intermédiaire
+  to { // État à la fin de l'animation }
+}
+```


Décore tes snippers de code en css (rajoute css après ```)
Et enlève les crochets pour les commentaires. Pas sur du rendu mais faut tester :p

cmeiller · 2017-08-04T08:56:06Z

content/elao/animer-un-svg-en-css.md

+```
+
+```
+@keyframes fill {


Peut-être un nom d'animation plus clair ?

cmeiller · 2017-08-04T08:59:04Z

content/elao/animer-un-svg-en-css.md

+La plus flagrante est l’absence d’interactivité avec l’animation : difficile à priori de faire réagir un élément svg à des événements uniquement en CSS. Impossible également de déformer complètement le `path` d’un élément.
+
+### Bonus
+#### Suivre une trajectoire courbée


J'aurais pas vu ça comme un bonus mais plutôt un point comme un autre dans ce qu'on ne peut pas faire en CSS en précisant qu'il existe cependant des tips qui font le taff mais qui sont peut-être un peu compliqués et que le CSS devient peut-être plus vraiment adapté à ce niveau là...

cmeiller · 2017-08-04T09:02:16Z

content/elao/animer-un-svg-en-css.md

+### Bonus
+#### Suivre une trajectoire courbée
+
+Ce trick est tiré du [blog de Tobias Ahlin](http://tobiasahlin.com/blog/curved-path-animations-in-css/). Il montre qu'il est possible de suivre une trajectoire non-linéaire en animant simultanément un élément et son conteneur invisible -- comme si l'on bougeait dans des sens différents deux calques superposés. En donnant la même durée aux deux animations mais en décalant leur `animation-timing-function` pour qu'elles soient désynchronisées, on obtient l'illusion que l'objet se déplace sur une courbe.


- mais en décalant leur `animation-timing-function` + mais en décalant leur fonction de progression (`animation-timing-function`)

supertanuki

Juste la remarque pour SMIL sinon 👍

supertanuki · 2017-10-04T11:41:20Z

content/elao/animer-un-svg-en-css.md

+
+## Ce qu’on ne peut pas faire en CSS
+
+Même si l’animation en CSS offre déjà de larges possibilités d’animation, elle se confronte à certaines limites, auxquelles on peut toutefois pallier grâce à SMIL ou Javascript.


lien ou description pour SMIL ?

xavier-rdo · 2017-10-25T12:09:02Z

👍 Moi, j'aime beaucoup ! (Je suis une quiche en CSS/SVG et l'article m'a paru limpide).

Je propose quelques modifications mineures, et notamment de changer sa rubrique (création d'une nouvelle rubrique de premier niveau "Inté") : #174

[Inte] Svg animation - some minor updates

cmeiller · 2017-11-09T14:29:20Z

J'aimerais bien prendre le temps de le relire et mettre en stand by encore un peu, sorry Amélie.

supertanuki

👍

css svg animation post

fd0181c

ameliedefrance requested a review from cmeiller July 31, 2017 15:00

ameliedefrance added the Ready to review label Jul 31, 2017

cmeiller reviewed Aug 1, 2017

View reviewed changes

ameliedefrance added 4 commits August 1, 2017 17:32

wip rewrite

c3dc039

wip rewrite

9581ac0

rewrite

3d42c36

rewrite

6060175

cmeiller reviewed Aug 4, 2017

View reviewed changes

ameliedefrance added 2 commits August 4, 2017 15:43

rewrite

1ba4c79

move trick

76a609b

supertanuki approved these changes Oct 4, 2017

View reviewed changes

cmeiller added In progress and removed Ready to review labels Oct 4, 2017

[Inte] SVG animation: some minor updates/refacto

7795b0f

Merge pull request #174 from Elao/svg-animation-rdo

514cbc5

[Inte] Svg animation - some minor updates

xavier-rdo approved these changes Oct 25, 2017

View reviewed changes

change date

e9afa4d

ameliedefrance added Ready to review and removed In progress labels Nov 9, 2017

add link to smil article

19b4756

supertanuki approved these changes Nov 24, 2017

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

css svg animation post #156

css svg animation post #156

ameliedefrance commented Jul 31, 2017

cmeiller left a comment

cmeiller Aug 1, 2017

cmeiller Aug 1, 2017

cmeiller Aug 1, 2017

cmeiller Aug 1, 2017

cmeiller left a comment •

edited

Loading

cmeiller Aug 4, 2017

cmeiller Aug 4, 2017

cmeiller Aug 4, 2017

cmeiller Aug 4, 2017

cmeiller Aug 4, 2017

cmeiller Aug 4, 2017

cmeiller Aug 4, 2017

cmeiller Aug 4, 2017

cmeiller Aug 4, 2017

supertanuki left a comment •

edited

Loading

supertanuki Oct 4, 2017

xavier-rdo commented Oct 25, 2017

cmeiller commented Nov 9, 2017

supertanuki left a comment


		## Avant l'animation : définir la viewbox

		Le svg est limité dans l’espace par sa viewbox. Dans Illustrator ou sketch, la viewbox correspond au canvas ou à _l’artboard_ dans lequel nous dessinons. Si un élément sort de la viewbox, par exemple lors de l'animation, il se sera plus visible. Les dimensions de la viewbox sont donc à réfléchir avant de commencer à animer.


		Les transformations css permettent 4 mouvements : la translation, la rotation, la redimension et l’inclinaison oblique. Les transformations qui nous intéressent pour l’animation d’un SVG se situent principalement sur les axes x et y.

		Ici, nous jouons avec scale() pour déformer les paths du logo Elao, puis rotate() pour se déplacer en rotation en définissant le centre de la lettre A comme origine.


		Même si l’animation en css offre déjà de larges possibilités d’animation, elle se confronte à certaines limites, auxquelles on peut toutefois pallier grâce à SMIL ou Javascript.

		La plus flagrante est l’absence d’interactivité avec l’animation : difficile à priori de faire réagir un élément svg à des événements uniquement en css. Impossible également de déformer complètement le path d’un élément, ou encore de se déplacer de façon non-linéaire, en suivant une courbe par exemple.


		## Le mot de la fin

		L'éventail de mouvements et d'animations possibles en css ouvre énormément de possibilités, lorsque cette animation est décorative et n'impacte pas le fonctionnel. L'animation en css est largement supportée sur les navigateurs récents (source : [CanIUse](https://caniuse.com/#search=svg)). Pour le reste, il existe d'excellentes alternatives grâce à SMIL -- attention toutefois : pas de support sur IE ni sur Edge, ou en Javascript grâce notamment à Snap.svg.


		## Ce qu’on ne peut pas faire en CSS

		Même si l’animation en CSS offre déjà de larges possibilités d’animation, elle se confronte à certaines limites, auxquelles on peut toutefois pallier grâce à SMIL ou Javascript.

css svg animation post #156

Are you sure you want to change the base?

css svg animation post #156

Conversation

ameliedefrance commented Jul 31, 2017

cmeiller left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cmeiller left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

supertanuki left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xavier-rdo commented Oct 25, 2017

cmeiller commented Nov 9, 2017

supertanuki left a comment

Choose a reason for hiding this comment

cmeiller left a comment •

edited

Loading

supertanuki left a comment •

edited

Loading