Miten luoda animoitu Favicon Loader JavaScript

favicons ne ovat olennainen osa online-tuotemerkkejä, ne anna visuaalinen cue käyttäjille ja auttaa heitä erottaa sivustosi muilta. Vaikka useimmat faviconit ovat staattisia, on mahdollista luoda animoituja faviconeja yhtä hyvin.

Jatkuvasti liikkuva favicon on varmasti ärsyttävää useimmille käyttäjille ja vahingoittaa myös esteettömyyttä, mutta kun se on animoitu vain lyhyen aikaa vastauksena käyttäjän toimintaan tai taustatapahtumaan, kuten sivun lataus, se voi tarjota ylimääräisiä visuaalisia tietoja-siten parantaa käyttäjäkokemusta.

Tässä viestissä näytän, miten luodaan animoitu pyöreä kuormaaja HTML-kankaalle, ja miten voit käyttää sitä faviconina. animoitu favicon-kuormaaja on erinomainen työkalu visualisoi minkä tahansa toimenpiteen eteneminen suoritetaan sivulla, kuten tiedostojen lataaminen tai kuvankäsittely. Voit tarkastella tähän opetusohjelmaan kuuluva demo päällä GitHub yhtä hyvin.

1. Luo elementti

Ensinnäkin meidän täytyy luo kankaalle animaatio että vetää koko ympyrän, yhteensä 100 prosenttia (tämä on tärkeää, kun meidän on lisättävä kaari).

 Ladata  

Käytän kankaalle tavallista favicon-kokoa, 16 x 16 pikseliä. Voit käyttää tätä suurempaa kokoa, jos haluat, mutta huomaa, että kankaalle tulee kuva pienennetty 16: een² pikselin alue kun sitä käytetään faviconina.

2. Tarkista, onko on tuettu

Sisällä lastina() tapahtumakäsittelijä, me saada viite kankaalle [CV] käyttämällä querySelector () ja viittaa sen 2D-piirustuskonteksti-objekti [CTX] getContext () menetelmä.

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

Meidän on myös tarkistettava jos kansiota tukee UA varmistamalla, että piirustuksen kontekstiobjekti [CTX] on olemassa ja sitä ei ole määritelty. Me sijoitamme kaikki kuormitustapahtumaan kuuluva koodi tähän jos kunto.

3. Luo alkuperäiset muuttujat

Luomme kolme muuta globaalia muuttujaa, s varten kaaren alkukulma, tc varten tunnus setInterval () ajastin, ja PCT varten prosenttiosuus samasta ajastimesta. Koodi tc = pct = 0 määrittää 0: ksi alkuarvo varten tc ja PCT muuttujat.

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

Näytön arvon näyttäminen s laskettiin, selitän nopeasti, miten kaaren kulmat työ.

Kaaren kulmat

subtended kulma (kulma, joka koostuu kahdesta säteestä, jotka määrittävät kaaren) ympyrän ympärysmitta on 2π rad, missä rad on radianyksikön symboli. Tämä tekee kulma neljänneskaaren kohdalla yhtä kuin 0,5π rad.

Kun visualisoimalla latauksen edistymistä, haluamme piirroksen kankaalle yläasennosta pikemminkin kuin oletusoikeus.

Menossa myötäpäivään (oletussuunta kaari piirretään kankaalle) oikeasta asennosta, yläpiste on kolmen neljänneksen jälkeen, eli kulmassa 1,5π rad. Olen siis luonut muuttujan s = 1,5 * Math.PI myöhemmin merkitsee kaarien alkukulmaa piirretään kankaalle.

4. Tyyli ympyrä

Piirustuskontekstin objektiksi määritellään viivan leveys ja strokeStyle ympyrän ominaisuudet aiomme tehdä seuraavassa vaiheessa. strokeStyle omaisuus tarkoittaa sen väriä.

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

5. Piirrä ympyrä

Me lisää napsautustapahtuman käsittelijä Load-painikkeeseen [#lbtn] mikä käynnistää 60 millisekunnin setInterval-ajastimen, joka suorittaa piirin piirtämisestä vastaavan toiminnon [updateLoader ()] joka 60ms, kunnes ympyrä on täysin piirretty.

setInterval () menetelmä palauttaa ajastimen tunnuksen tunnistaa sen ajastin, joka on määritetty tc muuttuja.

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

6. Luo updateLoader () mukautettu toiminto

On aika luoda muokattu updateLoader () toiminto kutsutaan setInterval () menetelmä kun painiketta napsautetaan (tapahtuma käynnistyy). Haluan näyttää sinulle koodin ensin, niin voimme mennä yhdessä selityksen kanssa.

 toiminto updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); jos (pct === 100) clearInterval (tc); palata;  pct ++;  

