Share
HTML est le langage dans lequel le Web est construit et c'est une sorte de bête étrange. Bien que conçu à l'origine comme un moyen de partager facilement des informations académiques sur Internet, il s'est lentement transformé pour s'adapter à l'environnement riche en médias que nous connaissons et aimons. En raison de la nature aléatoire du HTML (et de JavaScript, le langage de programmation qui manipule des éléments en HTML et les rend interactifs), nous devons parfois sortir des sentiers battus. Dans cette série de didacticiels, je vais vous montrer comment effectuer une animation multi-navigateur à l'aide d'une méthode appelée sprite. Et comme il s’agit d’une opportunité d’apprentissage, nous allons le faire sans aucune bibliothèque externe (comme jQuery).
Ce sera une série en quatre parties. J'expliquerai le spriting lui-même dans la première partie (cet article) avec du JavaScript de base, mais nous aborderons ensuite des techniques intermédiaires telles que l'encapsulation, la gestion d'événements et le support d'écran tactile..
Alors, commençons!
L'animation est basée sur un phénomène appelé persistance de la vision, qui dit en gros que si votre cerveau voit assez d'images fixes similaires assez rapidement, il apparaîtra alors comme s'il s'agissait d'une seule image en mouvement. Chaque type de film ou de vidéo utilise cette technique de base: de nombreuses images légèrement différentes sont affichées en succession rapide pour donner l'impression que quelque chose bouge. Les films tournent généralement à 24 images par seconde (₁), tandis que la télévision hertzienne en Amérique du Nord est représentée à 29,97 images par seconde (₂). Donc, en d’autres termes, nous voulons créer quelque chose qui affiche des images similaires très rapidement (plusieurs fois par seconde).
L’animation est difficile à utiliser sur le Web pour deux raisons principales:
Une solution à ces problèmes consiste à créer une feuille de sprite. Dans des éléments comme divs, nous pouvons définir une image de fond pour la div cela peut être plus grand que l'élément lui-même. Nous pouvons également définir la position de l’arrière-plan afin de déterminer exactement quelle partie de la plus grande image sera affichée. Une feuille de sprite est une image plus grande composée de plusieurs images plus petites que nous pouvons déplacer pour pouvoir prendre la place de nombreuses petites images. Jetez un coup d'œil à l'exemple ci-dessous, en utilisant J, la mascotte de ma société Joust Multimedia:
Bien qu'il existe dix images différentes de J, elles sont placées ensemble dans un fichier PNG plus volumineux (nous utilisons des fichiers PNG car ils peuvent afficher une transparence). Si nous avons un div il ne s'agit que de la taille d'une des images, et nous définissons ce PNG comme arrière-plan, il ressemblera à une seule image.
Voir le hazdm sur CodePen.
Bien que cela semble être une tâche ardue pour montrer une image, cette méthode résout bien les deux problèmes que nous avions auparavant. Avec très peu de JavaScript (une ligne!), Vous pouvez modifier la position d’arrière-plan d’un div, et ça marche sur tout. De plus, étant donné que toutes ces images sont sur la même image, une seule demande suffit pour charger cette image dans la page. Ainsi, une fois la page chargée, elle peut basculer sans problème entre les images-objets..
Alors, comment pouvons-nous configurer cela pour animer facilement alors? La première étape consiste à créer la feuille de sprite. Vous voudrez connaître les dimensions finales de votre image et espacer les sprites dans une grille. Par exemple, mon image J va avoir 40 pixels de large sur 50 pixels de haut, donc j'ai aligné mes images-objets exactement à 40 pixels de distance horizontalement et exactement à 50 pixels de haut verticalement. Ce sera probablement plus facile si vous définissez votre sprite de départ dans le coin supérieur gauche..
Ensuite, nous allons mettre en place un div avec un peu de CSS pour s’assurer que tout s’affiche correctement:
Et voici notre CSS pour nous assurer que le sprite s'affiche correctement:
Accentsconagua
.character / * * Il est très important de régler la hauteur et la largeur de * nos caractères sur la hauteur et la largeur des images-objets * / height: 50px; largeur: 40px; / * * Nous devons les positionner absolument afin de pouvoir * contrôler totalement leur position dans la scène * / position: absolute; à gauche: 100px; en haut: 120 px; #j / * * Et maintenant, nous définissons l'image de fond du caractère div * comme étant le premier sprite (dans le coin supérieur gauche) * / background-image: url ('j.png'); répétition de fond: non répétée; position de fond: 0 0; Notez les choses suivantes:
div à la taille de notre sprite'non-répétition' '0 0'-cela montrera le sprite dans le coin en haut à gaucheMaintenant, il suffira d’une seule ligne de JavaScript pour changer la position de l’arrière-plan et afficher le prochain sprite..
document.getElementById ('j'). style.backgroundPosition = '-40px 0px'; Ici, nous sélectionnons l’élément (avec id = 'j') et définir l'attribut style 'backgroundPosition'. Notez qu'il est orthographié 'backgroundPosition' en JavaScript, et pas comme 'position d'arrière-plan' en CSS. Notez également qu'en JavaScript, le 'px' est requis pour les montants x et y, nous ne pouvons pas simplement lui passer des chiffres. Et comme nous déplaçons l'image de fond, nous devons le faire dans le sens opposé à celui auquel vous pourriez vous attendre. Pour déplacer l'image-objet à droite, il faut que l'image se déplace de 40 pixels vers la gauche..
Maintenant, si nous avons juste quelque chose de simple pour exécuter ce code (comme un bouton), nous pouvons voir les cadres changer en action: checkout the DIsgk sur Codepen.
En outre, vous pouvez également consulter le code source de cette page. Il contient tous les exemples avec des commentaires approfondis. Et voici la feuille de sprite que j'utilise.
Ce que nous avons couvert dans ce tutoriel est un bon début, mais ce n’est pas vraiment une bonne animation. Dans la deuxième partie de cette série, nous animerons des courses et des sauts en créant des boucles avec les différents sprites..
Dans la quatrième partie, nous allons créer des passages de souris pour un peu d’action robotique. Voir le ByGtv Codepen pour un aperçu.
Bien que cela puisse être une excellente méthode pour animer sur le Web, il existe quelques inconvénients. Tout d’abord, vous devrez peut-être créer chaque image individuelle de l’animation, ce qui peut prendre beaucoup de temps. Deuxièmement, les navigateurs n’ont pas la minuterie la plus précise pour l’animation. Par conséquent, s’il est essentiel que votre animation soit parfaitement synchronisée, cela risque de ne pas fonctionner. Enfin, Safari mobile (utilisé sur les iPhones et les iPads) présente une «fonctionnalité»: si vous avez une image d’arrière-plan supérieure à 2 Mo ou supérieure à 1024 x 1024 x 3 pixels (ou 3 145 728 pixels au total), elle redimensionne automatiquement la l'image, ruinant l'effet de spriting. Cela signifie que les images-objets très volumineuses, ou les animations avec un très grand nombre d'images-objets, sont hors de question. Mais, pour les petites animations simples que vous voulez être très interactif, c'est un moyen facile et génial d'obtenir quelque chose qui fonctionne partout.
1. Avant l'introduction du son avec le film, il n'y avait pas vraiment de fréquence d'images standard. Les appareils photo étaient actionnés à l'aide d'une manivelle. Par conséquent, si vous avez un caméraman débutant, la cadence de prise de vue peut ralentir et accélérer involontairement. De même, les théâtres moins réputés étaient réputés pour avoir dit à leurs projectionnistes de lancer le projecteur plus rapidement afin d'accélérer le spectacle afin qu'ils puissent participer à davantage de projections. C’est aussi la raison pour laquelle nous pensons de manière stéréotypée que les films pré-sonores se déplacent de manière comique-rapide: la plupart tournaient autour de 16 à 18 ips. Ainsi, lorsque nous les lisons aujourd’hui à 24 images par seconde, ils se déplacent plus vite que prévu.
2. La télévision était initialement diffusée à 30 images par seconde en Amérique du Nord, mais la télévision couleur causait un problème lorsqu'elle était diffusée à cette vitesse. Les ingénieurs ont compris qu’ils pourraient résoudre le problème en ralentissant la cadence de 0,1%, ce qui explique pourquoi il est maintenant réglé à 29,97 i / s. En outre, outre tous les problèmes techniques délirants liés à la conversion d'un film en 24 ips pour l'afficher à la télévision à 29,97 ips, la diffusion de la télévision à une vitesse plus rapide a eu un effet intéressant sur le public. De nombreuses personnes qui ont visionné les séances de test de «The Hobbit» à 48 ips ont déclaré que la fréquence d'images accrue rendait le film «moins cher», même s'il était d'une qualité bien supérieure à celle d'un film classique, simplement parce qu'elles associaient désormais des fréquences d'images plus rapides. avec regarder quelque chose à la télévision.
