Cum de a crea un animator Favicon Loader cu JavaScript

favicons sunt o parte crucială a branding-ului online, ei da o tactică vizuală pentru utilizatori și pentru a le ajuta distingeți site-ul dvs. de la altii. Deși cele mai multe favicoane sunt statice, este posibil să crea favicoane animate de asemenea.

Un favicon în mișcare continuă este cu siguranță enervant pentru majoritatea utilizatorilor și, de asemenea, dăunează accesibilității, totuși atunci când este doar animat pentru o perioadă scurtă de timp ca răspuns la o acțiune a utilizatorului sau la un eveniment de fundal, cum ar fi o încărcare de pagină, poate furnizați informații vizuale suplimentare-îmbunătățind astfel experiența utilizatorilor.

În acest post, vă voi arăta cum să creați un încărcător circular animat într-o panza HTML, și cum îl puteți folosi ca favicon. Un animator de încărcare favicon este un instrument minunat vizualiza progresul oricărei acțiuni efectuate pe o pagină, cum ar fi încărcarea fișierelor sau procesarea imaginilor. Puteți să vă uitați la demo aparținând acestui tutorial pe github de asemenea.

1. Creați element

În primul rând, trebuie creați o animație în panza acea atrage un cerc complet, 100 la sută în total (aceasta va fi importantă atunci când trebuie să creștem arcul).

Folosesc dimensiunea favicon standard, de 16 * 16 pixeli, pentru pânză. Puteți utiliza o dimensiune mai mare decât dacă doriți, dar rețineți că imaginea de pânză va fi redus la 16² zona pixelilor când este aplicat ca favicon.

2. Verificați dacă este suportat

În interiorul onload () manipulator de evenimente, noi obțineți o referință pentru elementul de panza [CV] folosind querySelector () metodă și se referă obiectul contextului de desen 2D [CTX] cu ajutorul getContext () metodă.

 onload = funcția () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); dacă (!! ctx) / * ... * /;

De asemenea, trebuie să verificăm dacă panza este susținută de UA asigurându-vă că obiectul context de desen [CTX] există și nu este nedefinită. Vom plasa tot codul care aparține evenimentului de încărcare în asta dacă condiție.

3. Creați variabilele inițiale

Să creăm alte trei variabile globale, s pentru unghiul de pornire al arcului, tc pentru id pentru setInterval () timer, și PCT pentru valoare procentuală a aceluiași cronometru. Codul tc = pct = 0 atribuie 0 ca valoarea initiala pentru tc și PCT variabile.

 onload = funcția () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); dacă (!! ctx) s = 1,5 * Math.PI, tc = pct = 0; ;

Pentru a arăta modul în care valoarea s a fost calculată, permiteți-mi să vă explic rapid cum unghiuri de arc muncă.

Arcuri unghiulare

unghiul subțire (unghiul compus din cele două raze care definesc un arc) a circumferinței unui cerc este 2π rad, Unde rad este simbolul unității radiante. Acest lucru face ca un unghi pentru un sfert de arc egal cu 0.5π rad.

IMAGINE: Wikipedia

Cand vizualizarea progresului de încărcare, vrem ca cercul de pe panza să fie desenat din poziția de sus mai degrabă decât dreptul implicit.

Mergând în sens orar (arc de direcție prestabilit este desenat pe pânză) din poziția corectă, punctul de sus este a ajuns după trei sferturi, adică la un unghi de 1.5π rad. Prin urmare, am creat variabila s = 1,5 * Math.PI mai târziu indica unghiul de pornire pentru arce pentru a fi tras de pe panza.

4. Stilul cercului

Pentru obiectul context de desen, definim lățimea liniei și strokeStyle proprietățile cercului vom face următoarea etapă. strokeStyle proprietatea reprezintă culoarea sa.

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

5. Desenați cercul

Noi adăugați un handler de evenimente pentru clicuri la butonul Încărcare [#lbtn] care declanșează un set de cronometruInterval de 60 de milisecunde, care execută funcția responsabilă de desenarea cercului [updateLoader ()] la fiecare 60ms până când cercul este tras în întregime.

setInterval () metodă returnează un id de cronometru pentru a identifica cronometrul care îi este atribuit tc variabil.

 onload = funcția () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); dacă (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ("clic", funcția () tc = setInterval (updateLoader, 60);); ;

6. Creați `updateLoader ()` funcție personalizată

Este timpul să creați obiceiul updateLoader () care urmează să fie numit de către setInterval () metodă când butonul este apăsat (evenimentul este declanșat). Permiteți-mi să vă arăt mai întâi codul, apoi putem să mergem împreună cu explicația.

 funcția updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); dacă (pct === 100) clearInterval (tc); întoarcere;  pct ++;

