Kaip sukurti animuotą „Favicon Loader“ su „JavaScript“

Favicons jie yra esminė internetinio prekių ženklo kūrimo dalis duoti vizualinį atspalvį vartotojams ir padėti jiems atskirti savo svetainę iš kitų. Nors dauguma favikonų yra statiniai, galima sukurti animuotus faviconus taip pat.

Nuolat judanti favicon tikrai kelia daugybę problemų vartotojams, o taip pat kenkia prieinamumui, tačiau kai tik trumpai ji animuota atsakydamas į vartotojo veiksmą arba foninį įvykį, pvz., puslapio apkrova teikti papildomą vaizdinę informaciją-todėl pagerina naudotojų patirtį.

Šiame pranešime parodysiu, kaip sukurti animacinis apskritas krautuvas HTML drobėje, ir kaip galite jį naudoti kaip favicon. An animacinis favicon krautuvas yra puiki priemonė vizualizuoti bet kokių veiksmų eigą atliekami puslapyje, pvz., failų įkėlimas arba vaizdo apdorojimas. Galite pažvelgti į demo, priklausančio šiai pamokai įjungta Github taip pat.

1. Sukurkite elementas

Pirma, turime sukurti drobės animaciją kad pritraukia visą ratą, iš viso 100 proc (tai bus svarbu, kai reikės padidinti lanką).

 Įkelti  

Naudoju standartinį favicon dydį, 16 x 16 pikselių, drobei. Jei norite, galite naudoti didesnį dydį, tačiau atkreipkite dėmesį, kad drobės vaizdas bus sumažintas iki 16² pikselių plotas kai jis taikomas kaip favicon.

2. Patikrinkite, ar yra palaikomas

Viduje onload () įvykių tvarkytojas, mes gauti nuorodą į drobės elementą [cv] naudojant querySelector () metodą ir nurodykite jo 2D piešimo konteksto objektas [ctx]. \ t getContext () metodas.

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

Taip pat turime patikrinti jei drobė yra palaikoma UA užtikrindami, kad piešimo konteksto objektas [ctx] yra ir nėra neapibrėžta. Mes patalpinsime visas įkrovos įvykiui priklausantis kodas į tai jei sąlyga.

3. Sukurkite pradinius kintamuosius

Kurkime dar trys pasauliniai kintamieji, s už pradinis lanko kampas, tc už ID setInterval () laikmatis, ir proc už to paties laikmačio procentinė vertė. Kodas tc = pct = 0 priskiria 0 kaip pradinė vertė už tc ir proc kintamieji.

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

Norėdami parodyti, kaip s buvo apskaičiuotas, leiskite man greitai paaiškinti, kaip lanko kampai dirbti.

Lanko kampai

The subtilus kampas (kampas, sudarytas iš dviejų spindulių, apibrėžiančių lanką) apskritimo apskritimo yra 2π rad, kur rad yra radianinio vieneto simbolis. Tai daro ketvirčio lanko kampas lygus 0,5π rad.

Kada vizualizuojant pakrovimo pažangą, mes norime, kad apskritimas ant drobės būtų sudarytas iš viršaus o ne numatytąją teisę.

Važiuojant pagal laikrodžio rodyklę (ant drobės sudaroma numatytoji krypties lankas) iš dešinės padėties, viršutinis taškas yra pasiekė po trijų ketvirčių, t. y 1.5π rad. Todėl sukūriau kintamąjį s = 1,5 * Math.PI vėliau žymi lankų pradžios kampą būti padaryta iš drobės.

4. Stilius ratą

Piešimo konteksto objektui mes apibrėžiame linijos plotis ir strokeStyle apskritimo savybės mes ketiname daryti kitą žingsnį. The strokeStyle nuosavybė reiškia jo spalvą.

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

5. Nupieškite ratą

Mes pridėkite paspaudimo įvykio tvarkytoją į mygtuką Įkelti [#lbtn] kuris suaktyvina 60 milisekundžių laikmatį, kuri atlieka funkciją, atsakingą už rato sudarymą [updateLoader ()] kas 60ms, kol apskritimas bus pilnai nupieštas.

The setInterval () metodas grąžina laikmačio ID nustatyti savo laikmatį, priskirtą tc kintamasis.

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

6. Sukurkite updateLoader () pritaikyta funkcija

Atėjo laikas sukurti papročius updateLoader () funkcija vadinamas setInterval () metodas paspaudus mygtuką (įvykis įjungiamas). Leiskite pirmiausia parodyti jums kodą, tada galime eiti kartu su paaiškinimu.

 funkcija updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (proct * 2 * Math.PI / 100 + s)); ctx.stroke (); jei (proct === 100) clearInterval (tc); sugrįžimas;  pct ++;  

