Un favicon constamment en mouvement est certainement ennuyeux pour la plupart des utilisateurs, et nuit également à l'accessibilité, mais quand il est seulement animé pendant une courte période en réponse à une action de l'utilisateur ou à un événement de fond , il peut fournir des informations visuelles supplémentaires . améliorer l'expérience utilisateur.
1. Créez le
élément Tout d'abord, nous devons créer une animation de toile qui dessine un cercle complet, 100 pour cent au total (ce sera important lorsque nous devons incrémenter l'arc).
Charge J'utilise la taille de favicon standard, 16 * 16 pixels, pour la toile. Vous pouvez utiliser une taille plus grande que celle-ci si vous le souhaitez, mais notez que l'image de la zone de travail sera réduite à la zone de 16 pixels 2 lorsqu'elle est appliquée en tant que favicon.
2. Vérifiez si est pris en charge Dans le gestionnaire d'événements onload(), nous obtenons une référence pour l'élément canvas [ cv ] en utilisant la méthode querySelector(), et querySelector() son objet de contexte de dessin 2D [ ctx ] à l'aide de la méthode getContext() .
onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) {/ * ... * /}}; Nous devons également vérifier si le canevas est supporté par l' UA en ctx que l'objet de contexte de dessin [ ctx ] existe et n'est pas indéfini . Nous placerons tout le code appartenant à l'événement load dans cette condition if .
3. Créez les variables initiales Créons trois autres variables globales , s pour l' angle de départ de l'arc , tc pour l' identifiant de la setInterval() , et pct pour la valeur en pourcentage du même temporisateur . Le code tc = pct = 0 affecte 0 comme valeur initiale pour les variables tc et pct .
onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) {s = 1, 5 * Math.PI, tc = pct = 0; }}; Pour montrer comment la valeur de s été calculée, laissez-moi vous expliquer rapidement comment fonctionnent les angles d'arc .
Angles d'arc L' angle sous-tendu (l'angle formé par les deux rayons qui définissent un arc) de la circonférence d'un cercle est 2π rad , où rad est le symbole de l'unité radian. Cela fait que l' angle pour un arc de quart est égal à 0, 5π rad .
visualisation de la progression du chargement , nous voulons que le cercle sur le canevas soit dessiné à partir de la position supérieure plutôt que par défaut à droite.En allant dans le sens des aiguilles d'une montre (l'arc de direction par défaut est dessiné sur la toile) à partir de la bonne position , le point haut est atteint après trois quarts , soit un angle de 1.5π rad . Par conséquent, j'ai créé la variable s = 1.5 * Math.PI pour désigner plus tard l'angle de départ pour les arcs à dessiner sur le canevas.
4. Style du cercle Pour l'objet de contexte de dessin, nous définissons les propriétés lineWidth et lineWidth du cercle que nous allons dessiner à l'étape suivante. La propriété strokeStyle représente sa couleur.
onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) {s = 1, 5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; }}; 5. Dessinez le cercle Nous ajoutons un gestionnaire d'événement click au bouton Load [ #lbtn ] qui déclenche un timer setInterval de 60 millisecondes , qui exécute la fonction responsable du dessin du cercle [ updateLoader() ] toutes les 60ms jusqu'à ce que le cercle soit entièrement dessiné.
La méthode setInterval() renvoie un identifiant de temporisateur pour identifier son temporisateur affecté à la variable tc .
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 ('clic', fonction () {tc = setInterval (updateLoader, 60);}); }}; 6. Créez la fonction personnalisée updateLoader() Il est temps de créer la fonction updateLoader() personnalisée qui doit être appelée par la méthode setInterval() lorsque le bouton est cliqué (l'événement est déclenché). Permettez-moi de vous montrer le code d'abord, puis nous pouvons 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 ++; } La méthode clearRect() efface la zone rectangulaire du canevas définie par ses paramètres: les coordonnées (x, y) du coin supérieur gauche. La ligne clearRect(0, 0, 16, 16) efface tout ce que nous avons créé sur la toile 16 * 16 pixels.
La méthode beginPath() crée un nouveau chemin pour le dessin et la méthode stroke() peint sur ce nouveau chemin .
À la fin de la fonction updateLoader(), le pourcentage count [ pct ] est incrémenté de 1 , et avant l'incrément, nous vérifions s'il est égal à 100 . Quand c'est 100 pour cent, la setInterval() (identifiée par le timer id, tc ) est effacée à l'aide de la méthode clearInterval() .
Les trois premiers paramètres de la méthode arc() sont les coordonnées (x, y) du centre de l'arc et de son rayon . Les quatrième et cinquième paramètres représentent les angles de début et de fin auxquels le dessin de l'arc commence et se termine.
Nous avons déjà décidé du point de départ du cercle loader, qui est à l'angle s, et ce sera le même dans toutes les itérations .
L'angle final augmentera cependant avec le nombre de pourcentages , nous pouvons calculer la taille de l'incrément de la manière suivante. Dire 1% (la valeur 1 sur 100) est équivalent à l'angle α sur 2π dans un cercle (2π = angle de toute la circonférence), alors la même chose peut être écrite comme l'équation suivante:
1/100 = α / 2π En réarrangeant l'équation:
α = 1 * 2π / 100 α = 2π / 100 Donc, 1% est équivalent à l'angle 2π / 100 dans un cercle. Ainsi, l'angle de fin pendant chaque incrément de pourcentage est calculé en multipliant 2π / 100 par la valeur en pourcentage . Ensuite, le résultat est ajouté à s (angle de départ) , de sorte que les arcs sont tirés à partir de la même position de départ à chaque fois. C'est pourquoi nous avons utilisé la formule pct * 2 * Math.PI / 100 + s 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 la fonction updateLoader(), nous updateLoader() abord le favicon en utilisant la méthode querySelector(), et l' lnk variable lnk . Ensuite, nous devons exporter l'image de la toile chaque fois qu'un arc est dessiné dans une image codée en utilisant la méthode toDataURL(), et affecter ce contenu de l'URI de données en tant qu'image favicon . Cela crée un favicon animé qui est le même que le 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 ('lien [rel = "icône"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('clic', fonction () {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 regarder le code complet sur Github .
Bonus: Utiliser le chargeur pour les événements asynchrones Lorsque vous devez utiliser cette animation de canevas conjointement avec une action de chargement dans une page Web, affectez la fonction updateLoader() tant que gestionnaire d'événement pour l'événement progress() 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 = "icône"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; } var xhr = new XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); } function 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 la méthode arc(), remplacez la valeur en pourcentage [ pct ] par la propriété loaded de l'événement: elle indique la quantité de fichier chargée et, à la place de 100 la propriété total de ProgressEvent , qui indique le total montant à charger.
Dans de tels cas, setInterval()pas nécessaire , car l'événement progress() est déclenché automatiquement au fur et à mesure du chargement.
hideout-lastation.com
1. Créez le 
