animation image par image javascript

Le problème exposé dans ce sujet a été résolu.

Bonjour,

Je suis nouveau sur ce forum, désolé si je commet des impaires ;)

Je veux intégrer de petites animation personnalisées dans un site (exemple: petits points qui cintillent un moment sur un élément au passage de la souris). Pour l’instant, je les dessines image par image, puis je fait défiler ces images avec un peu de javascript.

Y a un moyen plus propre de faire ça ? ou c’est la bonne méthode ?

Précision, vous pouvez considérer que je suis débutant en tout :lol:

Merci.

+0 -0

Bonjour,

La méthode majoritairement utilisé consiste à regrouper plusieurs images (frame / sprites) sur une seule image (tileset) et à décaler la propriété background-image en CSS à l’aide de la propriété background-position.

1) La première étape consiste à uniformisé si ce n’est pas déjà fait, la dimension de tes images d’animations puis à les caler côte à côte en utilisant un outil type Photoshop / Gimp / Paint.net. Le plus simple étant de les placer horizontalement. Après si y’a trop de frames en largeur, il vaut mieux les découper de gauche à droite et de haut en bas (visuellement c’est mieux).

2) Tu définis ton élément HTML comme tu le souhaites et tu importes l’image avec CSS.

.anim {
    width: 64px; /* largeur d'une frame */
    height: 64px; /* hauteur d'une frame */
    background-image: url('/img/anim01.png'); /* emplacement de ton tileset */
    background-position: 0 0; /* on commence en haut à gauche de l'image */
    background-repeat: no-repeat; /* bloquer la répétition */
}

3) On ajoute une propriété d’animation en faisant glisser le tileset depuis la gauche.

.anim {
    animation: anim 5s steps(10) infinite; /* 10 -> nb de frames */
}

@keyframes anim {
    100%  { background-position: -640px 0; } /* nb de frames x largeur d'une frame */
}

Penses à ajouter les différents supports (-webkit, -moz-, -o-) si tu codes from scratch.

Exemple ici avec 3 frames : https://codepen.io/Yarflam/pen/LYGXzwo.

+2 -0

Merci Yarflam,

C’est intéressant, et je garde cette méthode dans un coin de ma tête, je l’utiliserait sûrement mais il me semble que je ne peut pas l’adapter pour ce que je souhaite faire précisément.

L’idée c’est de déclencher l’anim quand la souris passe sur l’élément, (pour ça je peut rajouter un :hover à ton exemple j’imagine) puis de la dérouler jusque au bout et stopper. Pas la faire défiler en boucle. C’était pas très claire dans mon premier message.

+0 -0

Il est tout à fait possible de ne jouer l’animation qu’une fois. Dans le CSS que propose Yarflam, l’instruction qui anime est la suivante : 

.anim {
    animation: anim 5s steps(10) infinite; /* 10 -> nb de frames */
}

Le infinite représente la répétition. Si tu le retires, l’animation ne sera jouée qu’une fois. Cf. les documentations de animation et de animation-iteration-count (cette dernière étant ce que représente infinite dans la propriété raccourcie animation). :)

+2 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte