J'aimerais avoir un caractère animé sur la page, avec différentes animations pour différents comportements. J'ai actuellement deux idées pour la façon dont cela pourrait fonctionner:
Idea 1: Demandez à chaque comportement en tant que GIF animé et utilisez JavaScript pour changer de fichiers GIF lors de la commutation de comportement. À l'envers: Les animations sont dans l'image elle-même, laissant moins de travail pour JS. Inverside: aucun moyen (que je connais) pour JavaScript pour dire quel cadre le gif est à l'heure, lorsque l'animation se termine / boucles, etc.
IDEA 2: Demandez à chaque image de chaque animation comme image PNG et utilisez JS pour basculer entre des cadres, avec un certain préchargeur pour que toutes les images soient prêtes avant le début des animations. À la hausse: beaucoup plus de contrôle sur la séquence d'animation. Inverson: Beaucoup de cadres ...
Laquelle de ces deux idées serait mieux? (Je voudrais éviter d'utiliser Flash pour cela, BTW)
Je me penche vers l'idée 2 moi-même, pour le meilleur contrôle des offres. Puisque le site a déjà une minuterie qui fonctionne tous les 50 ms, il ne serait pas grandement d'ajouter cette animation à ce système de minuterie.
4 Réponses :
IDEA 1 ne fonctionnera pas, car JavaScript n'a aucun moyen de contrôler le cadre actuel d'un gif d'animation - ni entre les navigateurs, ni l'utilisation d'une extension spécifique (ActiveX / Mozilla spécifique) que je connais.
Je pense que vous êtes laissé avec une idée 2. Je ne sais pas la manière dont les résultats sont lisses que vous pouvez obtenir avec cette méthode, cependant, vous devez tester.
D'accord - je cherchais principalement une confirmation sur il n'y avait aucun moyen de contrôler des gifs. Merci :)
Meilleur intervalle possible 10-20ms -> 50 fps n'est pas si mauvais IMHO.
@galambalazs Non, cela semble assez décent s'il est possible de l'exécuter de manière stable sur les navigateurs.
C'est-à-dire qu'une bizarrerie qui contrôle gif animation
@user intéressant. Connaissez-vous un lien?
@Pekka - JSBIN.com/fps - Il est inférieur à 20 ms, même sur IE 6, et 4 ms en chrome.
Pour l'idée 1, vous pouvez utiliser la méthode Personnellement, j'irais une idée 2; Tant que les cadres sont relativement petits, le client téléchargera toutes les images assez rapidement (un PNG 16x16px est ~ 500 octets). L'ordinateur client n'aura aucun problème à déplacer les cadres.
Une autre idée serait de mettre tous les cadres sous une image longue et d'utiliser CSS et JQuery (ou Vanilla JavaScript) pour modifier la position CSS Settimeout () pour déclencher un événement après la durée du gif de gife à boucle. Le problème avec cela, cependant, est que le GIF peut commencer à un moment différent du JavaScript.
POSITION DE L'ARRIÈRE Tous les 50 ms. Cela signifierait une image plus petite et peut-être un peu moins de codage.
Oui, une seule image avec tous les cadres différents est la meilleure approche. Cela s'appelle la source et c'est une technique bien connue.
J'ai édité mon commentaire pour supprimer le lien, car je n'ai pas vraiment vu si elle utilisait la meilleure approche. Mais d'accord, voici à nouveau :) otanistudio.com/swt/sprite_explosions
Je sais que c'est vieux mais j'aurais donné l'option 3, qui est quelque chose de similaire à l'option 2 avec une torsion.
Au lieu de charger des cadres, vous devez charger un grand spritemap avec tous les cadres et éventuellement une carte de toutes les coordonnées d'animation +. Vous auriez le sprite comme arrière-plan pour une div en utilisant la bonne dimension. Vous devriez simplement déplacer l'image d'arrière-plan dans le cadre de droite.
Vous pouvez avoir tous les événements sur une ligne différente et chaque cadres d'animation sur une colonne différente. Cela fera une grille que vous pouvez facilement contrôler.
plus
moins
Victoire instantanée. Je ne connaissais pas les spriesesheeses au moment de la question, et un autre "plus" est que je n'ai besoin que d'un événement sur pour tirer avant que l'animation puisse commencer!
J'ai récemment dû faire quelque chose de similaire (maison tournante 3D). J'ai opté pour des images individuelles car avoir un sprite de 100 images 600x400 pourraient être très gros. Chargé toutes les images avec une "nouvelle image ()" et les a ajoutés à une liste de matrices. Ensuite, je dois juste passer d'une image à un autre en utilisant un index et modifier le SRC d'un
Vous voudrez peut-être jeter un coup d'œil à freezeFrame.js . Il utilise un élément de toile pour extraire la première image d'un GIF afin de la mettre en pause.
Vous venez de répondre à votre propre question.
Je demande qui est en fait mieux, je demande si mon opinion sur laquelle est le meilleur, c'est bien ou mal, et pour quelle raison.
Voir aussi Pouvez-vous contrôler l'animation GIF avec JavaScript?