Hogyan készítsünk animált Favicon Loader-et JavaScript-el

Favicons az online márkaépítés kulcsfontosságú részét képezik vizuális cue-t ad felhasználóknak, és segítsen nekik megkülönbözteti a webhelyét másoktól. Bár a legtöbb favicon statikus, lehetséges animált faviconok létrehozása is.

A folyamatosan mozgó favicon minden bizonnyal bosszantó a legtöbb felhasználó számára, és károsítja a hozzáférhetőséget, de ha csak rövid ideig animálódik válaszul egy felhasználói akcióra vagy egy háttér eseményre, például egy oldalterhelés extra vizuális információt nyújt-ezért javítja a felhasználói élményt.

Ebben a bejegyzésben megmutatom, hogyan hozhat létre egy animált kör alakú rakodó egy HTML vászonban, és hogyan használhatja azt faviconként. egy animált favicon betöltő nagyszerű eszköz vizualizálja a műveletek előrehaladását az oldalon végrehajtott műveletek, például a fájl feltöltése vagy a képfeldolgozás. Nézd meg a a bemutatóhoz tartozó demó tovább Github is.

1. Hozza létre a elem

Először is készítsen egy vászon animációt hogy 100 százalékos teljes kört húz (ez fontos lesz, ha meg kell növelnünk az ív).

 Betöltés  

A szabványos favicon-méretet, 16 * 16 képpontot használom a vászonra. Használhat egy nagyobb méretet, ha akarja, de vegye figyelembe, hogy a vászonkép lesz a 16-ra csökkent² pixel terület ha faviconként alkalmazzák.

2. Ellenőrizze, hogy támogatott

Benne Feltöltés alatt() eseménykezelő, mi kaphat egy hivatkozást a vászon elemre [önéletrajz] használni a querySelector () metódus, és hivatkozzon 2D-s rajz kontextusobjektuma [ctx] a getContext () eljárás.

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

Ellenőrizni kell ha a vászon a UA annak biztosításával, hogy a rajz kontextus [ctx] létezik és nincs meghatározva. Elhelyezzük a terhelési eseményhez tartozó összes kód bele ha feltétel.

3. Hozza létre a kezdeti változókat

Hozzuk létre három további globális változó, s a az ív kezdőszöge, tc a azonosító a setInterval () időzítő, és pct a ugyanazon időzítő százalékos értéke. A kód tc = pct = 0 0-t rendel hozzá kezdő érték a tc és pct változók.

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

Hogy megmutassuk, hogyan értékeli az s számítottam, hadd gyorsan elmagyarázzam, hogyan ívszögek munka.

Ívszögek

A szögben (az ívet meghatározó két sugarakból álló szög) egy kör kerülete jelentése 2π rad, hol rad a radian egység szimbólum. Ez teszi szög egy negyed ívre egyenlő 0.5π rad.

Amikor vizualizálja a betöltési folyamatot, azt akarjuk, hogy a kört a körön lehessen rajzolni a felső pozícióból az alapértelmezett jog helyett.

Az óra járásával megegyező irányba (az alapértelmezett irány ív a vászonra rajzolódik) a megfelelő pozícióból, a felső pont háromnegyed után, vagyis egy szögben 1.5π rad. Ezért létrehoztam a változót s = 1,5 * Math.PI később az ívek kezdőszöge a vászonra vonható.

4. Stílus a kör

A rajz kontextus objektumhoz definiáljuk a vonalvastagság és strokeStyle a kör tulajdonságai a következő lépésben fogunk felhívni. A strokeStyle tulajdonsága a színe.

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

5. Rajzolja meg a kört

Mi kattintáses eseménykezelő hozzáadása a Betöltés gombra [#lbtn] melyik 60 milliszekundumú setInterval időzítőt indít, amely végrehajtja a kör rajzolásáért felelős funkciót [updateLoader ()] minden 60 ms-ban, amíg a kör teljesen meg nem húzódik.

A setInterval () eljárás visszaad egy időzítő azonosítót annak az időzítőnek az azonosítása, amely a tc változó.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ha (!! ctx) s = 1,5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fukszia'; btn.addEventListener ('click', függvény () tc = setInterval (updateLoader, 60);); ; 

6. Hozza létre a updateLoader () egyéni funkció

Itt az ideje a szokás létrehozására updateLoader () funkció hívta setInterval () eljárás a gomb megnyomásakor (az esemény bekapcsolódik). Hadd mutassam meg először a kódot, majd elmegyünk a magyarázattal.

 updateLoader () ctx.clearRect (0, 0, 16, 16) függvény; ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); ha (pct === 100) clearInterval (tc); Visszatérés;  pct ++;  

