no.hideout-lastation.com
Paradis For Designere Og Utviklere


Lag en animert Favicon Loader med JavaScript

Favicons er en viktig del av online branding, de gir en visuell signal til brukere, og hjelper dem å skille nettstedet ditt fra andre. Selv om de fleste favikoner er statiske, er det også mulig å lage animerte favikoner .

Et konstant bevegelig favicon er absolutt irriterende for de fleste brukere, og det skader også tilgjengeligheten, men når det bare animeres i kort tid som svar på en brukerhandling eller en bakgrunnshendelse, for eksempel en sidebelastning, kan den gi ekstra visuell informasjon - derfor forbedre brukeropplevelsen.

I dette innlegget vil jeg vise deg hvordan du lager en animert sirkulær loader i et HTML-lerret, og hvordan du kan bruke det som en favicon. En animert favicon-loader er et flott verktøy for å visualisere fremdriften av enhver handling utført på en side, for eksempel filopplasting eller bildebehandling. Du kan se på demoen som tilhører denne opplæringenGithub også.

1. Opprett element

Først må vi lage et lerret animasjon som trekker en full sirkel, 100 prosent totalt (dette vil være viktig når vi må øke buen).

  

Jeg bruker standard favicon størrelse, 16 * 16 piksler, for lerretet. Du kan bruke en størrelse større enn det hvis du vil, men vær oppmerksom på at lerretbildet skal skaleres ned til 16 2 pixelområdet når det brukes som et favicon.

2. Sjekk om støttes

Inne i hendelsesbehandleren på onload(), får vi en referanse for querySelector() [ cv ] ved hjelp av querySelector(), og refererer til 2D-tegningskontekobjektet [ ctx ] ved hjelp av metoden getContext() .

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

Vi må også sjekke om lerretet støttes av UA ved å sørge for at tegnings kontekstobjektet [ ctx ] eksisterer og ikke er udefinert . Vi legger all koden til lastbegivenheten inn i dette if tilstand.

3. Lag de første variablene

La oss opprette tre globale variabler, s for startvinkelen til buen, tc for idet for setInterval() -timeren, og pct for prosentverdien av den samme timeren . Koden tc = pct = 0 tilordner 0 som startverdien for tc og pct variablene.

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

For å vise hvordan verdien av s ble beregnet, la meg raskt forklare hvordan buevinkler fungerer.

Arc vinkler

Den subtente vinkelen (vinkelen som er sammensatt av de to strålene som definerer en bue) av omkretsen av en sirkel er 2π rad, hvor rad er radian-enhetssymbolet. Dette gjør vinkelen for en kvartbue lik 0, 5π rad .

Når vi visualiserer innlasting, ønsker vi at sirkelen på lerretet skal trekkes fra topplasseringen i stedet for standardretten.

Går med klokken (standardretningen lyser opp på lerretet) fra høyre posisjon, toppunktet nås etter tre kvartaler, det vil si i en vinkel på 1, 5π rad . Derfor har jeg opprettet variablen s = 1.5 * Math.PI til senere angir s = 1.5 * Math.PI for buene som skal trekkes fra på lerretet.

4. Stil sirkelen

For tegningskontekstobjektet definerer vi lineWidth og lineWidth til sirkelen vi skal tegne i neste trinn. Egenskapen strokeStyle står for fargen sin.

 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 sirkelen

Vi legger til en klikkhendelseshåndterer på Load-knappen [ #lbtn ] som utløser en setInterval-timer på 60 millisekunder, som utfører funksjonen som er ansvarlig for å tegne sirkelen [ updateLoader() ] hver 60m til sirkelen er helt trukket.

Metoden setInterval() returnerer et timer ID for å identifisere timeren som er tilordnet tc variabelen.

 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 ('klikk', funksjon () {tc = setInterval (updateLoader, 60);}); }}; 

6. Opprett updateLoader() tilpasset funksjon

Det er på tide å lage den tilpassede updateLoader() -funksjonen som skal kalles med setInterval() -metoden når knappen klikkes (hendelsen utløses). La meg vise deg koden først, så kan vi gå med forklaringen.

 funksjon 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); komme tilbake; } pct ++; } 

clearRect() fjerner det rektangulære området av lerretet definert av parametrene: (x, y) -koordinatene til øverste venstre hjørne. clearRect(0, 0, 16, 16) sletter alt i 16 * 16 piksler lerretet vi har opprettet.

