Sådan oprettes en animeret favicon-loader med JavaScript

favicons er en afgørende del af online branding, de Giv en visuel cue til brugere og hjælpe dem skelne dit websted fra andre. Selvom de fleste favikoner er statiske, er det muligt at oprette animerede favikoner såvel.

Et konstant bevægende favicon er bestemt irriterende for de fleste brugere, og det skader også tilgængelighed, men når det kun animeres i kort tid som reaktion på en brugerhandling eller en baggrundshændelse, som en sidebelastning, kan den give ekstra visuel information-Derfor forbedrer brugeroplevelsen.

I dette indlæg vil jeg vise dig, hvordan du opretter en animeret cirkulær loader i et HTML-lærred, og hvordan du kan bruge det som en favicon. en animeret favicon loader er et godt værktøj til visualisere fremskridt i enhver handling udført på en side, f.eks. filoploading eller billedbehandling. Du kan se på demo, der tilhører denne vejledning på Github såvel.

1. Opret element

For det første skal vi lav et lærred animation at tegner en fuld cirkel, i alt 100 procent (dette vil være vigtigt, når vi skal øge buen).

Jeg bruger standard favicon størrelse, 16 * 16 pixels, til lærredet. Du kan bruge en størrelse større end det, hvis du vil, men bemærk at lærredbilledet vil være nedskaleret til 16² pixel område når den anvendes som et favicon.

2. Kontroller om understøttes

Inde i onload () hændelseshandler, vi få en henvisning til lærredselementet [cv] bruger querySelector () metode og henvisning dens 2D tegning kontekst objekt [ctx] ved hjælp af getContext () metode.

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

Vi skal også tjekke hvis lærredet understøttes af UA ved at sørge for, at tegningskontekstobjektet [ctx] eksisterer og er ikke udefineret. Vi placerer al den kode der tilhører belastningsbegivenheden ind i dette hvis tilstand.

3. Opret de oprindelige variabler

Lad os oprette tre mere globale variabler, s for Bogens startvinkel, tc for id for setInterval () timeren, og pct for procentværdien af den samme timer. Koden tc = pct = 0 tildeler 0 som startværdi for tc og pct variabler.

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

For at vise, hvordan værdien af s blev beregnet, lad mig hurtigt forklare hvordan lysvinkler arbejde.

Arc vinkler

Det subtended vinkel (vinklen sammensat af de to stråler, der definerer en bue) af omkredsen af en cirkel er 2π rad, hvor rad er radian-enheds symbolet. Dette gør vinkel for kvartbue svarende til 0,5π rad.

IMAGE: Wikipedia

Hvornår visualisering af læsningsprocessen, vi ønsker at cirklen på lærredet skal tegnes fra den øverste position snarere end standardretten.

Går med uret (standardretningen bue er tegnet på lærredet) fra den rigtige position, det øverste punkt er nået efter tre fjerdedele, dvs. i en vinkel på 1.5π rad. Derfor har jeg oprettet variablen s = 1,5 * Math.PI til senere betegner startvinklen for buerne at blive trukket fra på lærredet.

4. Stil cirklen

Til tegning kontekstobjekt definerer vi lineWidth og strokeStyle cirkelens egenskaber vi skal tegne i næste trin. Det strokeStyle ejendom står for sin farve.

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

5. Tegn cirklen

Vi Tilføj en klikhændelseshåndterer til Load-knappen [#lbtn] hvilken udløser en setinterval timer på 60 millisekunder, der udfører den funktion, der er ansvarlig for at tegne cirklen [updateLoader ()] hver 60ms, indtil cirklen er fuldt udtrukket.

Det setInterval () metode returnerer et timer id at identificere sin timer, som er tildelt til tc variabel.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); hvis (!! ctx) s = 1,5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('klik', funktion () tc = setInterval (updateLoader, 60);); ;

6. Opret `updateLoader ()` brugerdefineret funktion

Det er tid til at oprette brugerdefineret updateLoader () funktion, der skal være kaldet af setInterval () metode når knappen trykkes (hændelsen udløses). Lad mig vise dig koden først, så vi kan følge med forklaringen.

 funktion updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); hvis (pct === 100) clearInterval (tc); Vend tilbage;  pct ++;

Det clearRect () metode rydder det rektangulære område af lærredet defineret af dets parametre: (x, y) koordinaterne i øverste venstre hjørne. Det clearRect (0, 0, 16, 16) linje sletter alt i den 16 * 16 pixel lærred vi har oprettet.

Det beginPath () metode opretter en ny sti til tegningen og den slag() metode maler på den nyoprettede vej.

I slutningen af updateLoader () funktion, den procenttælling [pct] øges med 1, og forud for stigningen vi kontrollere om det svarer til 100. Når det er 100 procent, er det setInterval () timeren (identificeret af timeren id, tc) er ryddet med hjælp fra clearInterval () metode.

De tre første parametre af bue() metode er (x, y) koordinater for bueens centrum og dens radius. Den fjerde og femte parameter repræsenterer Start og slut vinkler hvor tegningen af buen begynder og slutter.

Vi har allerede besluttet startpunktet for loadercirklen, som ligger i vinklen s, og det bliver det samme i alle iterationerne.

Slutvinklen vil dog stigning med procenttællingen, vi kan beregne størrelsen af stigningen på følgende måde. Sig 1% (værdien 1 ud af 100) er svarende til vinklen α ud af 2π i en cirkel (2π = vinkel på hele omkredsen), så kan det samme skrives som følgende ligning:

1/100 = α/ 2π

Ved omplacering af ligningen:

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

Så 1% svarer til vinklen 2π/ 100 i en cirkel. Således er endevinklen under hver procentvis stigning beregnes ved at gange 2π/ 100 af procentværdien. Så er resultatet tilføjet til s (startvinkel), så buerne er trukket fra samme startposition hver gang. Det er derfor, vi brugte pct * 2 * Math.PI / 100 + s formel til beregning af endevinklen i kodestykket ovenfor.

7. Tilføj favicon

Lad os placere en favicon link element ind i HTML'en afsnit, enten direkte eller via JavaScript.

I updateLoader () funktion, først vi hent favicon bruger querySelector () metode og tildele det til LNK variabel. Så skal vi eksporter lærredbilledet hver gang en bue tegnes ind i et kodet billede ved at bruge toDataURL () metode og tildele det data URI-indhold som favicon-billedet. Dette skaber et animeret favicon, som er samme som lærredlæsseren.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); hvis (!! ctx) s = 1,5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('link [rel = "ikon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('klik', 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'); hvis (pct === 100) clearTimeout (tc); Vend tilbage;  pct ++;

Du kan se hele koden på Github.

Bonus: Brug loader til async events

Når du skal bruge denne lærreds animation i forbindelse med en indlæsning på en webside, tildele updateLoader () fungere som hændelseshåndterer til fremskridt() begivenhed af handlingen.

For eksempel ændres vores JavaScript som dette i AJAX:

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); hvis (!! ctx) s = 1,5 * Math.PI, lnk = document.querySelector ('link [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.loaded * 2 * Math.PI / evt.total + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png');

I bue() metode, erstat procentværdien [pct] med indlæst ejendom af arrangementet-det angiver, hvor meget af filen der er indlæst, og i stedet for 100 brug i alt ProgressEvents ejendom, hvilket angiver det samlede beløb, der skal indlæses.

Der er ikke behov for setInterval () i sådanne tilfælde, som fremskridt() begivenheden er automatisk fyret som læsningen skrider frem.