Kako ustvariti animirani Favicon Loader z JavaScript

Favicons so ključni del spletne blagovne znamke dajte vizualno opombo uporabnikom in jim pomagali razlikujejo vaše spletno mesto od drugih. Čeprav je večina favicons statičnih, je mogoče ustvarite animirane favikone prav tako.

Nenehno gibajoč favikon je zagotovo nadležen za večino uporabnikov, hkrati pa škoduje dostopnosti, vendar le, če je animiran le za kratek čas. kot odgovor na dejanje uporabnika ali dogodek v ozadju, na primer nalaganje strani, lahko zagotavljajo dodatne vizualne informacije-izboljšanje uporabniške izkušnje.

V tej objavi vam bom pokazal, kako ustvariti animirani krožni nakladalnik v platnu HTML, in kako ga lahko uporabite kot ikono. An animirani favicon nakladalnik je odlično orodje vizualizirati napredek vsakega ukrepa na strani, na primer nalaganje datotek ali obdelava slik. Lahko si ogledate demo, ki je del te vadnice na Github prav tako.

1. Ustvarite element

Najprej moramo ustvarite animacijo na platnu to črpa celoten krog, skupaj 100 odstotkov (to bo pomembno, ko moramo povečati lok).

Za platno uporabljam standardno velikost favikona, 16 * 16 slikovnih pik. Če želite, lahko uporabite velikost, ki je večja od tiste, vendar upoštevajte, da bo slika na platnu 16² območje pikslov ko ga uporabite kot ikono z ikonami.

2. Preverite, če podpira

V notranjosti onload () organizator dogodkov dobite referenco za element platna [cv] uporabljati querySelector () metodo in se nanašajo njegov 2D predmet risanja [ctx] s pomočjo getContext () metodo.

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

Preveriti moramo tudi če platno podpira UA s preverjanjem, ali je predmet konteksta risanja [ctx] obstaja in ni neopredeljeno. Postavili bomo vse kode, ki pripadajo dogodku nalaganja v to če stanje.

3. Ustvarite začetne spremenljivke

Ustvarimo tri globalne spremenljivke, s za začetni kot loka, tc za id za setInterval () časovnika, in pct za odstotna vrednost istega časovnika. Koda tc = pct = 0 dodeli 0 kot začetno vrednost za tc in pct spremenljivk.

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

Za prikaz vrednosti s izračunal, naj hitro pojasnim kotne loke delo.

Kotniki loka

The pod kotom (kot, sestavljen iz dveh žarkov, ki določata lok) oboda kroga je 2π rad, kje rad je simbol radianske enote. Zaradi tega je kot za četrtino loka enako 0,5π rad.

SLIKA: Wikipedija

Kdaj vizualizacijo napredovanja nalaganja, želimo, da se nariše krog na platnu z najvišjega položaja namesto privzete pravice.

Gremo v smeri urinega kazalca (privzeti lok je narisan na platnu) iz pravega položaja, zgornja točka je doseženi po treh četrtinah, t.j. pod kotom 1.5π rad. Zato sem ustvaril spremenljivko s = 1,5 * Mat.PI pozneje označuje začetni kot za loke iz platne.

4. Oblikujte krog

Za predmet konteksta risanja definiramo lineWidth in strokeStyle lastnosti kroga pripravili bomo v naslednjem koraku. The strokeStyle lastnina pomeni njeno barvo.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); če (!! ctx) s = 1,5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fuksija'; ;

5. Narišite krog

Mi dodajte upravljalnik dogodka klikanja na gumb Naloži [# lbtn] ki sproži nastavitev časovnega intervala od 60 milisekund, ki izvaja funkcijo, odgovorno za risanje kroga [updateLoader ()] vsakih 60 ms, dokler krog ni povsem narisan.

The setInterval () metodo vrne id števca za določitev časovnika, ki je dodeljen tc spremenljivko.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); če (!! ctx) s = 1,5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuksija'; btn.addEventListener ('klik', funkcija () tc = setInterval (updateLoader, 60);); ;

6. Ustvarite `updateLoader ()` funkcijo po meri

Čas je, da ustvarite po meri updateLoader () funkcijo imenujemo z setInterval () metodo ko kliknete gumb (dogodek se sproži). Najprej vam pokažem kodo, potem pa lahko podamo razlago.

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

The clearRect () metodo izbriše pravokotno območje platna določeni s svojimi parametri: koordinate (x, y) zgornjega levega kota. The clearRect (0, 0, 16, 16) vrstico izbriše vse v platnu 16 * 16 slikovnih pik, ki smo ga ustvarili.

The beginPath () metodo ustvarja novo pot za risbo in kap () metodo na novo ustvarjeni poti.

Na koncu updateLoader () funkcijo odstotek številapct] se poveča za 1, in pred prirastkom smo preverite, ali je 100. Ko je 100 odstotkov, setInterval () časovnika (identificira ga id, tc) se izbriše s pomočjo. \ t clearInterval () metodo.

Prvi trije parametri lok() metode (x, y) koordinate središča loka in njegov polmer. Četrti in peti parameter predstavljata začetni in končni kot pri kateri se risba loka začne in konča.

Odločili smo se že za začetno točko nakladalnega kroga, ki je pod kotom s, in to bo enako v vseh ponovitvah.

Končni kot pa bo povečanje z odstotnim številom, lahko izračunamo velikost prirastka na naslednji način. Recimo 1% (vrednost 1 od 100) je enako kotu α od 2π v krogu (2π = kot celotnega oboda), potem lahko isto zapišemo kot naslednjo enačbo:

1/100 = α/ 2π

Po prerazporeditvi enačbe:

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

Torej je 1% enakovreden kotu 2π/ 100 v krogu. Tako je končni kot med vsakim odstotkom prirastka izračuna z množenjem 2π/ 100 za odstotno vrednost. Potem je rezultat dodano s (začetni kot), tako so loki iz istega začetnega položaja vsakič. Zato smo uporabili pct * 2 * Math.PI / 100 + s formula za izračun končnega kota v zgornjem odseku kode.

7. Dodajte ikono za ikono

Postavimo a povezovalni element v HTML neposredno ali prek JavaScripta.

V updateLoader () funkcijo, najprej prenesi favicon uporabljati querySelector () in jo dodelite lnk spremenljivko. Potem moramo izvozite platno vsakič, ko se nariše lok v kodirano sliko z uporabo toDataURL () metodo, in. \ t dodeli vsebino URI-ja kot sliko favikona. To ustvari animirani favicon, ki je enako kot platneni nakladalnik.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); če je (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('povezava [rel = "ikona"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuksija'; btn.addEventListener ('klik', funkcija () 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); vrnitev;  pct ++;

Oglejte si celotno kodo na Githubu.

Bonus: Uporabite nalagalnik za async dogodke

Ko morate uporabiti to platno animacijo v povezavi z nalaganjem na spletni strani, dodelite updateLoader () funkcijo kot nadzornik dogodkov za napredek () dogodka.

Na primer, naš JavaScript se bo tako spremenil v AJAX:

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); če (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('link [rel = "ikona"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuksija';  var xhr = novo XMLHttpRequest (); xhr.addEventListener ('napredek', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; funkcija 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');

V lok() metodo nadomestiti odstotno vrednost [pct] z naložen nepremičnine dogodka-označuje, koliko je bila datoteka naložena in namesto 100 uporabi skupaj ProgressEvent, ki označuje skupni znesek, ki ga je treba naložiti.

Obstaja ni potrebe setInterval () v takih primerih, kot je. \ t napredek () dogodka samodejno sproži pri nalaganju.