Come creare un caricatore animato Favicon con JavaScript

favicons sono una parte cruciale del branding online, loro dare un segnale visivo agli utenti e li aiuta distinguere il tuo sito da altri. Sebbene la maggior parte delle favicon siano statiche, è possibile creare favicon animati anche.

Una favicon in costante movimento è sicuramente fastidiosa per la maggior parte degli utenti e danneggia anche l'accessibilità, tuttavia quando è animata solo per un breve periodo in risposta a un'azione dell'utente o a un evento in background, come un caricamento della pagina, può fornire ulteriori informazioni visive-quindi migliorando l'esperienza dell'utente.

In questo post, ti mostrerò come creare un caricatore circolare animato in una tela HTML, e come puoi usarlo come favicon. Un caricatore animato favicon è un ottimo strumento per visualizza il progresso di ogni azione eseguito su una pagina, come il caricamento di file o l'elaborazione delle immagini. Puoi dare un'occhiata al demo che appartiene a questo tutorial sopra Github anche.

1. Creare il elemento

Per prima cosa, dobbiamo crea un'animazione su tela quello disegna un cerchio completo, 100 percento in totale (questo sarà importante quando avremo bisogno di incrementare l'arco).

 Caricare  

Sto usando le dimensioni standard di favicon, 16 * 16 pixel, per il canvas. Puoi usare una dimensione più grande di quella, se vuoi, ma nota che l'immagine della tela sarà ridimensionato al 16² area del pixel quando è applicato come favicon.

2. Controllare se è supportato

Dentro il onload () gestore di eventi, noi ottieni un riferimento per l'elemento canvas [CV] usando il querySelector () metodo, e fare riferimento il suo oggetto contesto di disegno 2D [CTX] con l'aiuto di getContext () metodo.

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

Dobbiamo anche controllare se la tela è supportata dal UA assicurandosi che l'oggetto contesto del disegno [CTX] esiste e non è indefinito. Ci piazzeremo tutto il codice che appartiene all'evento load in questo Se condizione.

3. Creare le variabili iniziali

Creiamo altre tre variabili globali, S per il angolo iniziale dell'arco, tc per il id per il setInterval () Timer, e PCT per il valore percentuale dello stesso timer. Il codice tc = pct = 0 assegna 0 come il valore iniziale per il tc e PCT variabili.

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

Per mostrare come il valore di S è stato calcolato, lascia che ti spieghi rapidamente come angoli d'arco lavoro.

Angoli d'arco

Il angolo sotteso (l'angolo composto dai due raggi che definiscono un arco) della circonferenza di un cerchio è 2π RAD, dove RAD è il simbolo dell'unità radiante. Questo rende il angolo per un quarto di arco uguale a 0.5π RAD.

quando visualizzando il progresso del caricamento, vogliamo che il cerchio sulla tela sia disegnato dalla posizione più alta piuttosto che il diritto predefinito.

Andando in senso orario (l'arco di direzione predefinito viene disegnato sulla tela) dalla giusta posizione, il punto più alto è raggiunto dopo tre quarti, cioè ad un angolo di 1.5π RAD. Quindi, ho creato la variabile s = 1.5 * Math.PI a dopo denota l'angolo iniziale per gli archi da disegnare sulla tela.

4. Modella il cerchio

Per l'oggetto contesto di disegno, definiamo il larghezza della linea e strokeStyle proprietà del cerchio stiamo andando a disegnare nel prossimo passo. Il strokeStyle proprietà si distingue per il suo colore.

 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. Disegna il cerchio

Noi aggiungi un gestore di eventi click al pulsante Carica [#lbtn] quale attiva un timer setInterval di 60 millisecondi, che esegue la funzione responsabile del disegno del cerchio [updateLoader ()] ogni 60ms fino a quando il cerchio è completamente disegnato.

Il setInterval () metodo restituisce un id del timer per identificare il suo timer che è assegnato al tc variabile.

 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. Creare il updateLoader () funzione personalizzata

È ora di creare l'abitudine updateLoader () funzione che deve essere chiamato dal setInterval () metodo quando si fa clic sul pulsante (l'evento viene attivato). Lascia che ti mostri prima il codice, quindi possiamo seguire la spiegazione.

 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); ritorno;  pct ++;  

Il clearRect () metodo cancella l'area rettangolare della tela definito dai suoi parametri: le coordinate (x, y) dell'angolo in alto a sinistra. Il clearRect (0, 0, 16, 16) linea cancella tutto nella tela di 16 * 16 pixel che abbiamo creato.

Il BeginPath () metodo crea un nuovo percorso per il disegno e il ictus() metodo dipinge su quel percorso appena creato.

Alla fine di updateLoader () funzione, il conteggio percentuale [PCT] viene incrementato di 1, e prima dell'incremento noi controlla se è uguale a 100. Quando è al 100 percento, il setInterval () Timer (identificato dall'ID del timer, tc) è cancellato con l'aiuto di clearInterval () metodo.

I primi tre parametri del arco() metodo sono i (x, y) le coordinate del centro dell'arco e il suo raggio. Il quarto e il quinto parametro rappresentano il angoli di inizio e fine a cui inizia e finisce il disegno dell'arco.

Abbiamo già deciso il punto di partenza del cerchio del caricatore, che è all'angolo S, e sarà il lo stesso in tutte le iterazioni.

L'angolo finale comunque lo farà incrementare con il conteggio delle percentuali, possiamo calcolare il dimensione dell'incremento nel seguente modo. Dire 1% (il valore 1 su 100) è equivalente all'angolo α su 2π nel cerchio (2π = angolo dell'intera circonferenza), quindi lo stesso può essere scritto come la seguente equazione:

1/100 = α/ 2π

Nel ridisporre l'equazione:

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

Quindi, l'1% equivale all'angolo 2π/ 100 in un cerchio. Pertanto, l'angolo finale durante ogni incremento percentuale è calcolato moltiplicando 2π/ 100 dal valore percentuale. Quindi il risultato è aggiunto a S (angolo di partenza), quindi gli archi sono disegnato dalla stessa posizione di partenza ogni volta. Questo è il motivo per cui abbiamo usato il pct * 2 * Math.PI / 100 + s formula per calcolare l'angolo finale nello snippet di codice sopra.

7. Aggiungi la favicon

Mettiamo a elemento di collegamento favicon nel codice HTML sezione, direttamente o tramite JavaScript.

Nel updateLoader () funzione, prima noi prendi la favicon usando il querySelector () metodo e assegnarlo al LNK variabile. Quindi dobbiamo esportare l'immagine della tela ogni volta che viene disegnato un arco in un'immagine codificata usando il toDataURL () metodo, e assegna il contenuto dell'URI di dati come immagine favicon. Questo crea una favicon animata che è il come il caricatore di canvas.

 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 = "icona"]') ; 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); ritorno;  pct ++;  

Puoi dare un'occhiata al codice completo su Github.

Bonus: usa il caricatore per eventi asincroni

Quando hai bisogno di usare questa animazione su tela in concomitanza con un'azione di caricamento in una pagina web, assegnare il updateLoader () funzione come gestore dell'evento per il progresso() evento dell'azione.

Ad esempio, il nostro JavaScript cambierà in questo modo in 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 (); ; 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');  

Nel arco() metodo, sostituire il valore percentuale [PCT] con il caricato proprietà dell'evento-indica quanto del file è stato caricato e al posto di 100 utilizzare il totale proprietà di ProgressEvent, che indica la quantità totale da caricare.

C'è non c'è bisogno di setInterval () in questi casi, come il progresso() l'evento è automaticamente licenziato mentre il caricamento avanza.