Så här skapar du en animerad favicon-laddare med JavaScript

favicons är en viktig del av online branding, de ge en visuell signal till användare och hjälpa dem särskilja din webbplats från andra. Även om de flesta favicons är statiska, är det möjligt att skapa animerade favicons också.

Ett konstant rörligt favicon är verkligen irriterande för de flesta användare, och skadar också tillgänglighet, men när det bara animeras under en kort tid som svar på en användaraktivitet eller en bakgrundshändelse, som en sidlast, kan det ge extra visuell information-Därför förbättrar användarupplevelsen.

I det här inlägget visar jag hur du skapar en animerad cirkulärlastare i en HTML-kanfas, och hur du kan använda den som en favicon. En animerad favicon loader är ett bra verktyg till visualisera framstegen i alla åtgärder utförs på en sida, till exempel filuppladdning eller bildbehandling. Du kan ta en titt på demo som hör till denna handledning på github också.

1. Skapa element

Först måste vi skapa en kanvas animering den där drar en hel cirkel, totalt 100 procent (detta kommer att vara viktigt när vi behöver öka bågen).

 Ladda  

Jag använder standardfavikonstorleken, 16 * 16 pixlar, för duken. Du kan använda en storlek större än den om du vill, men notera att dukavbilden blir nedskalad till 16² pixelområdet när den används som en favicon.

2. Kontrollera om stöds

Inuti onload () händelsehanterare, vi få en referens för dukelementet [CV] använda querySelector () metod och referera dess 2D-teckningskontextobjekt [ctx] med hjälp av getContext () metod.

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

Vi måste också kolla om duken stöds av UA genom att se till att kontextobjektet [ctx] existerar och är inte odefinierad. Vi ska placera all kod som tillhör lasthändelsen in i detta om tillstånd.

3. Skapa de ursprungliga variablerna

Låt oss skapa tre mer globala variabler, s för bågens startvinkel, tc för id för setInterval () timer, och pct för procentvärde av samma timer. Koden tc = pct = 0 tilldelar 0 som ursprungligt värde för tc och pct variabler.

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

För att visa hur värdet av s beräknades, låt mig snabbt förklara hur bågvinklar arbete.

Arc vinklar

De subtended vinkel (vinkeln som består av de två strålarna som definierar en båge) av omkretsen av en cirkel är 2π rad, var rad är radianenhetssymbolen. Detta gör vinkel för kvartbue lika med 0,5π rad.

När visualisera laddningsförloppet, vi vill att cirkeln på duken kan ritas från toppositionen snarare än standardrätten.

Går medurs (standardriktningsbåg är ritad på duken) från rätt position, Toppunkten är nått efter tre fjärdedelar, d.v.s. i en vinkel av 1,5π rad. Därför har jag skapat variabeln s = 1,5 * Math.PI till senare betecknar startvinkeln för bågarna att dras från på duken.

4. Stil om cirkeln

För det tecknade kontextobjektet definierar vi linjebredd och strokeStyle cirkelens egenskaper vi kommer att rita i nästa steg. De strokeStyle egendom står för sin färg.

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

5. Rita cirkeln

Vi lägg till en händelsehanterare för klick till Load-knappen [#lbtn] som utlöser en setintervalltid på 60 millisekunder, som utför den funktion som är ansvarig för att rita cirkeln [updateLoader ()] var 60: e tills cirkeln är helt ritad.

De setInterval () metod returnerar ett timer id att identifiera sin timer som är tilldelad till tc variabel.

 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 ( 'klick', function () tc = setInterval (updateLoader, 60);); ; 

6. Skapa updateLoader () anpassad funktion

Det är dags att skapa anpassningen updateLoader () funktion som ska vara kallas av setInterval () metod när knappen klickas (händelsen utlöses). Låt mig visa dig koden först, då kan vi gå med förklaringen.

 funktion updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); om (pct === 100) clearInterval (tc); lämna tillbaka;  pct ++;  

De clearRect () metod rensar den rektangulära delen av duken definieras av dess parametrar: (x, y) koordinaterna i det övre vänstra hörnet. De clearRect (0, 0, 16, 16) linje raderar allt i 16 * 16 pixlar kanfas som vi har skapat.

De beginPath () metod skapar en ny väg för ritningen och stroke() metod målar på den nybildade sökvägen.

I slutet av updateLoader () funktion, procenttal [pct] ökas med 1, och före inkrementet vi kolla om det motsvarar 100. När det är 100 procent, så setInterval () timer (identifierad av timer-id, tc) rensas med hjälp av clearInterval () metod.

De tre första parametrarna för båge() metod är (x, y) koordinater för bågens mittpunkt och dess radie. Den fjärde och femte parametern representerar start och slut vinklar vid vilken bågens ritning börjar och slutar.

Vi har redan bestämt startpunkten för lastarkretsen, som ligger i vinkeln s, och det blir det samma i alla iterationerna.

Ändvinkeln kommer dock att göra ökning med procenttalet, vi kan beräkna storleken på inkrementet på följande sätt. Säg 1% (värdet 1 av 100) är ekvivalent med vinkeln α av 2π i en cirkel (2π = vinkel av hela omkretsen), då kan samma skrivas som följande ekvation:

1/100 = α/ 2π

Vid omplacering av ekvationen:

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

Så 1% motsvarar vinkeln 2π/ 100 i en cirkel. Sålunda är ändvinkeln under varje procent inkrement beräknas genom att multiplicera 2π/ 100 med procentvärdet. Då är resultatet lagt till s (startvinkel), så bågarna är dras från samma startposition varje gång. Det är därför vi använde pct * 2 * Math.PI / 100 + s formel för att beräkna slutvinkeln i kodfragmentet ovan.

7. Lägg till favicon

Låt oss placera en favicon länkelement in i HTML avsnitt, antingen direkt eller via JavaScript.

I updateLoader () funktion, först vi hämta favicon använda querySelector () metod och tilldela den till LNK variabel. Då behöver vi exportera kanfasbilden varje gång en båge dras in i en kodad bild genom att använda toDataURL () metod och Tilldela URI-innehållet som favikonbilden. Detta skapar en animerad favicon som är samma som dukhållaren.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); om (!! ctx) s = 1,5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('länk [rel = "ikon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('klick', funktion () tc = setInterval (updateLoader, 60);); ; funktion 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'); om (pct === 100) clearTimeout (tc); lämna tillbaka;  pct ++;  

Du kan titta på hela koden på Github.

Bonus: Använd loader för async händelser

När du behöver använda den här kanvasanimationen i samband med en laddningsåtgärd på en webbsida, tilldela updateLoader () fungera som händelsehanteraren för framsteg() händelse av åtgärden.

Till exempel kommer vår JavaScript att förändras så här i AJAX:

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); om (!! ctx) s = 1,5 * Math.PI, lnk = document.querySelector ('länk [rel = "ikon"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia';  var xhr = ny XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; funktion updateLoader (evt) ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (evt.belastad * 2 * Math.PI / evt.total + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png');  

I båge() metod, ersätt det procentuella värdet [pct] med lastad egenskapen för evenemanget-Det anger hur mycket av filen som har laddats och i stället för 100 Använd total ProgressEvents egendom, vilket anger den totala belopp som ska laddas.

Det finns inget behov av setInterval () i sådana fall, som framsteg() händelsen är automatiskt avfyrade som laddningen fortskrider.