S’il vous plaît cliquez sur le lien pour regarder la feu d’artifice animation (Animation feu d’artifice).
Ce projet est une animation de feux d’artifice qui a pris plus de 8 heures de travail à créer. Pour visualiser l’animation, veuillez suivre ce lien avec un navigateur autre qu’Internet Explorer. J’apprécierais également votre soutien au concours de technologie instructables.
Voici un lien pour un jsfiddle avec des commentaires de code ajouté à presque chaque ligne de JavaScript pour permettre aux personnes orienté Javascript lire le long. Animation feu d’artifice avec des notes de commentaire.
Dans un souci de l’utilisation élevée du processeur en réponse à l’ordinateur de traitement cette page web, j’ai posé une question sur stackexchange de revue de code que vous pouvez lire ici. La réponse que j’ai reçu a proposé d’utiliser la toile ou requestAnimationFrame() ; (Javascript fonction native) pour empêcher l’utilisation de toutes les minuteries que ce script utilise actuellement. Je pense que j’apprendrai toile bientôt car les navigateurs ne sont évidemment pas construits pour être capable de traiter des animations comme ça dans le DOM (modèle d’objet de document [ article de DOM wikipedia ]) seul.
Si vous ne parlez pas couramment en JavaScript, vous pouvez comprendre comment cela fonctionne en lecture ci-dessous.
Les stars :
Lorsque la page se charge, fonction initialize() ; est appelée qui met en place tout. Il commence en mettant en place des étoiles en arrière-plan en créant une étoile avec les coordonnées x au hasard le long de la hauteur et la largeur de la fenêtre d’affichage. Il créera une étoile pour chaque pixel que la fenêtre est large.
Fenêtre d’affichage est la partie visible de la page. Largeur de la fenêtre d’affichage est la largeur de la partie visible de la page et fenêtre hauteur est la hauteur de la partie visible de la page.
Voici la longue définition de « viewport » article de wikipedia du viewport. La courte définition, c’est que la fenêtre d’affichage est le domaine de la hauteur visible de la page (multipliée par) la largeur visible de la page.
L’étoile est alors positionnée au hasard à l’intérieur de la fenêtre d’affichage.
La création de feux d’artifice :
Les feux d’artifice est créés après que les étoiles ont fini venant d’être:)
Chaque feu d’artifice est 100px au-dessous de la fenêtre d’affichage (donc vous ne pouvez pas le voir) et se voit attribuer une coordonnée x aléatoire et une couleur au hasard. Chaque feu d’artifice est également donnée à 12 rayons (ils apparaissent quand le feu d’artifice explose). En haut du document, les variables sont définies qui donnent la rotation et la position x-y de chaque rayon de feu d’artifice, par rapport à l’artifice de divertissement. Ces positions et la rotation sont assignés à chaque rayon de feu d’artifice.
Si le navigateur prend en charge filter:blur() ; un arrière-plan flou est créé pour le feu d’artifice.
Fonctions de chronométrage de feu d’artifice et de l’animation :
Après tout, les feux d’artifice est créés, la fonction fireworkTiming() ; est appelée. Cette fonction effectue une boucle sur chaque feu d’artifice et appelle la fonction imbriquée createTimer();. Cette fonction imbriquée crée une minuterie légèrement différentes pour chaque feu d’artifice et lorsque le délai expire, le feu d’artifice donné est animée entre 7/10 et 9/10ème de la hauteur de la fenêtre d’affichage. Si tous les feux d’artifice ont été animées, ils sont tous réinitialisés à leur état d’origine avec la nouvelle position et les affectations de couleur. Après le feu d’artifice est envoyé dans le « air », une fonction appelée explodeTimer() ; est appelée qui crée une minuterie qui attend le feu d’artifice à presque terminer l’animation qui se jette dans l’air se dilate les rayons de feu d’artifice et ajoute l’arrière-plan flou pour le faire apparaître comme si elle explose. Une minuterie pour 800 millisecondes et lorsque ce temps est écoulé, le feu d’artifice entier commence à faiblir.
Redimensionner la fonction :
Lorsque la fenêtre du navigateur est redimensionnée, plusieurs choses doivent se produire pour s’assurer que les feux d’artifice ou les étoiles ont toujours le comportement souhaité. Tout d’abord les variables de viewport width et height sont réinitialisés afin que tous les autres calculs abordés précédemment qui dépendent de ces variables sont exacts. Étant donné que l’événement resize est un événement récurrent et déclenche parfois des dizaines de fois lors du redimensionnement des fenêtres du navigateur et à faire la meilleure efficacité qu’au recréer tout sur chaque redimensionnement, il existe une configuration minuteur qui appellera seulement le initialize() ; millisecondes fonction 100 après le tout dernier redimensionnent événement, empêchant ainsi la surcharge complète du navigateur tente de rattraper le code sinon écrasant.
