Kako stvoriti animirani Favicon Loader s JavaScript
favicons su ključni dio online brendiranja, oni dati vizualni znak korisnicima i pomoći im razlikujete web-lokaciju od drugih. Iako je većina favorita statična, moguće je stvoriti animirane favikone također.
Stalno pokretni favikon je zasigurno neugodan za većinu korisnika, a šteti i pristupačnosti, ali kada je animiran samo kratko vrijeme kao odgovor na radnju korisnika ili događaj u pozadini, kao što je učitavanje stranice, može pružiti dodatne vizualne informacije-stoga poboljšava korisničko iskustvo.
U ovom postu pokazat ću vam kako stvoriti animirani kružni utovarivač u HTML platnu, i kako ga možete koristiti kao favicon. animirani favicon punjač je izvrstan alat vizualizirati napredak svake akcije na stranici, kao što je prijenos datoteka ili obrada slike. Možete pogledati demo koji pripada ovom priručniku na Github također.
1. Stvorite
Prvo, moramo stvorite animaciju na platnu da crta puni krug, ukupno 100 posto (ovo će biti važno kada moramo povećati luk).
Koristim standardnu veličinu favikona, 16 * 16 piksela, za platno. Možete koristiti veću veličinu ako želite, ali imajte na umu da će slika na platnu biti do 162 područje piksela kada se primjenjuje kao favicon.
2. Provjerite je li
Unutar oznake onload () događaj, mi dobiti referencu za element platna [cv] koristiti querySelector () metodom i uputite se njegov 2D objekt konteksta crtanja [ctx] uz pomoć getContext () način.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (! ctx) / *… * /; Također moramo provjeriti ako je platno podržano od UA osiguravanjem da objekt konteksta za crtanje [ctx] postoji i nije nedefinirano. Smjestit ćemo sav kôd koji pripada događaju učitavanja u ovo ako stanje.
3. Stvorite početne varijable
Kreiramo još tri globalne varijable, a za polazni kut luka, tc za id za setInterval () brojač, i PCT za postotna vrijednost istog tajmera. Kod tc = pct = 0 dodjeljuje 0 kao početna vrijednost za tc i PCT varijable.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ako je (! ctx) s = 1.5 * Math.PI, tc = pct = 0; ; Pokazati kako vrijednost a izračunati, brzo ću objasniti kako kutovi luka raditi.
Kutovi luka
podcrtani kut (kut sastavljen od dva zraka koji definiraju luk) opsega kruga je 2π Rad, gdje Rad simbol radijanske jedinice. To čini kut za četvrtinu luka jednak 0.5π Rad.
Kada vizualiziranje napretka učitavanja, želimo izvući krug na platnu s gornje pozicije umjesto zadanog prava.
Idemo u smjeru kazaljke na satu (zadani luk smjera je nacrtan na platnu) s pravog položaja, gornja točka je nakon tri četvrtine, tj. pod kutom od 1.5π Rad. Stoga sam stvorio varijablu s = 1,5 * Mat.PI do kasnije označavaju početni kut za lukove izvući iz platna.
4. Napravite krug
Za objekt konteksta crtanja definiramo širina linije i strokeStyle svojstva kruga nacrtat ćemo u sljedećem koraku. strokeStyle nekretnina označava njezinu boju.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ako je (! ctx) s = 1.5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fuksija'; ; 5. Nacrtajte krug
Mi dodajte rukovatelj događajima klikanja na gumb Učitaj []#lbtn] koji aktivira setInterval timer od 60 milisekundi, koja izvršava funkciju odgovornu za crtanje kruga [updateLoader ()] svakih 60ms dok se krug ne povuče.
setInterval () način vraća id brojača vremena da biste identificirali tajmer koji je dodijeljen tc varijabla.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ako (!! 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. Stvorite updateLoader () prilagođena funkcija
Vrijeme je za stvaranje običaja updateLoader () funkcija koja će biti koje je pozvao setInterval () način kada se klikne na gumb (događaj se aktivira). Prvo ću vam pokazati šifru, a onda možemo ići uz objašnjenje.
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); povratak; pct ++;
clearRect () način briše pravokutno područje platna definirani njegovim parametrima: (x, y) koordinate gornjeg lijevog kuta. clearRect (0, 0, 16, 16) crta briše sve u platnu od 16 * 16 piksela koje smo stvorili.
beginPath () način stvara novi put za crtež, i udar () način boje na novostvorenoj stazi.
Na kraju updateLoader () funkcija postotni broj [PCT] se povećava za 1, i prije prirasta mi provjerite je li jednak 100. Kada je 100%, setInterval () brojač (identificiran id-timer, tc) se briše uz pomoć clearInterval () način.
Prva tri parametra luk() metode su (x, y) koordinate središta luka i njegov radijus. Četvrti i peti parametar predstavljaju početni i krajnji kut kod kojih crtež luka počinje i završava.
Već smo odredili početnu točku kruga utovarivača, koji je pod kutom a, i to će biti isto u svim iteracijama.
Međutim, krajnji kut će biti s postotkom računanja, možemo izračunati veličina inkrementa na sljedeći način. Recimo 1% (vrijednost 1 od 100) je ekvivalentno kutu α od 2π u krugu (2π = kut cijelog opsega), tada se isto može napisati kao sljedeća jednadžba:
1/100 = α/ 2π
O preraspodjeli jednadžbe:
α = 1 * 2π / 100 α = 2π/ 100
Dakle, 1% je ekvivalentno kutu 2π/ 100 u krugu. Dakle, krajnji kut za svaki postotni prirast je izračunava množenjem 2π/ 100 po postotnoj vrijednosti. Tada je rezultat dodano a (početni kut), tako da su lukovi iz istog startnog položaja svaki put. Zato smo koristili pct * 2 * Mat.PI / 100 + s formula za izračunavanje krajnjeg kuta u gornjem isječku koda.
7. Dodajte ikonu favikona
Stavimo a favicon link element u HTML izravno ili putem JavaScripta.
U updateLoader () funkcija, prvo mi dohvatite favicon koristiti querySelector () i dodijelite ga vez promjenjiva. Onda moramo izvoz slike na platnu svaki put kad se povuče luk u kodiranu sliku pomoću toDataURL () metoda, i dodijelite taj URI sadržaj podataka kao sliku favikona. To stvara animirani favicon koji je isti kao i platneni loader.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ako je (! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('link [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'); ako (pct === 100) clearTimeout (tc); povratak; pct ++; Možete pogledati cijeli kôd na Githubu.
Bonus: Koristite loader za async događaje
Kada trebate koristiti ovu animaciju na platnu u sprezi s akcijom punjenja na web-stranici, dodijelite updateLoader () funkcija kao rukovatelj događajima za napredak() događaja.
Na primjer, naš JavaScript će se ovako promijeniti u AJAX-u:
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ako (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('link [rel = "ikona"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuksija'; var xhr = novo XMLHttpRequest (); xhr.addEventListener ('napredak', 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'); U luk() metoda, zamijeniti postotnu vrijednost [PCT] s opterećen imovine događaja-označava koliko je datoteka učitano i umjesto 100 koristiti ukupno imovine ProgressEventa, koja označava ukupni iznos koji se učitava.
tu je nema potrebe za setInterval () u takvim slučajevima, kao napredak() događaj je automatski ispaljen tijekom učitavanja.