clearRect () metodă curăță zona dreptunghiulară a pânzei definită de parametrii săi: coordonatele (x, y) din colțul din stânga sus. clearRect (0, 0, 16, 16) linia șterge totul în panoul de 16 * 16 pixeli pe care l-am creat.

beginPath () metodă creează o cale nouă pentru desen, și accident vascular cerebral() metodă vopsele pe această nouă cale creată.

La sfârșitul updateLoader () funcția, procentajul [PCT] este incrementată cu 1, și înainte de creșteri noi verificați dacă este egal cu 100. Când este vorba de 100%, setInterval () timer (identificat prin id-ul cronometrului, tc) este șters cu ajutorul clearInterval () metodă.

Primii trei parametri ai arc() metoda sunt (x, y) coordonate ale centrului arcului și raza sa. Al patrulea și al cincilea parametru reprezintă începutul și sfârșitul unghiurilor la care începe și se termină desenul arcului.

Am decis deja punctul de plecare al cercului încărcătorului, care este la un unghi s, și va fi la fel în toate iterațiile.

Unghiul de capăt va fi totuși crește cu procentul de numărare, putem calcula mărimea incrementului în modul următor. Spuneți 1% (valoarea 1 din 100) este echivalentul unghiului α din 2π într-un cerc (2π = unghiul întregii circumferințe), atunci același lucru poate fi scris ca următoarea ecuație:

1/100 = α/ 2π

După rearanjarea ecuației:

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

Deci, 1% este echivalent cu unghiul 2π/ 100 într-un cerc. Astfel, unghiul de capăt în timpul fiecărei creșteri procentuale este calculat prin înmulțirea 2π/ 100 cu valoarea procentuală. Atunci rezultatul este adăugat la s (unghiul de pornire), astfel încât arcurile sunt trase din aceeași poziție de plecare de fiecare data. Acesta este motivul pentru care am folosit pct * 2 * Math.PI / 100 + s formula pentru a calcula unghiul de capăt al fragmentului de cod de mai sus.

7. Adăugați faviconul

Să punem a elementul de legătură favicon în HTML secțiune, direct sau prin intermediul JavaScript.

În updateLoader () funcția, mai întâi noi aduceți faviconul folosind querySelector () metoda, și să o atribuiți lnk variabil. Atunci trebuie să facem asta exportați imaginea panzei de fiecare dată când este tras un arc într-o imagine codificată folosind toDataURL () și atribuiți conținutul URI de date ca imagine favicon. Acest lucru creează un favicon animat, care este la fel ca și încărcătorul de panza.

 onload = funcția () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); dacă !! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ("clic", funcția () tc = setInterval (updateLoader, 60);); ; funcția 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 ("imagine / png"); dacă (pct === 100) clearTimeout (tc); întoarcere;  pct ++;

Poți să te uiți la codul complet pe Github.

Bonus: utilizați încărcătorul pentru evenimente asincronice

Când trebuie să utilizați această animație de panza în legătură cu o acțiune de încărcare într-o pagină Web, atribuiți updateLoader () funcţie ca manipulator de eveniment pentru progres () evenimentul acțiunii.

De exemplu, JavaScript-ul nostru se va schimba astfel în AJAX:

 onload = funcția () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); dacă (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('link [rel = "icon"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia';  var xhr = noua valoare XMLHttpRequest (); xhr.addEventListener ("progres", updateLoader); xhr.open ("GET", "https://xyz.com/abc"); xhr.send (); ; funcția 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 ("imagine / png");

În arc() , înlocuiți valoarea procentuală [PCT] cu încărcat proprietatea evenimentului-aceasta indică cât de mult a fost încărcat fișierul și în locul lui 100 folosește total proprietatea ProgressEvent, care indică suma totală de încărcat.

Există nu este nevoie de setInterval () în astfel de cazuri, cum ar fi progres () evenimentul este declanșat automat pe măsură ce încărcarea progresează.