beginPath() lager en ny sti for tegningen, og metoden stroke() maler på den nylig opprettede banen .

På slutten av updateLoader() -funksjonen økes prosenttalet [ pct ] med 1, og før updateLoader() kontrollerer vi om det tilsvarer 100 . Når det er 100 prosent, blir setInterval() timeren (identifisert av tidtaker-ID, tc ) slettet ved hjelp av metoden clearInterval() .

De tre første parametrene for arc() -metoden er (x, y) koordinatene til buenes senter og dens radius . Den fjerde og femte parameteren representerer start- og sluttvinklene hvor tegningen av lysbuen begynner og slutter.

Vi har allerede bestemt startpunktet for loader-sirkelen, som ligger i vinkelen s, og det vil være det samme i alle iterasjonene .

Endevinkelen øker imidlertid med prosentandelen, vi kan beregne størrelsen på trinnet på følgende måte. Si 1% (verdien 1 av 100) tilsvarer vinkelen α ut av 2π i en sirkel (2π = vinkel på hele omkretsen), da kan det samme skrives som følgende ligning:

 1/100 = a / 2π 

Ved omarrangering av ligningen:

 a = 1 * 2π / 100 a = 2π / 100 

Så er 1% ekvivalent med vinkelen 2π / 100 i en sirkel. Dermed beregnes sluttvinkelen under hvert prosentvis inkrement ved å multiplisere 2π / 100 med prosentverdien . Da blir resultatet lagt til s (startvinkel), slik at buene trekkes fra samme startposisjon hver gang. Dette er grunnen til at vi brukte pct * 2 * Math.PI / 100 + s formel for å beregne sluttvinkelen i pct * 2 * Math.PI / 100 + s ovenfor.

7. Legg til favicon

La oss plassere et favicon-koblingselement i HTML-en seksjon, enten direkte eller via JavaScript.

I funksjonen updateLoader(), henter vi først querySelector() ved hjelp av querySelector(), og tilordner den til lnk variabelen. Da må vi eksportere lerretet bildet hver gang en bue trekkes inn i et kodet bilde ved hjelp av toDataURL(), og tilordne det data URI-innholdet som favicon-bildet . Dette skaper et animert favicon som er det samme som lerretlasteren .

 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 ('klikk', funksjon () {tc = setInterval (updateLoader, 60);}); }}; funksjon 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); komme tilbake; } pct ++; } 

Du kan se på hele koden på Github .

Bonus: Bruk lasteren for asynk hendelser

Når du trenger å bruke denne updateLoader() i forbindelse med en lastingshandling på en nettside, tilordner du updateLoader() -funksjonen som hendelseshåndterer for progress() hendelsen i handlingen .

For eksempel vil JavaScript endres 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 (); }; funksjon 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 arc() -metoden, erstatt prosentverdien [ pct ] med den loaded egenskapen til hendelsen - det angir hvor mye av filen som er lastet, og i stedet for 100 bruker den total egenskapen til ProgressEvent, som betyr total Beløpet skal lastes inn.

Det er ikke behov for setInterval() i slike tilfeller, da progress() -hendelsen automatisk avfyres når lastingen skrider frem.

Dette tilfellet lar deg lade din iPhone når som helst, hvor som helst

Dette tilfellet lar deg lade din iPhone når som helst, hvor som helst

Det er ikke nektet at iPhone har en god batterilevetid. Men tunge brukere vil fortsatt kunne tømme batteriet til en fulladet iPhone innen vanlig arbeidstid. Den ideelle løsningen på dette problemet vil normalt være en strømbank, eller ideelt sett et strømuttak, slik at du kan fylle opp telefonens batteri. Dess

(Tekniske og design tips)

Meldingsapplikasjoner Ansiktsbasert: Google Allo vs Messenger mot Skype

Meldingsapplikasjoner Ansiktsbasert: Google Allo vs Messenger mot Skype

Internett av ting skifter liv med tusenvis av smarte enheter som er koblet til Internett. Produkter og apper konverterer til smartere, alltid tilkoblede, selvlærende intelligente roboter drevet av kunstige intelligensplattformer .Meldings- og kommunikasjonsprogrammer er ikke forskjellige - disse bruker nå kunstig intelligens teknologi for å forstå brukerne bedre og gi smartere tjenester . Hv

(Tekniske og design tips)