Das Making of, ein Animiertes Favicon

0
19

Es ist das erste, was Ihre Augen sehen können, wenn Sie Wechsel der tabs.

Das ist ein Weg, zu erklären, was ein favicon ist. Die Reiter Gegend ist ein sehr wertvoller Bildschirmfläche als das, was die meisten vermuten. Wenn richtig gemacht, abgesehen davon, dass ein label mit icon, es kann die perfekte Werbetafel zu stellen, was ist in oder was ist passiert auf einer web-Seite.

Die CSS-Tricks Favicon

Favicons sind eigentlich am meisten nützlich, wenn Sie nicht aktiv auf eine Registerkarte. Hier ein Beispiel:

Stell dir vor, du bist das sichern der Fotos von Ihren letzten Sommer-Urlaub, um einen cloud-service. Während Sie hochladen, Sie haben eröffnet eine neue Registerkarte zu sammeln details über die Orte, die Sie ging in den Urlaub, um später kommentieren die Fotos. Eins führte zum anderen und jetzt sind Sie gerade Casey Neistat auf dem siebten tab. Aber Sie können nicht weiterhin Ihren YouTube-marathon ohne die ängstliche Abständen zu überprüfen, zurück auf den cloud-service-Seite, um zu sehen, wenn die Fotos hochgeladen wurden.

Es ist diese Art von situation, in der wir kreativ werden! Was wäre, wenn wir dynamisch die Pixel ändern, in der das favicon und die Anzeige der upload-Fortschritt? Das ist genau das, was wir tun in diesem Artikel.

In unterstützten Browsern angezeigt werden können, eine be – /progress-animation als favicon mit Hilfe von JavaScript -, HTML – <canvas> und einige Jahrhunderte alte geometrie.

Springen gerade ein, wir fangen mit dem einfachsten Teil: dem hinzufügen des icon-und canvas-Elemente auf der HTML.

<head>
<link rel=”icon” type=”image/png” href=”” width=32px>
</head>

<body>
<canvas width=32 height=32></canvas>
</body>

In der Praxis würden Sie wollen, zu verbergen, die das <canvas> – auf der Seite, und ein Weg, dies zu tun ist mit dem HTML-Attribut “hidden”.

<canvas hidden width=32 height=32></canvas>

Ich werde das <canvas> – auf der Seite sichtbar für Sie, um zu sehen, sowohl das favicon und Leinwand Bilder animieren, zusammen.

Sowohl das favicon und die Leinwand sind ein standard-favicon-Größe: 32 quadratische Pixel.

Für demo-Zwecke, um die zum auslösen der animation zum laden, ich bin das hinzufügen einer Schaltfläche, um die Seite zum starten der animation, wenn geklickt wird. Geht das auch in HTML:

<button>Laden</button>

Legen Sie nun die JavaScript. Zuerst eine Prüfung für die canvas-Unterstützung:

onload = ()=> {
canvas = document.querySelector(‘Leinwand’),
context = canvas.getContext(‘2d’);
wenn (!!context) {
/* wenn die Leinwand unterstützt wird */
}
};

Weiter, das hinzufügen der Schaltfläche click-Ereignis-handler, der aufgefordert wird, die animation im canvas-Bereich.

button = document.querySelector(‘button’);
– Taste.addEventListener(‘click’, function() {
/* Eine variable zu verfolgen, die Zeichnung Intervalle */
n = 0,
/* Intervall Geschwindigkeit für die animation */
loadingInterval = setInterval(drawLoader, 60);
});

drawLoader werden der Funktion dabei die Zeichnung in Abständen von 60 Millisekunden jeder, aber bevor wir den code, möchte ich definieren den Stil der Linien des Quadrates gezeichnet. Machen wir einen Farbverlauf.

