Comment créer un chargeur Favicon animé avec JavaScript

Favicons sont une partie cruciale de la stratégie de marque en ligne, ils donner un indice visuel aux utilisateurs, et les aider distinguer votre site des autres. Bien que la plupart des favicons soient statiques, il est possible de créer des favicons animés ainsi que.

Un favicon constamment en mouvement est certainement agaçant pour la plupart des utilisateurs et nuit également à l’accessibilité, même s’il n’est animé que pendant une courte période. en réponse à une action de l'utilisateur ou à un événement en arrière-plan, comme un chargement de page, il peut fournir des informations visuelles supplémentaires-donc améliorer l'expérience utilisateur.

Dans ce post, je vais vous montrer comment créer un chargeur circulaire animé dans un canevas HTML, et comment vous pouvez l'utiliser comme favicon. Un chargeur de favicon animé est un excellent outil pour visualiser l'avancement de toute action effectuée sur une page, telle que le téléchargement de fichier ou le traitement d’image. Vous pouvez regarder le démo appartenant à ce tutoriel sur Github ainsi que.

1. Créez le élément

Tout d'abord, nous devons créer une animation de toile cette dessine un cercle complet, 100% au total (ce sera important quand on aura besoin d'incrémenter l'arc).

 Charge  

J'utilise la taille de favicon standard, 16 * 16 pixels, pour la toile. Vous pouvez utiliser une taille supérieure à celle désirée, mais notez que l'image de la toile sera réduit à la 16² zone de pixel quand il est appliqué comme favicon.

2. Vérifiez si est pris en charge

À l'intérieur de en charge() gestionnaire d'événements, nous obtenir une référence pour l'élément canvas [CV] en utilisant le querySelector () méthode, et se référer son objet de contexte de dessin 2D [ctx] avec l'aide du getContext () méthode.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) / *… * /; 

Nous devons aussi vérifier si la toile est supportée par le UA en s'assurant que l'objet de contexte de dessin [ctx] existe et n'est pas indéfini. Nous placerons tout le code appartenant à l'événement de chargement dans cette si état.

3. Créer les variables initiales

Créons trois autres variables globales, s pour le angle de départ de l'arc, tc pour le id pour le setInterval () minuteur, et pct pour le valeur en pourcentage de la même minuterie. Le code tc = pct = 0 assigne 0 comme valeur initiale pour le tc et pct les variables.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); si (!! ctx) s = 1,5 * Math.PI, tc = pct = 0; ; 

Montrer comment la valeur de s a été calculé, laissez-moi expliquer rapidement comment angles d'arc travail.

Angles d'arc

le angle sous-tendu (l'angle composé des deux rayons définissant un arc) de la circonférence d'un cercle est 2π rad, où rad est le symbole de l'unité radian. Cela rend le angle pour un quart d'arc égal à 0.5π rad.

Quand visualiser l'avancement du chargement, nous voulons que le cercle sur la toile soit tracé de la première position plutôt que le droit par défaut.

Aller dans le sens des aiguilles d'une montre (l'arc de direction par défaut est dessiné sur la toile) de la bonne position, le point haut est atteint après trois quarts, c'est-à-dire sous un angle de 1,5π rad. Par conséquent, j'ai créé la variable s = 1,5 * Math.PI pour plus tard indiquer l'angle de départ pour les arcs être tiré de la toile.

4. Style le cercle

Pour l’objet de contexte de dessin, nous définissons le largeur de ligne et strokeStyle propriétés du cercle nous allons dessiner dans la prochaine étape. le strokeStyle la propriété représente sa couleur.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); si (!! ctx) s = 1,5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; ; 

5. Dessine le cercle

nous ajouter un gestionnaire d'événements click sur le bouton de chargement [#lbtn] lequel déclenche un minuteur setInterval de 60 millisecondes, qui exécute la fonction chargée de tracer le cercle [updateLoader ()] toutes les 60ms jusqu'à ce que le cercle soit entièrement dessiné.

le setInterval () méthode renvoie un identifiant de minuterie d'identifier son minuteur qui est assigné à la tc variable.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('click', function () tc = setInterval (updateLoader, 60);); ; 

