So erstellen Sie einen animierten Favicon Loader mit JavaScript

Favicons Sie sind ein entscheidender Bestandteil des Online-Brandings geben Sie einen visuellen Hinweis an Benutzer und helfen ihnen Unterscheiden Sie Ihre Site von anderen. Obwohl die meisten Favoriten statisch sind, ist es möglich Erstellen Sie animierte Favicons auch.

Ein sich ständig bewegendes Favicon ist für die meisten Benutzer sicherlich ärgerlich und beeinträchtigt auch die Zugänglichkeit, wenn es jedoch nur für kurze Zeit animiert wird als Reaktion auf eine Benutzeraktion oder ein Hintergrundereignis, B. eine Seite laden, kann es bieten zusätzliche visuelle Informationen-damit die Benutzererfahrung verbessern.

In diesem Beitrag zeige ich Ihnen, wie Sie eine Animierter kreisförmiger Loader in einer HTML-Leinwand, und wie man es als Favicon verwenden kann. Ein animierter Favicon-Loader ist ein großartiges Werkzeug dafür visualisieren Sie den Fortschritt einer Aktion auf einer Seite durchgeführt werden, z. B. Hochladen von Dateien oder Bildverarbeitung. Sie können sich das ansehen Demo zu diesem Tutorial auf Github auch.

1. Erstellen Sie die Element

Zuerst müssen wir es tun Erstellen Sie eine Leinwandanimation Das zeichnet einen vollständigen Kreis, insgesamt 100 Prozent (Dies ist wichtig, wenn der Bogen erhöht werden muss).

Ich verwende die Standardgröße des Favicons, 16 * 16 Pixel, für die Leinwand. Sie können eine größere Größe verwenden, wenn Sie möchten. Beachten Sie jedoch, dass das Bild auf der Leinwand sein wird auf die 16 verkleinert² Pixelbereich wenn es als Favicon angewendet wird.

2. Prüfen Sie, ob wird unterstützt

In der onload () Eventhandler, wir Holen Sie sich eine Referenz für das Canvas-Element [Lebenslauf] Verwendung der querySelector () Methode und verweisen sein 2D-Zeichnungskontextobjekt [ctx] mit der Hilfe des getContext () Methode.

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

Wir müssen auch überprüfen wenn die Leinwand von unterstützt wird UA indem Sie sicherstellen, dass das Zeichnungskontextobjekt [ctx] existiert und ist nicht undefiniert. Wir werden platzieren der gesamte Code, der zum Ladeereignis gehört das sehr gut finden ob Bedingung.

3. Erstellen Sie die Ausgangsvariablen

Lass uns schaffen drei weitere globale Variablen, s für die Startwinkel des Bogens, tc für die ID für die setInterval () Timer, und pct für die Prozentwert des gleichen Timers. Der Code tc = pct = 0 weist 0 als zu Ursprünglicher Wert für die tc und pct Variablen.

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

Um zu zeigen, wie der Wert von s wurde berechnet, lass mich schnell erklären wie Bogenwinkel Arbeit.

Bogenwinkel

Das Nebenwinkel (der Winkel, der aus den zwei Strahlen besteht, die einen Bogen definieren) des Umfangs eines Kreises ist 2π rad, woher rad ist das Einheitszeichen in Radiant. Das macht das Winkel für einen Viertelbogen gleich 0,5π rad.

BILD: Wikipedia

Wann Visualisierung des Ladevorgangs, Wir möchten, dass der Kreis auf der Leinwand gezeichnet wird aus der obersten Position anstatt das Standardrecht.

Im Uhrzeigersinn gehen (Standardrichtungsbogen wird auf der Leinwand gezeichnet) aus der richtigen Position, der oberste Punkt ist nach drei Quartalen erreicht, unter einem Winkel von 1,5π rad. Daher habe ich die Variable erstellt s = 1,5 * Math.PI zu später bezeichnen den Startwinkel für die Bögen von der Leinwand gezeichnet werden.

4. Gestalten Sie den Kreis

Für das Zeichnungskontextobjekt definieren wir das Linienbreite und strokeStyle Eigenschaften des Kreises Wir werden im nächsten Schritt zeichnen. Das strokeStyle Eigenschaft steht für seine Farbe.

 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. Zeichne den Kreis

