Ako vytvoriť animovaný Favicon Loader s JavaScriptom
favicons sú dôležitou súčasťou online značky, oni dať vizuálne znamenie používateľom a pomôcť im rozlišovať vaše stránky od ostatných. Hoci väčšina favikónov je statická, je možné vytvoriť animované favicóny tiež.
Neustále sa pohybujúci favikón je pre väčšinu užívateľov určite nepríjemný a tiež zhoršuje prístupnosť, ak je však iba krátky čas animovaný v reakcii na akciu používateľa alebo udalosť na pozadí, ako je napríklad zaťaženie stránky, môže to poskytnúť dodatočné vizuálne informácie-a tým zlepšuje používateľskú skúsenosť.
V tomto príspevku vám ukážem, ako vytvoriť animovaný kruhový nakladač v HTML plátne, a ako ju môžete použiť ako favicon. animovaný nakladač favikónov je skvelý nástroj vizualizovať priebeh akéhokoľvek konania vykonávané na stránke, ako je nahrávanie súborov alebo spracovanie obrázkov. Môžete sa pozrieť na demo patriace do tohto tutoriálu na Github tiež.
1. Vytvorte
Po prvé, musíme to urobiť vytvorte animáciu plátna že čerpá celý kruh, celkom 100 percent (to bude dôležité, keď potrebujeme zvýšiť oblúk).
Pri plátne používam štandardnú veľkosť favídu, 16 * 16 pixelov. Ak chcete, môžete použiť veľkosť väčšiu, než chcete, ale uvedomte si, že obrázok bude na plátne zmenšená na 162 pixelov keď sa použije ako favikón.
2. Skontrolujte, či
Vnútri onload () obsluha udalosti, my získajte referenciu pre prvok plátna [životopis] použitím querySelector () metódu a odkazujte jeho objekt kontextu 2D výkresu [CTX] s pomocou getContext () metóda.
onload = funkcia () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ak (! ctx) / * ... * /; Musíme tiež skontrolovať ak plátno podporuje UA že objekt kontextu výkresu [CTX] existuje a nie je nedefinovaná. Umiestnime celý kód patriaci do udalosti zaťaženia do toho ak podmienka.
3. Vytvorte počiatočné premenné
Vytvorme ďalšie tri globálne premenné, s pre počiatočný uhol oblúka, tc pre id pre setInterval () časomerač, a pct pre percentuálna hodnota toho istého časovača. Kód tc = pct = 0 priradí 0 ako pôvodná hodnota pre tc a pct premenné.
onload = funkcia () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ak (!! ctx) s = 1,5 * Math.PI, tc = pct = 0; ; Ak chcete zobraziť hodnotu hodnoty s bolo vypočítané, dovoľte mi rýchlo vysvetliť, ako uhly oblúka práca.
Oblúkové uhly
predbežný uhol (uhol zložený z dvoch lúčov, ktoré definujú oblúk) obvodu kruhu je 2π rád, kde rád je symbol radiánovej jednotky. Toto robí uhol za štvrťrok rovná 0,5π rád.
Kedy vizualizácia postupu načítania, chceme, aby bol kruh na plátne nakreslený z hornej pozície namiesto predvoleného práva.
Chod v smere hodinových ručičiek (predvolený smer oblúka je nakreslený na plátne) zo správnej polohy, horný bod je dosiahol po troch štvrťrokoch, t. j. pod uhlom 1.5π rád. Preto som vytvoril premennú s = 1,5 * Math.PI neskôr označte začiatočný uhol pre oblúky ktoré sa majú kresliť na plátne.
4. Štýl kruhu
Pre objekt kontextu výkresu definujeme šírka čiary a strokeStyle vlastnosti kruhu budeme robiť ďalší krok. strokeStyle vlastnosť znamená jeho farbu.
onload = funkcia () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ak (!! ctx) s = 1,5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; ; 5. Nakreslite kruh
my pridanie obsluhy udalosti kliknutí na tlačidlo Načítať [#lbtn], ktoré spúšťa nastavenie časového intervalu 60 milisekúnd, ktorý vykonáva funkciu zodpovednú za kreslenie kruhu [updateLoader ()] každých 60 ms až kružnica je úplne vytiahnutá.
setInterval () metóda vráti ID časovača určiť jeho časovač, ktorý je pridelený tc premenlivý.
onload = funkcia () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ak (! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('klik', funkcia () tc = setInterval (updateLoader, 60);); ; 6. Vytvorte updateLoader () vlastnú funkciu
Je čas vytvoriť vlastné updateLoader () ktorá má byť zavolal setInterval () metóda po kliknutí na tlačidlo (udalosť sa spustí). Dovoľte mi, aby som vám najprv ukázal kód, potom môžeme s vysvetlením vysvetliť.
funkcia updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); ak (pct === 100) clearInterval (tc); return; pct ++;
clearRect () metóda vymaže obdĺžnikovú oblasť plátna definované jej parametrami: súradnice (x, y) v ľavom hornom rohu. clearRect (0, 0, 16, 16) riadok vymaže všetko v 16 * 16 pixeloch, ktoré sme vytvorili.
beginPath () metóda vytvára novú cestu pre kreslenie a mŕtvica() metóda farby na tejto novo vytvorenej ceste.
Na konci updateLoader () funkcia, percentuálny počet [pct] sa zvyšuje o 1, a pred prírastkom sme skontrolujte, či sa rovná 100. Keď je to 100 percent, setInterval () časomerač (označené ID časovača, tc) je vymazaná s pomocou clearInterval () metóda.
Prvé tri parametre arc () sú metódy (x, y) súradníc stredu oblúka a jeho polomeru. Štvrtý a piaty parametre predstavujú začiatok a koniec uhlov pri ktorom začína a končí výkres oblúka.
Už sme sa rozhodli pre začiatok kruhu nakladača, ktorý je v uhle s, a bude to rovnaké vo všetkých opakovaniach.
Koncový uhol však bude prírastok s percentuálnym počtom, môžeme vypočítať veľkosť prírastku nasledujúcim spôsobom. Povedzte 1% (hodnota 1 zo 100) ekvivalentný uhlu α z 2π v kruhu (2π = uhol celého obvodu), potom to isté platí ako nasledujúca rovnica:
1/100 = α/ 2π
Po preusporiadaní rovnice:
α = 1 * 2π / 100 α = 2π/ 100
Takže 1% zodpovedá uhle 2π/ 100 v kruhu. Preto je koncový uhol počas každého percentuálneho prírastku vypočítané vynásobením 2π/ 100 percentuálnou hodnotou. Výsledok je potom pridané do s (štartovací uhol), takže sú oblúky vytiahnuté z rovnakej východiskovej pozície vždy. Preto sme použili pct * 2 * Math.PI / 100 + s vzorec na výpočet koncového uhla v úryvku kódu vyššie.
7. Pridajte favicon
Postavme a prvok favicon link do HTML priamo alebo prostredníctvom jazyka JavaScript.
V updateLoader () funkcia, najprv my vyzdvihnúť favicon pomocou querySelector () metódu a priraďte ju lnk variabilné. Potom musíme exportovať obrázok plátna vždy pri oblúku do zakódovaného obrazu pomocou toDataURL () metóda a priradiť tento obsah URI údajov ako obrázok favikónu. Tým sa vytvorí animovaný favikón, ktorý je rovnaké ako plátno nakladač.
onload = funkcia () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ak (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('klik', funkcia () tc = setInterval (updateLoader, 60);); ; funkcia 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 ("obrázok / png"); ak (pct === 100) clearTimeout (tc); return; pct ++; Môžete sa pozrieť na celý kód na Github.
Bonus: Použite nakladač na udalosti async
Keď potrebujete túto animáciu plátno v spojení s činnosťou nakladania na webovej stránke priraďte updateLoader () funkcie ako obslužný program udalostí pre pokroku () akcie.
Napríklad náš JavaScript sa bude takto meniť v AJAX:
onload = funkcia () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ak (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('odkaz [rel = "ikona"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; var xhr = nová XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); xhr.open ("GET", "https://xyz.com/abc"); xhr.send (); ; funkcia 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 ("obrázok / png"); V arc () metóda, nahraďte percentuálnu hodnotu [pct] s naložený majetok udalosti-označuje, koľko súboru bolo načítané a miesto 100 Použi totálnej majetok ProgressEvent, ktorá označuje celkovú čiastku, ktorá sa má načítať.
je tu nie je potrebné setInterval () v takýchto prípadoch ako pokroku () udalosť je automaticky vypálené ako postupuje zaťaženie.
