de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Erstellen Sie einen animierten Favicon Loader mit JavaScript

Favicons sind ein wichtiger Bestandteil des Online-Brandings. Sie geben Benutzern einen visuellen Hinweis und helfen ihnen , Ihre Website von anderen zu unterscheiden. Obwohl die meisten Favicons statisch sind, ist es auch möglich , animierte Favicons zu erstellen .

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 eine kurze Zeit als Reaktion auf eine Benutzeraktion oder ein Hintergrundereignis, wie beispielsweise ein Seitenladen, animiert wird, kann es zusätzliche visuelle Information bereitstellen Verbesserung der Benutzererfahrung.

In diesem Beitrag zeige ich Ihnen, wie Sie in einem HTML-Zeichenbereich einen animierten kreisförmigen Loader erstellen und wie Sie ihn als Favicon verwenden können. Ein animierter Favicon-Loader ist ein großartiges Tool, um den Fortschritt einer Aktion auf einer Seite zu visualisieren, z. B. beim Hochladen von Dateien oder bei der Bildverarbeitung. Sie können sich auch die Demo zu diesem Tutorial auf Github anschauen.

1. Erstellen Sie die Element

Zuerst müssen wir eine Leinwandanimation erstellen, die einen vollen Kreis zeichnet, insgesamt 100 Prozent (dies ist wichtig, wenn wir den Bogen inkrementieren müssen).

  

Ich verwende die Standard-Favicon-Größe, 16 * 16 Pixel, für die Leinwand. Sie können eine größere Größe verwenden, wenn Sie möchten, aber beachten Sie, dass das Leinwandbild auf den Bereich von 16 2 Pixel verkleinert wird, wenn es als Favicon angewendet wird.

2. Überprüfen Sie, ob wird unterstützt

Im Ereignishandler onload() wir eine Referenz für das Element canvas [ cv ] mit der Methode querySelector() und verweisen das 2D-Zeichenkontextobjekt [ ctx ] mit Hilfe der Methode getContext() .

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

Außerdem müssen wir prüfen, ob die Zeichenfläche vom UA unterstützt wird, indem Sie sicherstellen, dass das Zeichnungskontextobjekt [ ctx ] existiert und nicht undefiniert ist . Wir werden den gesamten Code, der zu dem load -Ereignis gehört, in diese if Bedingung einfügen .

3. Erstellen Sie die Anfangsvariablen

Lassen Sie uns drei weitere globale Variablen erstellen, s für den Startwinkel des Bogens, tc für die ID für den setInterval() Timer und pct für den Prozentwert des gleichen Timers . Der Code tc = pct = 0 weist 0 als Anfangswert für die Variablen tc und pct .

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

Um zu zeigen, wie der Wert von s berechnet wurde, lassen Sie mich schnell erklären, wie die Winkel funktionieren.

Bogenwinkel

Der begrenzte Winkel (der Winkel, der aus den zwei Strahlen besteht, die einen Bogen definieren) des Umfangs eines Kreises beträgt 2π rad, wobei rad das Radianeinheitssymbol ist. Dies macht den Winkel für einen Viertelbogen gleich 0, 5 & pgr; rad .

Bei der Visualisierung des Ladevorgangs möchten wir, dass der Kreis auf der Leinwand von der oberen Position und nicht vom Standardrecht gezeichnet wird.

Im Uhrzeigersinn (der Standard-Richtungsbogen ist auf der Leinwand gezeichnet) von der richtigen Position, wird der obere Punkt nach drei Vierteln erreicht, dh in einem Winkel von 1, 5 & pgr; rad . Daher habe ich die Variable s = 1.5 * Math.PI um später den s = 1.5 * Math.PI für die Bögen zu s = 1.5 * Math.PI, die auf der Leinwand gezeichnet werden sollen.

4. Stil den Kreis

Für das Zeichnungskontextobjekt definieren wir die Eigenschaften lineWidth und strokeStyle des Kreises, den wir im nächsten Schritt zeichnen werden. Die Eigenschaft strokeStyle steht für ihre Farbe.

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

5. Zeichnen Sie den Kreis

Wir fügen einen Click-Event-Handler zur Load-Schaltfläche [ #lbtn ] hinzu, der einen setInterval-Timer von 60 Millisekunden auslöst, der die Funktion zum Zeichnen des Kreises [ updateLoader() ] alle 60 ms ausführt, bis der Kreis vollständig gezeichnet ist.

Die Methode setInterval() gibt eine Timer-ID zurück, um ihren Timer zu identifizieren, der der Variablen tc zugewiesen ist.

 onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) {s = 1.5 * Math.PI, tc = pct = 0, btn = dokument.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('Klicken', Funktion () {tc = setInterval (updateLoader, 60);}); }}; 

6. Erstellen Sie die benutzerdefinierte Funktion updateLoader()

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

 Funktion updateLoader () {ctx.clearRect (0, 0, 16, 16); ctx.beginPfad (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); if (pct === 100) {clearInterval (tc); Rückkehr; } pct ++; } 

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

Die Methode beginPath() erstellt einen neuen Pfad für die Zeichnung und die stroke() -Methode zeichnet diesen neu erstellten Pfad auf .