A clearRect () eljárás törli a vászon téglalap alakú területét paraméterei: a bal felső sarok (x, y) koordinátái. A clearRect (0, 0, 16, 16) vonal mindent töröl a létrehozott 16 * 16 képpontos vászonban.

A beginPath () eljárás új utat hoz létre a rajzhoz és a szélütés () eljárás az újonnan létrehozott úton fest.

A végén a updateLoader () funkció, a százalékos szám [pct] 1-vel növekszik, és a növekedés előtt ellenőrizze, hogy 100-nak felel meg. Amikor 100 százalék, akkor a setInterval () időzítő (az időzítő azonosítója, tc) törölve a clearInterval () eljárás.

A. \ T ív() módszer a (x, y) az ív középpontjának koordinátái és sugara. A negyedik és az ötödik paraméter a kezdő és végső szögek ahol az ív rajza kezdődik és véget ér.

Már eldöntöttük a betöltőkör kezdőpontját, amely a szögben van s, és ez lesz az azonos az összes iterációban.

A végső szög ugyanakkor lesz növekszik a százalékos számmal, kiszámíthatjuk a a növekmény mérete a következő módon. Mondjuk 1% -ot (a 100-ból 1) szögnek felel meg α 2-bőlπ egy körben (2π = az egész kerület szöge), akkor ugyanaz az alábbi egyenlet írható:

1/100 = α/ 2π

Az egyenlet átrendezése:

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

Tehát 1% a 2. szögnek felel megπ/ 100 körben. Így a végszög minden százalékos növekedéskor kiszámítása 2-es szorzással történikπ/ 100 a százalékos érték alapján. Ezután az eredmény hozzáadott s (kezdőszög), így az ívek ugyanabból a kiindulási helyzetből készült mindig. Ezért használtuk fel a pct * 2 * Math.PI / 100 + s képlet a végpont szögének kiszámításához a fenti kódrészletben.

7. Adja hozzá a favicon-ot

Helyezzünk egy favicon link elem a HTML-be szekciót közvetlenül vagy JavaScript segítségével.

Ban,-ben updateLoader () funkció, először is keresse meg a faviconot használni a querySelector () módszert, és hozzárendeljük a lnk változó. Aztán meg kell exportálja a vászonképet minden alkalommal, amikor egy ív rajzolódik kódolt képbe a toDataURL () módszer, és hozzárendelje az adat URI-tartalmat favicon-képként. Ez létrehoz egy animált faviconot, amely a ugyanaz, mint a vászonrakodó.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ha (!! ctx) s = 1,5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('link [rel = "ikon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fukszia'; btn.addEventListener ('click', függvény () tc = setInterval (updateLoader, 60);); ; updateLoader () ctx.clearRect (0, 0, 16, 16) függvény; ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png'); ha (pct === 100) clearTimeout (tc); Visszatérés;  pct ++;  

Megnézheti a teljes kódot Githubon.

Bónusz: Használja a betöltőt az aszinkron eseményekre

Ha használni kell ezt a vászon animációt egy betöltési művelettel együtt egy weblapon hozzárendelheti a updateLoader () funkció mint az eseménykezelő haladás() intézkedés esetén.

Például a JavaScript így változik AJAX-ban:

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ha (!! ctx) s = 1,5 * Math.PI, lnk = document.querySelector ('link [rel = "ikon"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fukszia';  var xhr = új XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send () eljárást; ; updateLoader (evt) ctx.clearRect (0, 0, 16, 16) függvény; ctx.beginPath (); ctx.arc (8, 8, 6, s, (evt.loaded * 2 * Math.PI / evt.total + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png');  

Ban,-ben ív() módszer, cserélje ki a százalékos értéket [pct] a ... val töltött az esemény tulajdonsága-azt jelzi, hogy a fájl mennyi betöltése történt, és helyette 100 használja a teljes a ProgressEvent tulajdonát képezi, amely a terhelendő összmennyiséget jelenti.

Van nincs szükség setInterval () ilyen esetekben, mint a haladás() esemény automatikusan kikapcsol a betöltés folyamatában.