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.
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).
Belastung 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 .
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.100 die total des ProgressEvent
In solchen Fällen ist setInterval() nicht erforderlichprogress() beim progress() des Ladevorgangs automatisch ausgelöst wird .
Google Hangouts macht den Enterprise Switch mit Meet
Während die verbraucherorientierte Version von Google Hangouts möglicherweise tot ist, lebt der Geist von Hangouts in einer neuen Videokonferenz-App weiter, die Google "Meet" nennt.Derzeit nur als webbasierte Plattform verfügbar, scheint Meet by Google Hangouts Teil der Google G Suite-Produkte zu sein, obwohl das Feature auf der G Suite-Seite noch nicht als solches gelistet ist.La
(Tech- und Design-Tipps)
Freelance Anfänger Tipps: Die zu vermeidenden Fallstricke
Wenn Sie sich immer noch nicht sicher sind, ob Sie freiberuflich arbeiten oder nicht, haben Sie wahrscheinlich die Möglichkeit, sich vorzustellen, wie das Leben als Vollzeit-Freiberufler aussieht. Sie haben wahrscheinlich schon von den vielen großartigen Freiberuflern gehört, aber Sie wollen immer noch wissen, ob es auf der anderen Seite wirklich sonnig und grün ist.Wie
(Tech- und Design-Tipps)
de.hideout-lastation.com
1. Erstellen Sie die 