Am Ende der Funktion updateLoader() wird die Prozentzahl [ pct ] um 1 inkrementiert, und vor dem Inkrement prüfen wir , ob sie gleich 100 ist . Wenn es 100% ist, wird der setInterval() Timer (identifiziert durch die Timer-ID, tc ) mit Hilfe der clearInterval() -Methode clearInterval() .

Die ersten drei Parameter der arc() -Methode sind die (x, y) -Koordinaten des Mittelpunkts des Bogens und seines Radius . Der vierte und fünfte Parameter repräsentieren die Anfangs- und Endwinkel, bei denen die Zeichnung des Bogens beginnt und endet.

Wir haben bereits den Startpunkt des Loader-Kreises festgelegt, der im Winkel s, und er wird in allen Iterationen gleich sein .

Der Endwinkel wird jedoch mit der Prozentzahl erhöht, wir können die Größe des Inkrements auf folgende Weise berechnen. Sage 1% (der Wert 1 von 100) entspricht einem Winkel α von 2π in einem Kreis (2π = Winkel des gesamten Umfangs), dann kann dasselbe wie die folgende Gleichung geschrieben werden:

 1/100 = α / 2π 

Beim Umordnen der Gleichung:

 α = 1 · 2π / 100 α = 2π / 100 

Also entspricht 1% dem Winkel 2π / 100 in einem Kreis. Somit wird der Endwinkel während jedes Prozent-Inkrements durch Multiplizieren von 2 & pgr; / 100 mit dem Prozentwert berechnet . Dann wird das Ergebnis zu s hinzugefügt (Startwinkel), so dass die Bögen jedes Mal von der gleichen Startposition gezogen werden. Aus diesem Grund haben wir die Formel pct * 2 * Math.PI / 100 + s verwendet, um den pct * 2 * Math.PI / 100 + s im obigen Code-Snippet zu berechnen.

7. Fügen Sie das Favicon hinzu

Lassen Sie uns ein Favicon-Link-Element in den HTML- Code einfügen Abschnitt, entweder direkt oder über JavaScript.

In der Funktion updateLoader() holen wir zuerst das Favicon mit der Methode querySelector() und weisen es der Variable lnk . Dann müssen wir jedes Mal, wenn ein Bogen in ein codiertes Bild gezeichnet wird, das toDataURL() Bild mithilfe der toDataURL() -Methode toDataURL() und diesen Daten-URI-Inhalt als Favicon-Bild zuweisen . Dadurch wird ein animiertes Favicon erstellt, das dem Canvas-Loader entspricht .

 onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) {s = 1.5 * Math.PI, tc = pct = 0, btn = dokument.querySelector ('# lbtn'), lnk = document.querySelector ('link [rel = "icon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('Klicken', Funktion () {tc = setInterval (updateLoader, 60);}); }}; Funktion updateLoader () {ctx.clearRect (0, 0, 16, 16); ctx.beginPfad (); 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 auf Github ansehen.

Bonus: Verwenden Sie den Loader für asynchrone Ereignisse

Wenn Sie diese updateLoader() in Verbindung mit einer updateLoader() auf einer Webseite verwenden müssen, weisen Sie die Funktion updateLoader() als Ereignishandler für das Ereignis progress() der Aktion zu .

Zum Beispiel wird sich unser JavaScript in AJAX so ändern:

 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 ('Fortschritt', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); }; Funktion updateLoader (evt) {ctx.clearRect (0, 0, 16, 16); ctx.beginPfad (); ctx.arc (8, 8, 6, s, (evt.loaded * 2 * Math.PI / evt.total + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png'); } 

Ersetzen Sie in der arc() -Methode den Prozentwert [ pct ] durch die loaded Eigenschaft des Ereignisses. -it gibt an, wie viel von der Datei geladen wurde, und anstelle von 100 die total des ProgressEvent, das die Summe angibt zu ladende Menge.

In solchen Fällen ist setInterval() nicht erforderlich, da das Ereignis progress() beim progress() des Ladevorgangs automatisch ausgelöst wird .

Vital CSS - Ein minimal invasives Web-Framework

Vital CSS - Ein minimal invasives Web-Framework

Bewegen Sie sich über Bootstrap, da sich ein neues CSS-Framework in der Stadt befindet. Es nennt sich Vital und streift die Frontend-Entwicklung auf das Wesentliche ab .Vital kommt nur mit CSS und hat keine JavaScript-Bibliotheken oder Abhängigkeiten . Und das Vital.css-Stylesheet ist nur 31 KB verkleinert, einschließlich Icon-Fonts.Di

(Tech- und Design-Tipps)

Bearbeiten von Reisefotos: 8 Tipps, die Sie wissen sollten [Infografik]

Bearbeiten von Reisefotos: 8 Tipps, die Sie wissen sollten [Infografik]

Beim Reisen geht es gleichermaßen darum, zu entlasten und Spaß zu haben, denn es ist ein wichtiger Teil unseres Selbstwachstums. Das Leben ist ein Abenteuer und Reisefotos zeugen davon, dass die Welt ein großer, großer Ort ist, der es wert ist, erforscht zu werden.Wenn Sie viel reisen und gerne über Ihre Reisen berichten, möchten Sie vielleicht ein wenig Zeit damit verbringen, Ihre Fotos zu bearbeiten, bevor Sie sie teilen. Um I

(Tech- und Design-Tipps)