Bonjour, je ne suis pas sur d'être au bon forum, mais je vous explique. Regardez cette animation d'oiseau en vol (magazine Web Design N°87):

srt.lt/wQ8jEc

Je l'ai reproduit et cela fonctionne. Mais je n'arrive pas à créer cette suite d'image en SVG, pour d'autres animations. J'ai essayé d'aligner plusieurs dessins avec Photoshop Elements et de les transformer en SVG avec Inkscape, mais ça ne fonctionne pas correctement.

Pourriez m'aider, me conseiller un site, un livre ou tout autre chose qui puisse m'aider avec les images SVG.

Merci.

Il faut que tu précises ce que tu entends par "ne fonctionne pas correctement".

Le script utilise un spritesheet en background-image et fait certainement varier la position du background dans le conteneur pour passer d'une frame à l'autre.

Si tu veux dessiner une animation image par image, tu peux effectivement tout aligner dans Photoshop sur des calques de façon à ce que quand les calques sont affichés ou masqués l'animation se joue correctement, puis générer des images séparées à partir de ces calques, qui seront donc toutes au même format avec l'objet correctement positionné, et pour faire ton spritesheet final, il ne te restera qu'à créer une dernière image de largeur égale à la somme des largeurs des images et à positionner les images côte à côte dedans.

Bonjour, je vous remercie de votre réponse. Je ne connais pas grand-chose en image et avant ce code je ne connaissais pas du tout le SVG.

Je ne sais pas si vous avez regardé, mais les oiseaux ont vraiment l'impression de voler. Avec mon spritsheet SVG, c'est tout le carré avec tout les sujets en même temps (en l’occurrence des fourmis) qui s'anime. De plus, le fond est blanc au lieu d'être transparent.

Je ne sais comment cela ce passe avec les oiseaux pour que l'image devienne animation.

Crée un codepen ou un jsfiddle et montre-nous ce que tu as fait.

Tu peux voir un exemple simple ici : https://jsfiddle.net/62adqgo2/

Au dessus du HR, on a exactement la même structure qu'en dessous. Ce qui change c'est que le div #anim a une hauteur fixe de 50px, qui est la hauteur des sprites du spritesheet, et un overflow qui ne permet d'afficher qu'une image à la fois, et qu'on a une animation avec la fonction steps() qui fait déplacer le .wrapper par sauts de 50px dans la fenêtre d'animation.

-
Edité par tabouretBleu 24 avril 2018 à 0:21:46

Avec les oiseaux, ça fonctionne :

https://codepen.io/SteBast/pen/qYZYVL

 Mais pas du tout avec mes images SVG, rien ne se passe. Mes images SVG ont le sigle d'internet explorer.
Désolé de la réponse tardive, mais je ne connaissais pas codepen. C'est le format de mes images qui posent problème, puisque j'ai essayé avec une image au hasard et cela donne le même résultat. Une photo qui vole.

Salut,

Je ne sais pas trop quoi ajouter. C'est le genre de truc qui retourne un peu le cerveau au début, et pus ça fait "clic" et après tu trouves ça évident, donc pour t'assister davantage ça va être difficile. Il faut que tu comprennes bien comment ça marche.

Dans mon jsfiddle j'ai pris un cas totalement différent avec un spritesheet en hauteur et en HTML. Comparer les deux peut te donner des clés. Cherche aussi des tutos. Je pense qu'il faut que tu vois plein de codes différents.

Le codepen que tu utilises comme base est un peu compliqué car il y a plusieurs oiseaux et des animations imbriquées, donc pour apprendre, commence par un truc plus basique.