Kā izveidot animētu Favicon Loader ar JavaScript

Favicons tie ir būtiska tiešsaistes zīmola veidošanas sastāvdaļa dot vizuālu lietotājiem, un palīdzēt tiem atšķirt jūsu vietni no citiem. Lai gan lielākā daļa favikonu ir statiski, ir iespējams izveidot animētus faviconus arī.

Pastāvīgi kustīgs favicon noteikti kaitina vairumam lietotāju, kā arī kaitē pieejamībai, tomēr, ja tas ir īslaicīgi animēts atbildot uz lietotāja darbību vai fona notikumu, piemēram, lapas ielāde, tā var sniegt papildu vizuālo informāciju-tādējādi uzlabojot lietotāju pieredzi.

Šajā ziņojumā es jums parādīšu, kā izveidot animēts apļveida iekrāvējs HTML audeklā, un kā to var izmantot kā favikonu. An animēts favicon iekrāvējs ir lielisks līdzeklis vizualizēt jebkuras darbības progresu veikts lapā, piemēram, failu augšupielāde vai attēlu apstrāde. Jūs varat apskatīt demo, kas pieder šai apmācībai ieslēgts Github arī.

1. Izveidojiet elementu

Pirmkārt, mums ir nepieciešams izveidot animācijas animāciju to piesaista pilnu apli, kopā 100% (tas būs svarīgi, ja nepieciešams palielināt loka vērtību).

 Slodze  

Es izmantoju standarta favicon izmēru, 16 x 16 pikseļus, audeklam. Jūs varat izmantot lielāku izmēru, ja vēlaties, bet ņemiet vērā, ka audekla attēls būs samazināts līdz 16² pikseļu apgabals kad tas tiek izmantots kā favicon.

2. Pārbaudiet, vai tiek atbalstīts

Iekšpusē onload () notikumu apstrādātājs, mēs saņemt atsauci uz audekla elementu [cv] izmantojot querySelector () metodi un norādiet tā 2D zīmēšanas konteksta objekts [ctx] ar getContext () metodi.

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

Mums ir arī jāpārbauda ja audekls tiek atbalstīts UA pārliecinoties, ka zīmēšanas konteksta objekts [ctx] pastāv un nav definēts. Mēs ievietosim visu kodu, kas pieder slodzes notikumam šajā sakarā ja stāvoklis.

3. Izveidojiet sākotnējos mainīgos

Izveidosim vēl trīs globālie mainīgie, s priekš loka sākuma leņķis, tc priekš ID par setInterval () taimeris, un proc priekš tā paša taimera procentuālā vērtība. Kods tc = pct = 0 piešķir 0 kā sākotnējā vērtība priekš tc un proc mainīgie.

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

Lai parādītu, kā s tika aprēķināts, ļaujiet man ātri izskaidrot, kā loka leņķi darbu.

Loka leņķi

The pakārtots leņķis (leņķis, kas sastāv no diviem stariem, kas definē loku) apļa apkārtmēru ir 2π rad, kur rad ir radiānvienības simbols. Tas padara leņķis ceturtdaļai vienāds ar 0,5π rad.

Kad vizualizējot iekraušanas progresu, mēs vēlamies, lai zīmējums tiktu veidots uz audekla no augšējās pozīcijas nevis noklusējuma tiesības.

Doties pulksteņrādītāja virzienā (noklusējuma virziena loks ir uzzīmēts uz audekla) no pareizā stāvokļa, augšējais punkts ir sasniegts pēc trim ceturkšņiem, t.i. 1.5π rad. Tāpēc es esmu izveidojis mainīgo s = 1,5 * Math.PI vēlāk apzīmē loku sākuma leņķi no audekla.

4. Stilu apli

Zīmēšanas konteksta objektam mēs definējam līnijas platums un strokeStyle apļa īpašības mēs izdarīsim nākamo soli. The strokeStyle īpašums ir tā krāsa.

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

5. Zīmējiet apli

Mēs pievienot klikšķa notikumu apstrādātāju uz pogas Ielādēt [#lbtn] kas aktivizē 60 milisekundes laika intervālu, kas izpilda funkciju, kas atbild par apļa zīmēšanu [updateLoader ()] ik pēc 60 ms, līdz aplis ir pilnībā izvilkts.

The setInterval () metodi atgriež taimera ID lai identificētu taimeri, kas piešķirts tc mainīgais.

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

6. Izveidojiet updateLoader () pielāgota funkcija

Ir pienācis laiks izveidot pasūtījumu updateLoader () funkcija to sauc setInterval () metodi noklikšķinot uz pogas (notikums tiek aktivizēts). Ļaujiet man vispirms parādīt kodu, tad mēs varam iet kopā ar paskaidrojumu.

 funkcija updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); ja (pct === 100) clearInterval (tc); atgriešanās;  pct ++;  

