5568 sujets

Sémantique web et HTML

Bonjour à toutes et tous,

J'ai une demande sur le svg que je découvre petit à petit et qui, je dois l'avouer, me plaît de plus en plus.

J'ai déjà réussi à animer, avec du css, un svg (comme par exemple le faire tourner, grossir ou encore changer de couleur etc ... le basic quoi) mais là j'aimerai aller plus loin.

Par exemple j'ai un petit cactus en svg et j'aimerai l'animer pour qu'il danse en levant les bras par exemple (m'enfin les bras ... vous m'avez compris Smiley biggrin ).

Le problème c'est que je n'ai aucune idée de comment faire... Est-ce plusieurs svg que je vais devoir superposer et faire une espèce de morphing ou tout simplement avec du css et de la patience cela devrait être possible ?

J'avoue que si vous aviez des tutoriels ou des pistes pour réaliser ce genre de chose je suis preneur, j'ai bien entendu chercher de mon côté mais cela me renvoie à chaque fois sur les mêmes choses : animations basiques.

Merci d'avance pour votre aide et vos conseils.

PS : J'espère avoir été clair dans ma demande Smiley rolleyes
Modérateur
Bonjour,

alors niveau technique il existe 3 moyens d'animer:

1) SMIL - Une syntaxe intégrée au SVG, mais à moitié abandonnée aujourd'hui et pas implémentée sous IE/Edge

2) CSS - Simple et facile à mettre en œuvre pour des petites animations basiques.

3) Javascript (avec CSS aussi): Pour les animations plus longues (enchainements) ou complexes.

Pour la troisième il existe des librairies pour aider: svg.js ou snap.svg par exemple.

Maintenant tout cela est très bien pour toutes les animations «mathématiques», qui suivent des fonctions simples ou complexes. Mais si on souhaite réaliser des animations organiques et naturelles, ce sera de toute façon long et fastidieux et passera par de l'image après image.
Modifié par kustolovic (30 Jan 2019 - 11:43)
kustolovic a écrit :
:) L'exemple de Jencal est un bon exemple de ce que l'on peut faire avec des animations basiques et un peu d'inventivité.

Lorsque je parle d'animations organiques je parle plutôt de ça: https://codepen.io/dudleystorey/pen/aNxEBg


Effectivement ça ressemble beaucoup à ce que je dois faire.

Je vais creuser cette piste du coup