/* Stil der Linien des Platzes, der Sie gezeichnet werden */
lassen gradient = Kontext.createLinearGradient(0, 0, 32, 32);
gradient.addColorStop(0, ‘#c7f0fe’);
gradient.addColorStop(1, ‘#56d3c9’);
Kontext.strokeStyle = gradient;
Kontext.lineWidth = 8;

In drawLoader zeichnen wir die Linien-Prozent-Weise: während der ersten 25 Intervallen, die Obere Linie wird schrittweise gezeichnet; im zweiten Quartal, die richtige Linie gezogen werden; und so weiter.

Die animation wird erreicht, indem beim löschen die <canvas> in jedem Intervall vor dem Neuzeichnen die Zeile(N) aus dem vorherigen Intervall etwas länger.

Während jedem Intervall, sobald die Zeichnung fertig ist die Leinwand, es ist schnell übersetzt, um ein PNG-Bild zugeordnet werden, wie das favicon.

Funktion drawLoader() {
mit(context) {
clearRect(0, 0, 32, 32);
beginPath();
/* Bis zu 25% */
if (n<=25){
/*
(0,0)—–(32,0)
*/
// code zum zeichnen der oberen Zeile, inkrementell
}
/* Zwischen 25 bis 50 Prozent */
else if(n>25 && n<=50){
/*
(0,0)—–(32,0)
|
|
(32,32)
*/
// code zum zeichnen der oberen und rechten Linien.
}
/* Zwischen 50 bis 75 Prozent */
else if(n>50 && n<= 75){
/*
(0,0)—–(32,0)
|
|
(0,32)—-(32,32)
*/
// code zum zeichnen der oberen, rechten und unteren Linien.
}
/* Zwischen 75 bis 100 Prozent */
else if(n>75 && n<=100){
/*
(0,0)—–(32,0)
| |
| |
(0,32)—-(32,32)
*/
// code zum zeichnen der alle vier Zeilen des Platzes.
}
stroke();
}
// Konvertieren der Canvas-Zeichnung als PNG-und zuordnen, um das favicon
favicon.href = canvas.toDataURL(‘image/png’);
/* Wenn die Zeichnung abgeschlossen */
if (n === 100) {
clearInterval(loadingInterval);
return;
}
// Inkrementieren der variable verwendet, um zu verfolgen die Zeichnung Abständen
n++;
}

Nun zu den Mathematik-und den code für das zeichnen der Linien.

Hier ist, wie wir schrittweise zeichnen Sie die Obere Linie bei jedem Intervall während der ersten 25 Intervalle:

n = aktuelle Intervall,
x = x-Koordinate Ende der Zeile Punkt in einem bestimmten Intervall.
(y-Koordinate von Endpunkt 0 und Startpunkt der Linie ist 0,0)

Bei der Fertigstellung der 25-Intervalle, der Wert von x ist 32 (die Größe des Favicons und Leinwand.)

So…

x/n = 32/25
x = (32/25) * n

Der code für diesen Mathe und zeichnen der Linie ist:

moveTo(0, 0); lineTo((32/25)*n, 0);

Für die nächsten 25 Zeitintervalle (die Rechte Linie), wir haben das Ziel, die y-Koordinate Analog.

moveTo(0, 0); lineTo(32, 0);
moveTo(32, 0); lineTo(32, (32/25)*(n-25));

Und hier ist die Anleitung zum zeichnen von allen vier Linien mit dem rest des Codes.

Funktion drawLoader() {
mit(context) {
clearRect(0, 0, 32, 32);
beginPath();
/* Bis zu 25% der Zeit zugeordnet zu zeichnen */
if (n<=25){
/*
(0,0)—–(32,0)
*/
moveTo(0, 0); lineTo((32/25)*n, 0);
}
/* Zwischen 25 bis 50 Prozent */
else if(n>25 && n<=50){
/*
(0,0)—–(32,0)
|
|
(32,32)
*/
moveTo(0, 0); lineTo(32, 0);
moveTo(32, 0); lineTo(32, (32/25)*(n-25));
}
/* Zwischen 50 bis 75 Prozent */
else if(n>50 && n<= 75){
/*
(0,0)—–(32,0)
|
|
(0,32)—-(32,32)
*/
moveTo(0, 0); lineTo(32, 0);
moveTo(32, 0); lineTo(32, 32);
moveTo(32, 32); lineTo(-((32/25)*(n-75)), 32);
}
/* Zwischen 75 bis 100 Prozent */
else if(n>75 && n<=100){
/*
(0,0)—–(32,0)
| |
| |
(0,32)—-(32,32)
*/
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();
}

// Konvertieren der Canvas-Zeichnung als PNG-und zuordnen, um das favicon
favicon.href = canvas.toDataURL(‘image/png’);
/* Wenn die Zeichnung abgeschlossen */
if (n === 100) {
clearInterval(loadingInterval);
return;
}
// Inkrementieren der variable verwendet, um zu verfolgen Zeichnung Abständen
n++;
}

Das ist alles! Sie können sehen, und laden Sie die demo-code aus diesem GitHub repo. Bonus: wenn Sie auf der Suche für eine kreisförmige loader, check-out dieser repo.

Sie können jede Form, die Sie wollen, und wenn Sie das fill-Attribut in der canvas-Zeichnung, geben Sie einen anderen Effekt.