Een geanimeerde Favicon-lader maken met JavaScript

favicons zijn een cruciaal onderdeel van online branding, zij geef een visuele keu gebruikers en help hen onderscheid uw site van anderen. Hoewel de meeste favicons statisch zijn, is het mogelijk om geanimeerde favicons maken ook.

Een constant bewegend favicon is zeker vervelend voor de meeste gebruikers en schaadt ook de toegankelijkheid, maar wanneer het slechts korte tijd geanimeerd is in reactie op een gebruikersactie of een achtergrondgebeurtenis, zoals een pagina laden, het kan geef extra visuele informatie-daarom de gebruikerservaring verbeteren.

In dit bericht laat ik je zien hoe je een kunt maken geanimeerde ronde loader in een HTML-canvas, en hoe je het als een favicon kunt gebruiken. Een geanimeerde favicon-lader is een geweldig hulpmiddel om visualiseer de voortgang van elke actie uitgevoerd op een pagina, zoals het uploaden van bestanden of het verwerken van afbeeldingen. Je kunt het bekijken demo behorende bij deze tutorial op Github ook.

1. Maak het element

Eerst moeten we dat doen maak een canvas-animatie dat tekent een volledige cirkel, 100 procent in totaal (dit zal belangrijk zijn wanneer we de boog moeten verhogen).

 Laden  

Ik gebruik de standaard favicon-afmeting, 16 * 16 pixels, voor het canvas. Je kunt desgewenst een grotere maat gebruiken dan dat je wilt, maar houd er rekening mee dat de canvasafbeelding dat wel is teruggebracht tot de 16² pixelgebied wanneer het wordt toegepast als een favicon.

2. Controleer of wordt ondersteund

Binnen in de onload () event handler, wij krijg een referentie voor het canvas-element [CV] de ... gebruiken querySelector () methode en verwijzen het 2D tekening contextobject [ctx] met behulp van de getContext () methode.

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

We moeten ook controleren als het canvas wordt ondersteund door de UA door ervoor te zorgen dat het tekencontextobject [ctx] bestaat en is niet ongedefinieerd. We zullen plaatsen alle code die hoort bij de load-gebeurtenis in dit als staat.

3. Maak de beginvariabelen

Laten we creëren drie meer globale variabelen, s voor de starthoek van de boog, tc voor de id voor de setInterval () timer, en pct voor de percentage van dezelfde timer. De code tc = pct = 0 wijst 0 toe als de beginwaarde voor de tc en pct variabelen.

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

Om te laten zien hoe de waarde van s werd berekend, laat me snel uitleggen hoe boog hoeken werk.

Arc hoeken

De ingesloten hoek (de hoek die bestaat uit de twee stralen die een boog definiëren) van de omtrek van een cirkel is 2π rad, waar rad is het symbool van de radiale eenheid. Dit maakt de hoek voor een kwart boog gelijk aan 0.5π rad.

Wanneer visualiseren van de voortgang van het laden, we willen dat de cirkel op het canvas wordt getekend vanuit de bovenste positie in plaats van het standaardrecht.

Gaat met de klok mee (standaard richtingsboog wordt op het canvas getekend) vanaf de juiste positie, het toppunt is bereikt na drie kwartalen, d.w.z. onder een hoek van 1.5π rad. Daarom heb ik de variabele gemaakt s = 1,5 * Math.PI tot later duid de starthoek voor de bogen aan om van op het doek te worden getrokken.

4. Geef de cirkel een stijl

Voor het tekencontextobject definiëren we de lijnbreedte en strokeStyle eigenschappen van de cirkel we gaan in de volgende stap tekenen. De strokeStyle eigenschap staat voor zijn kleur.

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

5. Teken de cirkel