The clearRect () metodas išvalo stačiakampę drobės plotą nustatomi pagal jo parametrus: viršutinio kairiojo kampo (x, y) koordinates. The clearRect (0, 0, 16, 16) linija ištrina viską mes sukūrėme 16 * 16 pikselių vaizdą.

The BegPath () metodas sukuria naują kelią už piešinį ir smūgis () metodas dažai ant naujai sukurto kelio.

Pabaigoje updateLoader () funkcija procentinis skaičius [proc] padidėja 1, ir prieš prieaugį mes patikrinkite, ar ji lygi 100. Kai tai yra 100 proc setInterval () laikmatis (atpažįstamas pagal laikmačio ID, tc) yra išvalytas su. \ t clearInterval () metodas.

Pirmieji trys parametrai lankas () metodas yra (x, y) lanko centro koordinatės ir jo spindulys. Ketvirtasis ir penktasis parametrai yra pradžios ir pabaigos kampai kuriame lanko brėžinys prasideda ir baigiasi.

Mes jau nusprendėme, kad pradžia yra krautuvo ratas, kuris yra kampu s, ir tai bus tas pats visose iteracijose.

Tačiau galutinis kampas bus padidėjimas procentais, mes galime apskaičiuoti prieaugio dydis tokiu būdu. Pasakykite 1% (vertė 1 iš 100) lygus kampui α iš 2π ratą (2)π = viso apskritimo kampas), tada tą patį galima rašyti kaip šią lygtį:

1/100 = α/ 2π

Pertvarkant lygtį:

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

Taigi, 1% atitinka 2 kampąπ/ 100 apskritime. Taigi, kiekvieno kampo padidinimo galinis kampas yra apskaičiuojamas dauginant 2π/ 100 pagal procentinę vertę. Tada rezultatas yra pridėtas prie s (pradžios kampas), taip lankai yra iš tos pačios pradinės padėties kiekvieną kartą. Štai kodėl mes naudojome pct * 2 * Math.PI / 100 + s formulę, kad apskaičiuotumėte galinį kampą pirmiau pateiktame kodo fragmente.

7. Pridėkite favicon

Leiskite vieta a „favicon“ nuorodos elementas į HTML skyriuje, tiesiogiai arba per „JavaScript“.

Viduje konors updateLoader () funkcija, pirmiausia mes parsisiųsti favicon naudojant querySelector () metodas, ir priskirti jį lnk kintamasis. Tada mums reikia eksportuoti drobės vaizdą kiekvieną kartą, kai sudaromas lankas į koduotą vaizdą naudojant įDATAURL () metodas, ir priskirti tą duomenų URI turinį kaip „favicon“ vaizdą. Tai sukuria animuotą favicon, kuris yra tas pats kaip drobės krautuvas.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); jei (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('nuoroda [rel = "piktograma"]') ; ctx.lineWidth = 2; ctx.strokeStyle = „fuksija“; btn.addEventListener („spustelėkite“, funkcija () tc = setInterval (updateLoader, 60);); ; funkcija updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (proct * 2 * Math.PI / 100 + s)); ctx.stroke (); lnk.href = cv.toDataURL („image / png“); jei (proct === 100) clearTimeout (tc); sugrįžimas;  pct ++;  

Galite peržiūrėti visą kodą apie Github.

Premija: naudokite kroviklį asinchroniniams įvykiams

Kai reikia naudoti šią drobės animaciją kartu su pakrovimo veiksmu tinklalapyje, priskirkite updateLoader () funkcija kaip renginio tvarkytojas progresas() veiksmų atveju.

Pavyzdžiui, mūsų „JavaScript“ pasikeis taip AJAX:

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); jei (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('nuoroda [rel = "piktograma"]'); ctx.lineWidth = 2; ctx.strokeStyle = „fuksija“;  var xhr = naujas XMLHttpRequest (); xhr.addEventListener („pažanga“, „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“);  

Viduje konors lankas () metodas, pakeiskite procentinę vertę [proc] su įkeltas įvykio nuosavybė-jis nurodo, kiek failo buvo įkelta ir vietoj 100 naudoti iš viso „ProgressEvent“ nuosavybė, kuris nurodo visą įkraunamą sumą.

Yra nereikia setInterval () tokiais atvejais, kaip progresas() įvykis automatiškai atleidžiamas pakrovimo eigoje.