es favicons représentent un élément essentiel pour une stratégie de marque en ligne, ils donnent
une idée générale visuelle aux clients et utilisateurs en les aident ainsi à distinguer votre site
des autres.
eme si la majorité des favicons soient statiques, il est aussi possible de créer
ceux animés.
n favicon continuellement en mouvement gene certainement la plupart des utilisateurs et défavorise
aussi l'accessibilité à une page web, cependant lorsqu'il n'est animé que pendant une brève durée
en réponse à une action faite par l'utilisateur, cela lui peut fournir un visuel plus informatif et
lui améliore aussi l'expérience.
n va prendre l'exemple d'un chargeur circulaire animé pris dans un canevas HTML pour lui donner
l'apparence d'un favicon. Pour visualiser la progression de toute action effectuée sur une page
comme le téléchargement de fichiers ou le traitement d'image, le chargeur de favicon animé se trouve
un excellent moyen
qui trace un cercle complet, à 100% au total.(il est très important si nous avons besoin d'incrémenter l'arc)
Il y a des utilisateurs qui utilisent la taille standard pour un favicon (16 * 16 pixels) en utilisant
l’élément canvas, mais vous pouvez se servir d'une taille plus grande si vous le désirez, dans ce cas
l'image du
canevas sera réduite à la surface de 162 pixels lorsqu'elle est exécutée comme un Favicon.
2- Vérification de la prise en charge de <canvas>:
onload = function() {
cv = document.querySelector('#cvl'),
ctx = cv.getContext('2d');
if (!!ctx) {
/* ... */
}
};
Nous devons aussi faire une vérification concernant la
prise en charge de canevas par l'UA;nous devons s'assurer que l'objet de contexte de dessin [
ctx]
existe et n'est pas indéfini.Le code appartenant à l'événement load doit se placer dans cette condition
if.
3- Comment créer les variables initiales?:
On va créer maintenant trois variables globales;
s pour l'angle de départ de l'arc,
tc pour l'id du minuteur
setInterval () et pct pour la valeur en pourcentage de ce même minuteur. Le code
tc = pct = 0 donne 0 comme valeur initiale pour les variables
tc et
pct.
Le code JvaScript:
onload =
function() {
cv = document.querySelector('
#cvl'),
ctx = cv.getContext('
2d');
if (!!ctx) {
s = 1.5 * Math.PI,
tc = pct = 0;
}
};
Pour savoir comment se calcule la valeur de s on va vous expliquer rapidement la fonction des angles d'arc.
Angle de l'arc
Un angle est composé de deux rayons qui définissent un arc, ce dernier appartient à une circonférence d'un cercle de 2p rad (rad est le symbole d'unité qui signifie le radian), donc l'angle qui représente un quart du cercle est égal à 0,5p rad.
On veut que le cercle sur le canevas soit dessiné à partir de la position supérieure plutôt que de la droite par défaut, lorsqu'on veut visualiser la progression du chargement.
A partir de la bonne position et dans le sens des aiguilles d'une montre, le point haut est atteint au bout de trois quarts, c'est-à-dire à un angle de 1,5p rad. Ainsi, on a créé la variable s = 1,5 * Math.PI pour désigner ultérieurement l’angle de départ des arcs à dessiner sur le canevas.
4. Stylisation du cercle:
Pour l'objet ordinaire pour contexte extraordinaire,on va définir les propriétés
lineWidth et
strokeStyle du cercle que nous allons dessiner dans l'étape suivante. A savoir que la propriété strokeStyle représente sa couleur.
Le code JavaScript:
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- Le tracé du cercle:
Nous ajoutons un gestionnaire d'événements de clic au bouton
Load [#lbtn] qui déclenche la minuterie
setInterval de 60 millisecondes, qui exécute la fonction chargée de dessiner le cercle "[
updateLoader ()] "toutes les 60ms jusqu'à ce que ce cercle soit complété.
La méthode setInterval () renvoie un ID de temporisateur pour identifier son temporisateur qui est assigné à la variable tc.
Le code JvaScript:
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éer une fonction personnalisée updateLoader ():
Maintenant il faut créer la fonction custom updateLoader () qui doit être appelée par la méthode setInterval () lorsque le bouton sera cliqué (l'événement est activé). Allons voir le code avant
de continuer l'explication.
Le code JavaScript:
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);
return;
}
pct++;
}
Alors la méthode
clearRect () efface la partie rectangulaire du canevas définie par ses paramètres:les coordonnées (x, y) du détour supérieur gauche.La ligne
clearRect (0, 0, 16, 16) efface tout dans le canevas 16 * 16 pixels que nous avons déjà créé.
La méthode
beginPath () crée
une nouvelle piste pour le dessin et la méthode stroke () peint sur cette nouvelle piste créée.
À la fin de la fonction
updateLoader (),
le nombre de pourcentages [
pct] est augmenté de
1, et avant cette augmentation, nous vérifions s'il est égal à 100.
Lorsqu'il atteint 100%, le minuteur setInterval () (identifié par l'ID du minuteur, tc) est effacé grace à 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 le rayon.Le quatrième et le cinquième paramètre représentent les angles de début et de la fin auxquels le dessin de
l'arc se débute et se termine.
Nous avons déjà décidé le point de départ du cercle de chargement, qui se trouve à l’angle s, et ce sera le même dans toutes les itérations.
Cependant l'angle final augmentera avec le nombre de pourcentages,nous pouvons donc calculer la taille de l'incrément de cette façon; Par exemple 1% (la valeur 1 sur 100) équivaut à l'angle a sur 2p dans un cercle (2p = angle de toute la circonférence), alors la même chose peut s'écrire comme ça:
1/100 = a/2p
Lors de la réorganisation de l'équation:
a = 1 * 2p / 100
a = 2p / 100
Ce qui veut dire que 1% est equivalent à l'angle 2p / 100 dans un cercle. Ainsi,l'angle d'extrémité pendant chaque augmentation de pourcentage est calculé en multipliant 2p/100 par la valeur de pourcentage. Après, le résultat est ajouté à s (angle de départ), de sorte que les arcs sont à chaque fois dessinés à partir de la même position de départ. C'est pourquoi nous avons utilisé la formule pct * 2 * Math.PI / 100 + s pour calculer l'angle de la fin dans ce bout de code ci-dessus.
7- Ajouter un favicon:
Nous allons plaçé un élément de lien favicon dans la partie HTML <head>, soit directement, soit par JavaScript.
Le code HTML:
<link rel="icon" type="image/ico" >
Dans la fonction
updateLoader (), nous reprendrons d'abord le favicon grace à la méthode
querySelector (), et nous l'affectons à la variable
lnk. Après, nous devons exporter l'image du canevas chaque fois qu'un arc est dessiné dans une
image codée et ça grace à la méthode
toDataURL (),et
attribuer ce contenu URI de données comme une image favicon. Ceci va créer un favicon animé qui est le même que le chargeur de canevas.
Le code JvaScript:
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);
return;
}
pct++;
}
Et pour voir la totalité de ce code, je vous invite de voir ce lien:
Comment utilisez le chargeur pour les événements asynchrones?
Si vous voulez utiliser cette animation de canevas en combinaison avec une action de chargement
sur une page Web, adjoignez la fonction updateLoader () comme gestionnaire d'événements pour l'événement
progress () de l'action.
Exemple, notre code JavaScript va changer comme ceci dans AJAX:
Le code JvaScript:
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();
};
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 (), vous allez remplacer la valeur de pourcentage [pct] par la propriété
loaded de l'événement - elle indique la quantité de fichier chargée, et au lieu de 100, vous devez utiliser la propriété
total de ProgressEvent, qui indique le montant total à charger.
Il n'est pas nécessaire d'utiliser setInterval () dans de tels cas, car l'événement progress () est automatiquement activé à mesure que le chargement progresse.
