Dies ist das erste, wonach sie suchen, wenn sie zwischen Browser-Registerkarten wechseln. Wir haben gerade eine der möglichen Beschreibungen eines sogenannten Favikons gegeben. Der Bildschirmbereich, der die Registerkarte einer Webseite einnimmt, ist eine viel wertvollere Ressource, als viele Leute denken. Wenn Sie gut mit dem Etikett arbeiten, kann es nicht nur weiterhin die Rolle der Seitenkennung spielen, sondern auch zu einem „Message Board“ werden, das Ihnen sagt, was genau auf der Seite passiert.
FaviconDie Favoriten sind in der Tat besonders nützlich, wenn es um inaktive Browser-Registerkarten geht. Betrachten Sie ein Beispiel.
Angenommen, Sie laden Fotos, die in den letzten Sommerferien aufgenommen wurden, über die Webseite eines Cloud-Dienstes hoch. Während Fotos hochgeladen werden, öffnen Sie eine neue Browser-Registerkarte, um Details zu den Orten zu finden, an denen Sie sich befanden, und verwenden Sie diese in Bildunterschriften. Während Sie nach all dem suchen, klammert sich einer an den anderen, und jetzt sehen Sie Casey Neistat auf der siebten Registerkarte des Browsers. Du kannst deinen YouTube-Marathon jedoch nicht sicher fortsetzen. Sie überprüfen regelmäßig die Cloud-Service-Seite, um festzustellen, ob Ihre Fotos bereits hochgeladen wurden.
Dies ist nur dann der Fall, wenn Sie kreativ sein können! Was wäre, wenn wir die Pixel, aus denen das Favicon besteht, dynamisch ändern und Informationen zum Datei-Upload auf der Seitenverknüpfung anzeigen könnten? In der Tat werden wir dies hier tun.
In Browsern, die dies unterstützen, können Sie einige Animationen als Favicon mit JavaScript, dem HTML-
<canvas> und alten Geometrieregeln anzeigen.
So sieht die Ladeanimation auf der Registerkarte "Browser" aus.
Machen Sie sich sofort an die Arbeit und beginnen Sie mit den einfachsten. Fügen Sie nämlich die Elemente
<link> und
<canvas> zum HTML-Code der Seite hinzu:
<head> <link rel="icon" type="image/png" href="" width=32px> </head> <body> <canvas width=32 height=32></canvas> </body>
Wenn Sie diese Technik in der Praxis anwenden, möchten Sie wahrscheinlich das
<canvas> ausblenden. Eine Möglichkeit, dies zu tun, besteht darin, das
hidden HTML-Attribut zu verwenden:
<canvas hidden width=32 height=32></canvas>
Ich werde das
<canvas> sichtbar lassen, damit wir sehen können, wie die Animation gleichzeitig sowohl im Favicon als auch im
<canvas> angezeigt wird. Beide haben die Größe eines Standard-Favicons - 32x32 Pixel.
Zu Demonstrationszwecken fügen wir der Seite eine Schaltfläche hinzu, auf die geklickt wird, um die Animation zu starten. Fügen Sie dem HTML-Code der Seite Folgendes hinzu:
<button>Load</button>
Kommen wir nun zum JavaScript-Code. Lassen Sie uns zuerst die
canvas Unterstützung überprüfen:
onload = ()=> { canvas = document.querySelector('canvas'), context = canvas.getContext('2d'); if (!!context) { } };
Weiter - Verbinden Sie den Ereignishandler für Schaltflächenklicks, mit dem die Animation im
<canvas> gestartet wird:
button = document.querySelector('button'); button.addEventListener('click', function() { n = 0, loadingInterval = setInterval(drawLoader, 60); });
Die
drawLoader Entität, die wir an
setInterval ist eine Funktion, die in Intervallen von 60 Millisekunden aufgerufen wird und etwas an das
<canvas> ausgibt. Bevor wir den Code für diese Funktion schreiben, beschreiben wir den Linienstil, mit dem wir nach und nach ein Quadrat zeichnen, das ein Ladeindikator ist.
let gradient = context.createLinearGradient(0, 0, 32, 32); gradient.addColorStop(0, '#c7f0fe'); gradient.addColorStop(1, '#56d3c9'); context.strokeStyle = gradient; context.lineWidth = 8;
In der
drawLoader Funktion zeichnen wir Linien basierend darauf, wie viele Prozent der Animationsschritte bereits abgeschlossen wurden. In unserem Fall entspricht 1 Animationsschritt 1%. Während der ersten 25% der Schritte wird nämlich allmählich eine Linie angezeigt, die die Oberseite des Quadrats darstellt. Die nächsten 25% der Schritte zeigen die rechte Seite des Quadrats usw. an - 25% der Animationszeit auf jeder Seite.
Der Animationseffekt wird erzielt, indem der Inhalt des
<canvas> gelöscht und im Vergleich zum vorherigen Schritt eine leicht verlängerte Linie ausgegeben wird. Bei jedem Schritt der Animation wird das Bild nach Abschluss der Ausgabe des Bilds an das
<canvas> schnell in das PNG-Format konvertiert und als Seitenfavikon festgelegt.
function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); if (n<=25){
Lassen Sie uns nun die Berechnungen durchführen, die uns helfen, die erforderlichen Linien zu ziehen.
Die folgenden Daten werden verwendet, um die Oberseite des Quadrats während der ersten 25 Schritte der Animation schrittweise auszugeben:
- Der Startpunkt ist die obere linke Ecke des Bildes (0,0).
- n ist die Nummer des aktuellen Animationsschritts.
- x ist die
x Koordinate des Endpunkts der Linie im aktuellen Animationsschritt. - y ist die
y Koordinate des Endpunkts, die 0 ist.
Nach Abschluss aller 25 Animationsschritte wäre der Wert von
x 32 (dh die Größe des Favicons und des
<canvas> ). Daher werden wir im aktuellen Animationsschritt
n nach dem Wert von
x nach der folgenden Formel suchen:
x = (32/25) * n
So sieht der Strichzeichnungscode aus, in dem diese Argumentation implementiert ist:
moveTo(0, 0); lineTo((32/25)*n, 0);
Die folgenden 25 Animationsschritte (Zeichnen der rechten Seite des Quadrats) werden auf ähnliche Weise ausgeführt:
moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25));
Und hier ist der vollständige Code der
drawLoader Funktion:
function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); if (n<=25){ moveTo(0, 0); lineTo((32/25)*n, 0); } else if(n>25 && n<=50){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25)); } else if(n>50 && n<= 75){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(-((32/25)*(n-75)), 32); } else if(n>75 && n<=100){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(0, 32); moveTo(0, 32); lineTo(0, -((32/25)*(n-100))); } stroke(); }
Zusammenfassung
Das ist alles! Der Code zum Erstellen eines rechteckigen Ladeindikators, den wir hier entwickelt haben, befindet sich in
diesem Repository. Und
hier ist das Repository mit dem Download-Rundschreiben-Indikatorcode. Tatsächlich können Sie als ähnlicher Indikator jede Form verwenden. Wenn Sie mit dem
fill des
<canvas> , können Sie auf diese Weise interessante Effekte erzielen.
Liebe Leser! Gibt es Projekte in Ihrer Nähe, die von animierten Favoriten profitieren würden?