Wir Fügen Sie einen Click-Ereignishandler hinzu zum Load-Button [#lbtn] welche löst einen setInterval-Timer von 60 Millisekunden aus, das führt die Funktion aus, die für das Zeichnen des Kreises verantwortlich ist [updateLoader ()] alle 60 ms, bis der Kreis vollständig gezeichnet ist.

Das setInterval () Methode Gibt eine Timer-ID zurück um seinen Timer zu identifizieren, der dem zugeordnet ist tc Variable.

 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. Erstellen Sie die `updateLoader ()` benutzerdefinierte Funktion

Es ist Zeit, den Brauch zu erstellen updateLoader () Funktion, die sein soll aufgerufen von der setInterval () Methode wenn die Schaltfläche angeklickt wird (das Ereignis wird ausgelöst). Lassen Sie mich zuerst den Code zeigen, dann können wir mit der Erklärung fortfahren.

 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); Rückkehr;  pct ++;

Das clearRect () Methode löscht den rechteckigen Bereich der Leinwand durch seine Parameter definiert: die (x, y) -Koordinaten der oberen linken Ecke. Das clearRect (0, 0, 16, 16) Linie löscht alles in der von uns erstellten 16 * 16-Pixel-Leinwand.

Das beginPath () Methode schafft einen neuen Weg für die Zeichnung und die Schlaganfall() Methode malt auf diesem neu erstellten Pfad.

Am Ende von updateLoader () Funktion, die Prozentzahl [pct] wird um 1 erhöht, und vor dem inkrement wir Prüfen Sie, ob es 100 entspricht. Wenn es 100 Prozent ist, die setInterval () Timer (identifiziert durch die Timer-ID, tc) wird gelöscht mit der Hilfe des clearInterval () Methode.

Die ersten drei Parameter des Bogen() Methode sind die (x, y) Koordinaten des Mittelpunkts des Bogens und sein Radius. Der vierte und der fünfte Parameter repräsentieren die Start- und Endwinkel bei dem das Zeichnen des Bogens beginnt und endet.

Den Startpunkt des Laderkreises, der im Winkel liegt, haben wir bereits festgelegt s, und es wird das sein in allen Iterationen gleich.

Der Endwinkel wird jedoch Erhöhen Sie die Prozentzahl, wir können das berechnen Größe des Inkrements auf die folgende Weise. Angenommen, 1% (der Wert 1 von 100) ist entspricht dem Winkel α von 2π in einem Kreis (2π = Winkel des gesamten Umfangs), dann kann die gleiche Gleichung wie folgt geschrieben werden:

1/100 = α/ 2π

Beim Umstellen der Gleichung:

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

1% entspricht also dem Winkel 2π/ 100 in einem Kreis. Somit ist der Endwinkel während jedes Prozentschrittes berechnet durch Multiplikation 2π/ 100 durch den prozentualen Wert. Dann ist das Ergebnis hinzugefügt zu s (Startwinkel), so sind die Bögen von derselben Startposition gezeichnet jedes Mal. Deshalb haben wir die verwendet pct * 2 * Math.PI / 100 + s Formel zur Berechnung des Endwinkels im obigen Code-Snippet.

7. Fügen Sie das Favicon hinzu

Lassen Sie uns ein Favicon-Linkelement in das HTML direkt oder über JavaScript.

In dem updateLoader () Funktion, zuerst wir Hol das Favicon Verwendung der querySelector () Methode und ordnen Sie es dem zu lnk Variable. Dann müssen wir es tun Exportieren Sie das Leinwandbild Jedes Mal, wenn ein Bogen gezeichnet wird in ein kodiertes Bild mit der toDataURL () Methode und Weisen Sie diesen Daten-URI-Inhalt als Favicon-Image zu. Dies erzeugt ein animiertes Favicon, das das ist wie beim Canvas Loader.

 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 ('click', function () 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); Rückkehr;  pct ++;

Sie können sich den vollständigen Code ansehen auf Github.

Bonus: Verwenden Sie den Loader für asynchrone Ereignisse

Wenn Sie diese Leinwandanimation verwenden müssen in Verbindung mit einer Ladeaktion Weisen Sie in einer Webseite das zu updateLoader () Funktion als Eventhandler für die Fortschritt() Ereignis der Aktion.

So ändert sich beispielsweise unser JavaScript 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 = new 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 dem Bogen() Methode, ersetzen Sie den Prozentwert [pct] mit dem geladen Eigentum der Veranstaltung-es gibt an, wie viel von der Datei geladen wurde, und statt 100 benutze die gesamt Eigenschaft des ProgressEvent, was die Gesamtmenge bezeichnet, die geladen werden soll.

Es gibt kein Bedarf für setInterval () in solchen Fällen als Fortschritt() Ereignis ist automatisch abgefeuert während das Laden fortschreitet.