clearRect () menetelmä tyhjentää kankaan suorakulmaisen alueen sen parametrien mukaan: vasemman yläkulman (x, y) koordinaatit. clearRect (0, 0, 16, 16) linja poistaa kaiken 16 * 16 pikselin kankaasta, jonka olemme luoneet.

beginPath () menetelmä luo uuden polun piirrokselle ja aivohalvaus () menetelmä maalaa tuoreella luotu polulla.

Vuoden lopussa updateLoader () toiminto prosenttiluku [PCT] lisätään 1: llä, ja ennen lisäystä me tarkista, onko se 100. Kun se on 100 prosenttia, setInterval () ajastin (tunnistettu ajastimen tunnuksella, tc) on poistettu avulla clearInterval () menetelmä.

Kolme ensimmäistä parametria kaari () menetelmä on (x, y) kaaren keskipisteen koordinaatit ja sen säde. Neljäs ja viides parametri edustavat aloitus- ja loppukulmat jossa kaaren piirustus alkaa ja päättyy.

Olemme jo päättäneet kuormaimen ympyrän lähtökohdan, joka on kulmassa s, ja se tulee olemaan sama kaikissa iteraatioissa.

Loppukulma kuitenkin tulee lisäys prosentteina laskettuna, voimme laskea lisäyksen koko seuraavalla tavalla. Sano 1% (arvo 1 100: sta) vastaa kulmaa α 2: staπ ympyrässä (2π = koko kehän kulma), niin sama voidaan kirjoittaa seuraavaksi yhtälöksi:

1/100 = α/ 2π

Yhtälön uudelleenjärjestely:

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

Niinpä 1% vastaa kulmaa 2π/ 100 ympyrässä. Täten loppukulma kunkin prosentin lisäyksen aikana on lasketaan kertomalla 2π/ 100 prosentteina. Sitten tulos on lisätty s (alkukulma), niin kaaret ovat vedetään samasta lähtöasennosta joka kerta. Siksi käytimme pct * 2 * Math.PI / 100 + s laskea yläkulman loppukulma edellä.

7. Lisää favicon

Let's paikka a favicon-linkkielementti HTML-koodiin osiossa joko suoraan tai JavaScriptin kautta.

Vuonna updateLoader () toiminto, ensin me hae favicon käyttämällä querySelector () ja määritä se LNK muuttuja. Sitten meidän täytyy vie kankaalle kuva joka kerta, kun kaari on piirretty koodattuun kuvaan käyttämällä toDataURL () menetelmä, ja määritä kyseinen URI-sisältö favicon-kuvaksi. Näin luodaan animoitu favicon, joka on sama kuin kankaalle.

 onload = toiminto () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); jos (!! ctx) s = 1,5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector (linkki [rel = "kuvake"] ') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuksija'; btn.addEventListener ('napsauta', toiminto () tc = setInterval (updateLoader, 60);); ; toiminto 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'); jos (pct === 100) clearTimeout (tc); palata;  pct ++;  

Voit tarkastella koko koodia Githubissa.

Bonus: Käytä kuormainta async-tapahtumiin

Kun sinun täytyy käyttää tätä kankaalle-animaatiota yhdessä lataustoiminnon kanssa määritä Web-sivulle updateLoader () toimia tapahtuman käsittelijänä edistymistä () tapauksessa.

Esimerkiksi JavaScript muuttuu näin AJAXissa:

 onload = toiminto () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); jos (!! ctx) s = 1,5 * Math.PI, lnk = document.querySelector ('linkki [rel = "kuvake"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuksija';  var xhr = uusi XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; toiminto 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');  

Vuonna kaari () metodi, korvaa prosenttiarvo [PCT] kanssa ladattu tapahtuman omaisuutta-se tarkoittaa, kuinka paljon tiedosto on ladattu ja sen sijaan 100 Käytä kaikki yhteensä ProgressEventin omaisuutta, joka tarkoittaa ladattavaa kokonaismäärää.

Siellä on ei tarvita setInterval () tällaisissa tapauksissa, kuten edistymistä () tapahtuma on automaattisesti latauksen edetessä.