Un 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.
On 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
1- Comment créer l'élément <canvas>:
D'abord, nous allons prendre comme exemple la création d'une animation de canevas qui trace un cercle complet, à 100% au total.(il est très important si nous avons besoin d'incrémenter l'arc)
<button id=lbtn>Load</button><canvas id=cvl width=16 height=16></canvas>
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.
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;
}
};
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>:
Dans le gestionnaire d'événements onload (), nous allons obtenir une référence pour l'élément canvas [cv] en utilisant la méthode querySelector (),et nous allons référer son objet de contexte de dessin 2D [ctx] via de la méthode getContext ().
onload = function() {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.
cv = document.querySelector('#cvl'),
ctx = cv.getContext('2d');
if (!!ctx) {
/* ... */
}
};
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:
source HONGKIAT: Github
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é
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.
Enregistrer un commentaire