Jak vytvořit animovaný Favicon Loader s JavaScriptem
Favicons jsou klíčovou součástí online brandingu vizuální podnět uživatelům odlišit vaše stránky od ostatních. Ačkoli většina favicons je statický, to je možné vytvořit animované favicons také.
Neustále se pohybující favicon je jistě nepříjemný pro většinu uživatelů, a také poškozuje přístupnost, ale když je to jen animované na krátkou dobu v reakci na akci uživatele nebo událost pozadí, například načítání stránky, může poskytovat dodatečné vizuální informace-zlepšování uživatelských zkušeností.
V tomto příspěvku vám ukážu, jak vytvořit animovaný kruhový zavaděč na plátně HTML, a jak ji můžete použít jako favicon. An animovaný favicon zavaděč je skvělý nástroj vizualizovat postup jakékoli akce na stránce, například nahrávání souborů nebo zpracování obrazu. Můžete se podívat na demo patřící k tomuto tutoriálu na Github také.
1. Vytvořte
Za prvé, musíme vytvořit animaci plátna že kreslí celý kruh, celkem 100 procent (to bude důležité, když budeme muset oblouk zvýšit).
Pro plátno používám standardní velikost favicon, 16 x 16 pixelů. Můžete použít velikost větší, než chcete, ale všimněte si, že obraz na plátně bude zmenšen na 162 oblasti pixelů když je aplikován jako favicon.
2. Zkontrolujte, zda
Uvnitř onload () obsluha události, my získat odkaz na prvek plátno [životopis] za použití querySelector () a odkazují objekt 2D výkresového kontextu [ctx] pomocí getContext () metoda.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); pokud (!! ctx) / *… * /; Musíme také zkontrolovat pokud je plátno podporováno UA ujistěte se, že objekt kontextu výkresu [ctx] existuje a není nedefinováno. Místo všechny kódy patřící k události načítání do toho -li stav.
3. Vytvořte počáteční proměnné
Vytvořme další tři globální proměnné, s pro počáteční úhel oblouku, tc pro id pro setInterval () časovač, a pct pro procentuální hodnoty stejného časovače. Kód tc = pct = 0 přiřadí 0 jako počáteční hodnota pro tc a pct proměnných.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); pokud (!! ctx) s = 1,5 * Math.PI, tc = pct = 0; ; Chcete-li ukázat, jak hodnota s bylo vypočteno, dovolte mi rychle vysvětlit, jak úhlů oblouku práce.
Úhly oblouku
úhlu (úhel složený ze dvou paprsků, které definují oblouk) obvodu kruhu je 2π rad, kde rad je symbol radiánové jednotky. To dělá úhel pro oblouk čtvrtiny rovná 0,5π rad.
Když vizualizace průběhu načítání, chceme, aby byl kruh na plátně kreslen z horní pozice místo výchozího práva.
Jít po směru hodinových ručiček (na plátně je nakreslen výchozí oblouk) ze správné pozice, horní bod je dosáhl po třech čtvrtinách, tj. pod úhlem 1.5π rad. Proto jsem vytvořil proměnnou s = 1,5 * Math.PI později označují počáteční úhel oblouků být kreslen z plátna.
4. Styl kruh
Pro objekt výkresového kontextu definujeme šířka čáry a mrtvice vlastnosti kruhu budeme kreslit v dalším kroku. mrtvice vlastnost stojí za její barvou.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); pokud (!! ctx) s = 1,5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; ; 5. Nakreslete kruh
My přidat obslužnou rutinu události click na tlačítko Načíst [#lbtn] který spustí časovač setInterval 60 milisekund, vykonávající funkci odpovědnou za kreslení kruhu [updateLoader ()] každých 60ms, dokud není kruh zcela natažen.
setInterval () metoda vrátí ID časovače identifikovat jeho časovač, který je přiřazen tc proměnná.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1,5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('click', function () tc = setInterval (updateLoader, 60);); ; 6. Vytvořte updateLoader () vlastní funkce
Je na čase vytvořit vlastní updateLoader () funkce, která má být zavolal setInterval () metoda po klepnutí na tlačítko (událost je spuštěna). Dovolte mi, abych vám nejprve ukázal kód, pak můžeme jít spolu s vysvětlením.
funkce 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); vrátit se; pct ++;
clearRect () metoda vymaže obdélníkovou oblast plátna definován svými parametry: souřadnice (x, y) levého horního rohu. clearRect (0, 0, 16, 16) řádek smaže všechno na plátně o velikosti 16 * 16 pixelů, které jsme vytvořili.
beginPath () metoda vytvoří novou cestu pro kreslení a mrtvice() metoda barvy na nově vytvořené cestě.
Na konci updateLoader () funkce, procento [pct] se zvyšuje o 1, a před přírůstkem jsme zkontrolujte, zda se rovná 100. Když je to 100 procent, setInterval () časovač (identifikováno identifikátorem časovače, tc) je vymazáno pomocí clearInterval () metoda.
První tři parametry oblouk() metody jsou (x, y) souřadnice středu oblouku a jeho poloměru. Čtvrtý a pátý parametr představují začátek a konec úhlů při které začíná a končí kreslení oblouku.
Již jsme se rozhodli pro počáteční bod kružnice nakladače, který je v úhlu s, a bude to stejné ve všech iteracích.
Koncový úhel však bude přírůstek s počtem procent, můžeme vypočítat velikost přírůstku následujícím způsobem. Řekněte 1% (hodnota 1 ze 100) je ekvivalentní úhlu α z 2π v kruhu (2)π = úhel celého obvodu), pak stejný může být zapsán jako následující rovnice:
1/100 = α/ 2π
O přeskupení rovnice:
α = 1 * 2π /100 α = 2π/100
Takže 1% odpovídá úhlu 2π/ 100 v kruhu. Proto je koncový úhel během každého procentního přírůstku vypočteno vynásobením 2π/ 100 procentní hodnotou. Pak je výsledek přidáno k s (počáteční úhel), tak jsou oblouky tažená ze stejné výchozí pozice pokaždé. Proto jsme použili pct * 2 * Math.PI / 100 + s vzorec pro výpočet koncového úhlu v útržku kódu výše.
7. Přidejte favicon
Pojďme na místo favicon link element do HTML nebo přímo pomocí JavaScriptu.
V updateLoader () funkce, nejprve přineste favicon za použití querySelector () a přiřadit ji k lnk proměnná. Pak musíme export obrazu plátna pokaždé, když je nakreslen oblouk do kódovaného obrazu pomocí toDataURL () a). \ t přidělit obsah URI dat jako obrázek favicon. Tím se vytvoří animovaný favicon, který je stejně jako plátno nakladač.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('odkaz [rel = "icon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('click', function () tc = setInterval (updateLoader, 60);); ; funkce 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'); if (pct === 100) clearTimeout (tc); vrátit se; pct ++; Můžete se podívat na celý kód na Github.
Bonus: Použijte zavaděč pro asynchronní události
Když potřebujete použít tuto animaci na plátně ve spojení s zatěžovací akcí na webové stránce přiřaďte updateLoader () funkce jako obsluha události pro pokrok() události.
Například náš JavaScript se změní takto v AJAX:
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1,5 * Math.PI, lnk = document.querySelector ('odkaz [rel = "icon"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; var xhr = nový XMLHttpRequest (); xhr.addEventListener ('pokrok', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; funkce 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'); V oblouk() nahradí procentní hodnotu [pct] s načten vlastnictví akce-označuje, kolik souboru bylo načten a místo 100 používat celkový vlastnost programu ProgressEvent, který označuje celkovou částku, která má být načtena.
Tady je není třeba setInterval () v takových případech jako. \ t pokrok() událost je automaticky vypálena jak postupuje načítání.