The clearRect () metodi attīra audekla taisnstūra laukumu tās parametri: augšējā kreisā stūra (x, y) koordinātas. The clearRect (0, 0, 16, 16) līnija dzēš visu mūsu izveidotajā 16 * 16 pikseļu audeklā.

The BegPath () metodi rada jaunu ceļu zīmējumam un insults () metodi krāsas uz šī jaunizveidotā ceļa.

Gada beigās updateLoader () funkcija procentuālais skaits [proc] palielina par 1, un pirms pieauguma mēs pārbaudiet, vai tas ir vienāds ar 100. Kad tas ir 100 procenti, tad setInterval () taimeris (identificēts ar taimera ID, tc) tiek dzēsts ar clearInterval () metodi.

Pirmie trīs parametri loka () metode ir (x, y) loka centra koordinātas un tā rādiuss. Ceturtais un piektais parametrs ir sākuma un beigu leņķi kad loka rasējums sākas un beidzas.

Mēs jau esam izlēmuši par iekrāvēja apļa sākumpunktu, kas atrodas leņķī s, un tas būs tas pats visās iterācijās.

Tomēr beigu leņķis būs pieaugums ar procentu skaitu, mēs varam aprēķināt pieauguma lielums šādā veidā. Saka 1% (vērtība 1 no 100) ir atbilst leņķim α no 2π lokā (2)π = visa perimetra leņķis), tad to pašu var rakstīt kā šādu vienādojumu:

1/100 = α/ 2π

Par vienādojuma pārkārtošanu:

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

Tātad 1% atbilst 2. leņķimπ/ 100 apli. Tādējādi katra leņķa pieauguma beigu leņķis ir aprēķina, reizinot 2π/ 100 pēc procentuālās vērtības. Tad rezultāts ir pievienots s (sākuma leņķis), tāpēc loki ir no tās pašas sākuma pozīcijas katru reizi. Tāpēc mēs izmantojām pct * 2 * Math.PI / 100 + s formula, lai aprēķinātu beigu leņķi iepriekš minētajā koda fragmentā.

7. Pievienojiet favicon

Liekam vietu favicon saites elements HTML sadaļā vai nu tieši, vai ar JavaScript palīdzību.

Iekš updateLoader () funkcija, vispirms mēs ielādējiet favikonu izmantojot querySelector () metodi un piešķir to lnk mainīgais. Tad mums ir nepieciešams eksportēt audekla attēlu katru reizi, kad tiek veidots loks kodētā attēlā izmantojot uzDataURL () metode, un piešķirt šo datu URI saturu kā favicon attēlu. Tas rada animētu favikonu, kas ir tas pats kā audekla iekrāvējs.

 onload = funkcija () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ja (!! ctx) s = 1,5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('saite [rel = "ikona"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuksija'; btn.addEventListener ('klikšķis', funkcija () tc = setInterval (updateLoader, 60);); ; funkcija 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'); ja (proct === 100) clearTimeout (tc); atgriešanās;  pct ++;  

Jūs varat apskatīt pilnu kodu Githubā.

Bonuss: izmantojiet iekrāvēju, lai veiktu async notikumus

Kad jums ir nepieciešams izmantot šo audekla animāciju kopā ar iekraušanas darbību Web lapā, piešķiriet updateLoader () funkciju kā notikumu apstrādātājs progress () gadījumā.

Piemēram, mūsu JavaScript mainīsies šādi AJAX:

 onload = funkcija () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ja (!! ctx) s = 1,5 * Math.PI, lnk = document.querySelector ('saite [rel = "ikona"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuksija';  var xhr = jauns XMLHttpRequest (); xhr.addEventListener ('progress', 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');  

Iekš loka () metode, nomainiet procentuālo vērtību [proc] Ar ielādēts notikuma īpašums-tas norāda, cik daudz faila ir ielādēta un vietā 100 izmantot Kopā ProgressEvent īpašums, kas norāda kopējo ielādējamo daudzumu.

Tur ir nav nepieciešams setInterval () tādos gadījumos kā progress () notikums ir automātiski tiek atlaists kā iekraušanas gaitā.