Kuidas luua Animated Favicon Loader koos JavaScript
Favicons nad on online-brändi kujundamise oluline osa anda visuaalne kiip kasutajatele ja aidata eristage oma saiti teistelt. Kuigi enamik favikone on staatilised, on võimalik luua animeeritud favicone samuti.
Pidevalt liikuv favicon on kindlasti enamiku kasutajate jaoks tüütu ja kahjustab ka ligipääsetavust, aga kui see on lühikese aja jooksul animeeritud vastuseks kasutaja tegevusele või taustasündmusele, näiteks lehe laadimine pakkuda täiendavat visuaalset teavet-seetõttu parandada kasutajate kogemusi.
Selles postituses näitan teile, kuidas luua animeeritud ümmargune laadur HTML-lõuendil, ja kuidas seda kasutada faviconina. An animeeritud favicon laadur on suurepärane vahend visualiseerida mis tahes tegevuse edenemist lehel, näiteks failide üleslaadimine või pilditöötlus. Võite vaadata demo, mis kuulub sellesse juhendisse edasi Github samuti.
1. Looge
Esiteks peame luua lõuendi animatsioon seda tõmbab täisringi, kokku 100 protsenti (see on oluline, kui vajame kaare suurendamist).
Ma kasutan lõuendile tavapärast faviconi suurust, 16 x 16 pikslit. Saate kasutada suuremat suurust kui soovite, kuid tähele, et lõuendi kujutis on 162 pikslite pindala kui seda kasutatakse faviconina.
2. Kontrollige, kas
Sisse onload () sündmuste käitleja, me saada viide lõuendi elemendile [cv] kasutades querySelector () meetodit ja viite selle 2D joonistus kontekstiobjekt [ctx] abiga getContext () meetod.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); kui (!! ctx) / *… * /; Me peame ka kontrollima kui lõuendit toetab UA tagades, et joonistamise kontekstiobjekt [ctx] on olemas ja pole määratlemata. Me paigutame kogu koormusjuhtumile kuuluv kood sellesse kui seisund.
3. Loo algsed muutujad
Loome veel kolm globaalset muutujat, s Selle eest kaare algusnurk, tc Selle eest ID jaoks setInterval () taimer, ja % Selle eest sama taimeri protsentuaalne väärtus. Kood tc = pct = 0 määrab 0 kui Algne väärtus Selle eest tc ja % muutujad.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); kui (!! ctx) s = 1,5 * matemaatika.PI, tc = pct = 0; ; Et näidata, kuidas väärtust s arvutati, lubage mul kiiresti selgitada, kuidas kaarnurgad tööd.
Kaarnurkad
The nurga all (nurk, mis koosneb kahest kiirest, mis määratleb kaare) ringi ümbermõõt on 2π rad, kus rad on radiaaniühiku sümbol. See teeb nurgaga kaar võrdne 0,5π rad.
Millal visualiseerides laadimisprotsessi, me tahame, et lõuendil oleks ring ülemisest positsioonist mitte vaikimisi õigus.
Liikumine päripäeva (lõuendile kantakse vaikimisi suund) õigest asendist, ülemine punkt on kolmveerandit, st 1.5π rad. Seega olen loonud muutuja s = 1,5 * Math.PI hiljem tähistab kaarte algusnurka tuleb lõuendil tõmmata.
4. Stiilige ring
Joonistamise kontekstiobjekti jaoks määratleme joone laius ja strokeStyle ringi omadused me võtame järgmise sammu. The strokeStyle vara tähistab selle värvi.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); kui (!! ctx) s = 1,5 * matemaatika.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fuksia'; ; 5. Joonistage ring
Me klõpsa sündmuse käitleja nupule Load [#lbtn] mis käivitab 60 millisekundi setintervalli taimer, mis täidab ringi joonistamise eest vastutavat funktsiooni [updateLoader ()] iga 60 ms, kuni ring on täielikult joonistatud.
The setInterval () meetod tagastab taimer id et määrata taimer, mis on määratud tc muutuja.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); kui (!! ctx) s = 1,5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuksia'; btn.addEventListener ('kliki', funktsioon () tc = setInterval (updateLoader, 60);); ; 6. Loo updateLoader () kohandatud funktsioon
On aeg luua kohandatud updateLoader () funktsiooni, mis peab olema kutsus setInterval () meetod nupu klõpsamisel (sündmus käivitub). Lubage mul esmalt näidata koodi, siis saame koos selgitusega minna.
funktsioon updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); kui (pct === 100) clearInterval (tc); tagasipöördumine; pct ++;
The clearRect () meetod puhastab lõuendi ristkülikukujulise ala selle parameetrite järgi: ülemise vasaku nurga (x, y) koordinaadid. The clearRect (0, 0, 16, 16) rida kustutab kõike 16 * 16 piksliga lõuendil, mille oleme loonud.
The AlgusPath () meetod loob uue tee joonistamiseks ja insult () meetod värvid sellel äsja loodud teel.
Aasta lõpus updateLoader () funktsioon protsentuaalne arv [%] suurendatakse 1 võrra, ja enne juurdekasvu me kontrollige, kas see võrdub 100-ga. Kui see on 100 protsenti, siis setInterval () taimer (mida tähistab taimer id, tc) on kustutatud abiga clearInterval () meetod.
. \ T kaar () meetod on (x, y) kaare keskpunkti koordinaadid ja selle raadius. Neljas ja viies parameeter esindavad algus- ja lõppnurgad kus kaare joonis algab ja lõpeb.
Me otsustasime juba laaduri ringi alguspunkti, mis on nurga all s, ja see saab olema sama kõik iteratsioonid.
Lõppnurk on siiski protsendimäära suurendamisega, saame arvutada juurdekasvu suurus järgmisel viisil. Ütle 1% (väärtus 1 100-st) on samaväärne nurgaga α 2-stπ ringis (2)π = kogu ümbermõõdu nurk), siis võib sama kirjutada järgmise võrrandina:
1/100 = α/ 2π
Võrrandi ümberkorraldamisel:
α = 1 * 2π / 100 α = 2π/ 100
Niisiis, 1% vastab nurkale 2π/ 100 ringis. Seega on lõppnurk iga protsendi juurdekasvu ajal arvutatakse korrutades 2π/ 100 protsentuaalse väärtuse järgi. Siis on tulemus lisatud s (algusnurk), nii et kaared on samast lähtepositsioonist iga kord. Seetõttu kasutasime seda pct * 2 * Math.PI / 100 + s ülaltoodud koodilõigu lõppnurga arvutamiseks.
7. Lisage favicon
Teeme a favicon link element HTML-i või otse JavaScripti kaudu.
In updateLoader () funktsioon, kõigepealt me tõmba favicon kasutades querySelector () meetod ja määrake see lnk muutuja. Siis peame eksportige lõuendi pilt iga kaare tõmbamisel kodeeritud kujutisse kasutades kuniDataURL () meetod ja omistage see andme URI sisu favicon-kujutiseks. See loob animeeritud favicon, mis on sama nagu lõuendlaadur.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); kui (!! ctx) s = 1,5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('link [rel = "ikoon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuksia'; btn.addEventListener ('kliki', funktsioon () tc = setInterval (updateLoader, 60);); ; funktsioon 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'); kui (pct === 100) clearTimeout (tc); tagasipöördumine; pct ++; Võite vaadata täielikku koodi Githubis.
Boonus: kasutage laadijat async sündmuste jaoks
Kui teil on vaja kasutada seda lõuend animatsiooni koos laadimistoiminguga määrake veebisaidil updateLoader () funktsiooni sündmuste käitlejana edusammud () meetme puhul.
Näiteks muutub meie JavaScript selliseks AJAXis:
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); kui (!! ctx) s = 1,5 * Math.PI, lnk = document.querySelector ('link [rel = "ikoon"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuksia'; var xhr = uus XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; funktsioon 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'); In kaar () meetod, asendage protsentuaalne väärtus [%] koos laaditud sündmuse vara-see näitab, kui palju faili on laaditud ja selle asemel 100 kasuta kokku ProgressEventi vara, mis tähistab kogutavat summat.
Seal on pole vaja setInterval () sellistel juhtudel nagu edusammud () sündmus on automaatselt vallandatakse laadimise ajal.
