JavaScript pour contrôler l'animation de l'image?

J'aimerais avoir un personnage animé sur la page, avec des animations différentes pour les différents comportements. Actuellement j'ai deux idées pour la façon dont il pourrait fonctionner:

IDÉE 1: demandez à chaque comportement d'un GIF animé et l'utilisation de JavaScript pour changer des fichiers GIF lors du changement de comportement. À l'envers: les Animations sont dans l'image elle-même, laissant moins de travail pour les JS. Inconvénient: Aucune façon (que je connais) pour le JavaScript pour dire ce cadre, le GIF est à, quand la fin de l'animation/les boucles, etc.

IDÉE 2: chaque image de chaque animation comme une image PNG et utiliser JS pour basculer entre les images, avec quelques preloader pour s'assurer que toutes les images sont prêts avant le début de l'animation. À l'envers: Beaucoup plus de contrôle sur la séquence d'animation. Inconvénient: Beaucoup de cadres...

Laquelle de ces deux idées seraient mieux? (Je voudrais éviter d'utiliser le Flash pour cela, btw)
Je penche vers l'idée 2-moi, pour l'amélioration du contrôle qu'il offre. Depuis le site a déjà une minuterie en marche toutes les 50ms, il ne serait pas grand-chose à ajouter cette animation pour que le système de minuterie.

Vous avez répondu à votre propre question.
Je me demande qui est en fait, mieux, je me demande si mon avis sur ce qui est mieux est de bonne ou de mauvaise, et pour quelle raison.
Voir aussi Pouvez-vous contrôler animation GIF avec du Javascript?

OriginalL'auteur Niet the Dark Absol | 2010-11-26

  1. 13

    Je sais que c'est vieux, mais je préfère donner de l'option 3, qui est quelque chose de similaire à l'option 2, avec une torsion.

    Au lieu de charger les images, vous aurez à charge un grand spritemap avec tous les cadres et, éventuellement, une carte de toutes les animations + coordonnées. Vous auriez le sprite comme arrière-plan pour un div à l'aide de la bonne dimension. Vous devez simplement déplacer l'image de fond de la fenêtre de droite.

    Vous pourriez avoir tous les événements sur une ligne différente et chaque les images de l'animation sur une autre colonne. Cela fera une grille que vous pouvez facilement contrôler.

    Plus

    • Bon contrôle sur l'animation et les cadres
    • Probablement plus rapide que le chargement ou la commutation entre les images
    • Vous n'avez pas à créer plusieurs connexions au serveur pour charger toutes les animations
    • Png vous donne une meilleure alpha résultat de gif

    Moins

    • Vous avez à gérer toutes les animations par vous-même
    Instant gagnant. Je ne connaissais pas spritesheets au moment de la question, et un autre "plus", c'est que j'ai seulement besoin d'une onload cas d'incendie avant l'animation peut commencer!
    L'Idée Cool. @Kolink laissez-nous savoir comment cela fonctionne
    J'ai récemment eu à faire quelque chose de similaire (3d en rotation interne). J'ai opté pour des images individuelles puisque le fait d'avoir un sprite de 100 images 600x400 peut être très grande. Chargé de toutes les images avec un "new Image()" et les a ajoutés à une liste de tableau. Ensuite, j'ai juste à passer d'une image à une autre à l'aide d'un index et de la modification de la src de l'un <img>

    OriginalL'auteur Loïc Faure-Lacroix

  2. 2

    Idée 1 ne fonctionne pas, que JavaScript n'a aucun moyen de contrôler l'image actuelle d'un GIF Animé - ni dans les navigateurs, ni l'utilisation de certains (ActiveX /Mozilla spécifiques) de l'extension, que je sache.

    Je pense que vous êtes de gauche avec l'Idée 2. Je ne sais pas comment lisser les résultats que vous pouvez réaliser avec cette méthode, tu aurais du test.

    Ok - j'étais surtout à la recherche de la confirmation de l'existence d'aucun moyen de contrôle des Gif. Merci 🙂
    le mieux possible l'intervalle 10-20ms -> 50 fps n'est pas mauvais à mon humble avis.
    non, cela semble assez décent si il est possible de l'exécuter de manière stable sur tous les navigateurs.
    IE a un caprice qui les contrôles d'animation GIF
    href="http://jsbin.com/fps/" >jsbin.com/fps - C'est au-dessous de 20ms même sur IE 6, et 4ms dans google Chrome.

    OriginalL'auteur Pekka 웃

  3. 2

    Pour l'idée 1, vous pouvez utiliser le setTimeOut() méthode pour déclencher un événement après le laps de temps le GIF prend en boucle. Le problème avec cela, cependant, est que le GIF peut commencer à un moment différent du javascript.

    Personnellement, j'irais pour l'idée 2; tant que les images sont de taille relativement petite, le client va télécharger toutes les images assez rapidement (une 16x16px PNG est de ~500 octets). L'ordinateur client n'auront aucun problème à déplacer les images.

    Une autre idée serait de mettre toutes les images ci-dessous les uns des autres dans une grande image, et l'utilisation de CSS et jQuery (ou à la vanille, JavaScript) pour modifier le CSS background-position propriété toutes les 50ms. Cela signifie une image plus petite et peut-être un peu moins de codage.

    Oui, une seule image avec tous les différents cadres est la meilleure approche. Il est appelé spriting et c'est une technique bien connue.
    Merci pour l'exemple 🙂
    J'ai édité mon commentaire à supprimer le lien, car je n'ai pas vraiment de voir si elles ont été à l'aide de la meilleure approche. Mais ok, ici c'est encore une fois 🙂 otanistudio.com/swt/sprite_explosions

    OriginalL'auteur Bojangles

  4. 0

    Vous voudrez peut-être jeter un oeil à freezeframe.js. Il utilise un élément canvas pour extraire la première image à partir d'un GIF pour le mettre en pause.

    OriginalL'auteur Wilfred Hughes