Wij voeg een gebeurtenishandler voor klikken toe naar de Load-knop [#lbtn] welke activeert een setInterval-timer van 60 milliseconden, die de functie uitvoert die verantwoordelijk is voor het tekenen van de cirkel [updateLoader ()] elke 60 ms totdat de cirkel volledig is getekend.

De setInterval () methode geeft een timer-ID terug om de timer te identificeren die is toegewezen aan de tc veranderlijk.

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

6. Maak het updateLoader () aangepaste functie

Het is tijd om de gewoonte te maken updateLoader () functie die moet zijn geroepen door de setInterval () methode wanneer op de knop wordt geklikt (de gebeurtenis wordt geactiveerd). Laat me je eerst de code tonen, dan kunnen we de uitleg volgen.

 function 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); terug te keren;  pct ++;  

De clearRect () methode wist het rechthoekige gebied van het canvas gedefinieerd door zijn parameters: de (x, y) coördinaten van de linkerbovenhoek. De clearRect (0, 0, 16, 16) lijn wist alles in het 16 * 16 pixels canvas dat we hebben gemaakt.

De beginPath () methode maakt een nieuw pad voor de tekening, en de beroerte() methode schildert op dat nieuw gecreëerde pad.

Aan het einde van de updateLoader () functie, de percentage tellen [pct] wordt verhoogd met 1, en voorafgaand aan de verhoging wij controleer of het gelijk is aan 100. Wanneer het 100 procent is, de setInterval () timer (geïdentificeerd door de timer-id, tc) is gewist met behulp van de clearInterval () methode.

De eerste drie parameters van de boog() methode zijn de (x, y) coördinaten van het middelpunt van de boog en de straal. De vierde en vijfde parameter vertegenwoordigen de begin en eind hoeken waarbij de tekening van de boog begint en eindigt.

We hebben al het beginpunt van de ladercirkel bepaald, die in een hoek ligt s, en het zal de zijn hetzelfde in alle iteraties.

De eindhoek echter verhogen met het percentage tellen, we kunnen het berekenen grootte van de verhoging op de volgende manier. Zeg 1% (de waarde 1 van de 100) is gelijk aan hoek α van de 2π in een cirkel (2π = hoek van de hele omtrek), dan kan hetzelfde worden geschreven als de volgende vergelijking:

1/100 = α/ 2π

Over het herschikken van de vergelijking:

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

Dus 1% is gelijk aan de hoek 2π/ 100 in een cirkel. Dus de eindhoek tijdens elke procentuele toename is berekend door 2 te vermenigvuldigenπ/ 100 met het percentage. Dan is het resultaat toegevoegd aan s (starthoek), dus de bogen zijn getekend vanuit dezelfde startpositie elke keer. Dit is de reden waarom we de pct * 2 * Math.PI / 100 + s formule om de eindhoek in het bovenstaande codefragment te berekenen.

7. Voeg het favicon toe

Laten we een plaatsen favicon-linkelement in de HTML sectie, hetzij rechtstreeks, hetzij via JavaScript.

In de updateLoader () functie, eerst wij haal de favicon de ... gebruiken querySelector () methode, en wijs het toe aan de lnk variabel. Dan moeten we dat doen exporteer de canvas afbeelding telkens als een boog wordt getekend in een gecodeerde afbeelding door de toDataURL () methode, en wijs die gegevens URI-inhoud toe als de favicon-afbeelding. Dit creëert een geanimeerde favicon die de hetzelfde als de canvaslader.

 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 ('link [rel = "icon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('klik', functie () tc = setInterval (updateLoader, 60);); ; function 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); terug te keren;  pct ++;  

U kunt de volledige code bekijken op Github.

Bonus: gebruik de loader voor async-evenementen

Wanneer u deze canvas-animatie moet gebruiken in combinatie met een laadactie in een webpagina de updateLoader () functie als de gebeurtenishandler voor de vooruitgang() gebeurtenis van de actie.

Onze JavaScript zal bijvoorbeeld zo veranderen in AJAX:

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('link [rel = "icon"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia';  var xhr = nieuwe XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; function 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');  

In de boog() methode, vervang het percentage [pct] met de loaded eigendom van het evenement-het geeft aan hoeveel van het bestand is geladen en in plaats van 100 gebruik de totaal eigendom van ProgressEvent, die het totale te laden bedrag aangeeft.

er is geen behoefte aan setInterval () in dergelijke gevallen, zoals de vooruitgang() evenement is automatisch geactiveerd naarmate het laden vordert.