6. Créez le updateLoader () fonction personnalisée

Il est temps de créer la coutume updateLoader () fonction qui doit être appelé par le setInterval () méthode lorsque le bouton est cliqué (l'événement est déclenché). Laissez-moi vous montrer le code d'abord, ensuite nous pourrons aller avec l'explication.

 function updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); if (pct === 100) clearInterval (tc); revenir;  pct ++;  

le clearRect () méthode efface la zone rectangulaire de la toile défini par ses paramètres: les coordonnées (x, y) du coin supérieur gauche. le clearRect (0, 0, 16, 16) ligne efface tout dans la toile 16 * 16 pixels que nous avons créée.

le beginPath () méthode crée un nouveau chemin pour le dessin et le accident vasculaire cérébral() méthode peintures sur ce chemin nouvellement créé.

À la fin de updateLoader () la fonction, la décompte en pourcentage [pct] est incrémenté de 1, et avant l'augmentation, nous vérifier si cela équivaut à 100. Quand il est à 100 pour cent, le setInterval () minuteur (identifié par l'id du timer, tc) est effacé avec l'aide du clearInterval () méthode.

Les trois premiers paramètres de la arc() méthode sont les (x, y) coordonnées du centre de l'arc et son rayon. Les quatrième et cinquième paramètres représentent la angles de départ et d'arrivée où commence et finit le dessin de l'arc.

Nous avons déjà décidé du point de départ du cercle de chargement, situé à l’angle s, et ce sera le idem dans toutes les itérations.

L'angle final sera cependant incrémenter avec le nombre de pourcentages, on peut calculer le taille de l'incrément de la manière suivante. Disons que 1% (la valeur 1 sur 100) est équivalent à angle α sur 2π dans un cercle (2π = angle de la circonférence totale), on peut alors écrire la même chose comme suit:

1/100 = α/ 2π

En réarrangeant l'équation:

 α = 1 * 2π / 100 α = 2π/ 100 

Donc, 1% équivaut à l'angle 2π/ 100 en cercle. Ainsi, l'angle final pendant chaque incrément de pourcentage est calculé en multipliant 2π/ 100 par la valeur en pourcentage. Alors le résultat est ajouté à s (angle de départ), donc les arcs sont tiré de la même position de départ à chaque fois. C'est pourquoi nous avons utilisé le pct * 2 * Math.PI / 100 + s formule pour calculer l'angle de fin dans l'extrait de code ci-dessus.

7. Ajouter le favicon

Plaçons un élément de lien favicon dans le HTML section, directement ou via JavaScript.

dans le updateLoader () fonction, d'abord nous aller chercher la favicon en utilisant le querySelector () méthode et l'assigner à la encre variable. Ensuite, nous devons exporter l'image de la toile chaque fois qu'un arc est dessiné dans une image codée en utilisant le toDataURL () méthode, et attribuer ce contenu d'URI de données en tant qu'image favicon. Cela crée un favicon animé qui est le identique au chargeur de toile.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('link [rel = "icon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('click', function () tc = setInterval (updateLoader, 60);); ; function updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png'); if (pct === 100) clearTimeout (tc); revenir;  pct ++;  

Vous pouvez consulter le code complet sur Github.

Bonus: utilisez le chargeur pour les événements asynchrones

Quand vous devez utiliser cette animation de toile en conjonction avec une action de chargement dans une page Web, attribuez le updateLoader () une fonction en tant que gestionnaire d'événements pour le le progrès() événement de l'action.

Par exemple, notre JavaScript va changer comme ceci dans AJAX:

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('link [rel = "icon"] "); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia';  var xhr = new XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; fonction updateLoader (evt) ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (evt.loaded * 2 * Math.PI / evt.total + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png');  

dans le arc() méthode, remplacez la valeur de pourcentage [pct] avec le chargé propriété de l'événement-il indique combien du fichier a été chargé et à la place de 100 Utilisez le total propriété de ProgressEvent, qui indique le montant total à charger.

Il y a pas besoin d setInterval () dans de tels cas, comme le progrès() l'événement est automatiquement tiré au fur et à mesure du chargement.