Den som Gör en Animerad Favicon

0
16

Det är det första dina ögon ser när du växlar flikar.

Det är ett sätt att förklara vad en favicon är. Fliken området är en mycket mer värdefulla skärmen-fastigheter än vad de flesta antar. Om gjort rätt, förutom att vara en etikett med en ikon, kan det vara den perfekta skylten för att representera vad som är eller vad som händer på en webbsida.

CSS-Tricks Favicon

Favicons är faktiskt som mest användbar när du inte är aktiv på en flik. Här är ett exempel:

Tänk dig att du säkerhetskopiera bilder från din senaste semester till en molntjänst. Samtidigt som de laddar upp, du har öppnat en ny flik för att samla in information om de platser du gick på semester för att senare kommentera dessa foton. En sak ledde till den andra, och nu är du titta på Casey Neistat på sjunde fliken. Men du inte kan fortsätta ditt YouTube-maraton utan ängsliga mellanrum för att kolla tillbaka på cloud service sida för att se om bilder har laddats upp.

Det är denna typ av situation där vi kan få kreativ! Tänk om vi kunde dynamiskt ändra pixlar på att favicon och visa upp framsteg? Det är precis vad vi ska göra i denna artikel.

I webbläsare som stöds, kan vi visa en lastning/framsteg animeringen som en favicon med hjälp av JavaScript, HTML <canvas> – och vissa flera hundra år gamla geometri.

Hoppa rakt in, vi börjar med den enklaste delen: att lägga till ikonen och canvas-element i HTML.

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

<body>
<duk bredd=höjd 32=32></canvas>
</body>

I praktisk användning, skulle du vill dölja <canvas> på sidan, och ett sätt att göra det är med en HTML-dolda attributet.

<duk dolda bredd=höjd 32=32></canvas>

Jag kommer att lämna <canvas> som syns på sidan för att du ska se både favicon och duk bilder animera tillsammans.

Både favicon och duken ges en standard favicon storlek: 32 kvadratiska pixlar.

För demo ändamål, för att utlösa laddar animation, jag lägger till en knapp på sidan som kommer att starta animeringen när du klickar. Detta går också i HTML-koden:

<knappen> > Ladda</button>

Låt oss nu ställa in JavaScript. För det första, en check på canvas stöd:

onload = ()=> {
duk = dokument.querySelector(‘canvas”),
context = canvas.getContext(‘2d’);
om (!!sammanhang) {
/* om canvas stöds */
}
};

Nästa, lägga till knappen klicka händelsehanterare som kommer att förmå animation i canvas.

knapp = dokument.querySelector (“knapp”);
– knappen.addEventListener (“klick”, function() {
/* En variabel för att spåra ritningen intervall */
n = 0,
/* Intervall hastighet för animation */
loadingInterval = setInterval(drawLoader, 60);
});

drawLoader kommer att vara den funktion som gör ritningen på intervall på 60 millisekunder varje, men innan vi koda det, jag vill att definiera formatet på de rader av torget dras. Låt oss göra en gradient.

/* Style av linjerna i den ruta som kommer att dras */
låt lutning = – sammanhang.createLinearGradient(0, 0, 32, 32);
gradient.addColorStop(0, ‘#c7f0fe’);
gradient.addColorStop(1, ‘#56d3c9’);
sammanhanget.strokeStyle = lutning;
sammanhanget.linjebredd = 8;

I drawLoader, vi ska dra linjer procent-vis: under de första 25 mellanrum, den översta raden kommer att stegvis dras; i det andra kvartalet, rätt linje som kommer att dras, och så vidare.

Animation effekt uppnås genom att radera <canvas> i varje intervall innan rita linje(s) från föregående intervall lite längre.

Under varje intervall, när ritningen är klar i arbetsytan, det är snabbt översätts till en PNG-bild att användas som favicon.

funktion drawLoader() {
med(sammanhang) {
clearRect(0, 0, 32, 32);
beginPath();
/* Upp till 25% */
if (n<=25){
/*
(0,0)—–(32,0)
*/
// kod för att dra den översta raden, stegvis
}
/* Mellan 25 till 50 procent. * /
else if(n>25 && n<=50){
/*
(0,0)—–(32,0)
|
|
(32,32)
*/
// kod för att rita upp och till höger linjer.
}
/* Mellan 50 till 75 procent */
else if(n>50 && n<= 75){
/*
(0,0)—–(32,0)
|
|
(0,32)—-(32,32)
*/
// kod för att rita topp, höger och botten linjer.
}
/* Mellan 75 till 100 procent. * /
else if(n>75 && n<=100){
/*
(0,0)—–(32,0)
| |
| |
(0,32)—-(32,32)
*/
// kod för att rita alla fyra rader av torget.
}
stroke();
}
// Konvertera Duken teckning till PNG och tilldela den till en favicon
favicon.href = canvas.toDataURL(‘image/png”);
/* När du är klar ritning */
if (n === 100) {
clearInterval(loadingInterval);
återvändande.
}
// Steg variabel som används för att hålla koll på ritningen mellanrum
n++;
}

Nu har matte och koden för att rita linjer.

Här är hur vi stegvis dra den översta raden på varje intervall under de första 25 intervaller:

n = aktuellt intervall,
x = x-koordinaten för linjens slutpunkt vid ett givet intervall.
(y-koordinat för slutpunkten är 0 och startpunkt för linjen är 0,0)

Vid slutförandet av alla 25 mellanrum, värdet av x 32 (storleken på favicon och duk.)

Så…

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

Koden för att tillämpa denna matematik och dra linjen är:

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

För de kommande 25 mellanrum (högra linjen), vi som mål y-koordinaten på samma sätt.

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

Och här är instruktioner för att rita alla fyra linjer med resten av koden.

funktion drawLoader() {
med(sammanhang) {
clearRect(0, 0, 32, 32);
beginPath();
/* Upp till 25% av den tid som tilldelats för att rita */
if (n<=25){
/*
(0,0)—–(32,0)
*/
moveTo(0, 0); lineTo((32/25)*n, 0);
}
/* Mellan 25 till 50 procent. * /
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));
}
/* Mellan 50 till 75 procent */
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);
}
/* Mellan 75 till 100 procent. * /
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();
}

// Konvertera Duken teckning till PNG och tilldela den till en favicon
favicon.href = canvas.toDataURL(‘image/png”);
/* När du är klar ritning */
if (n === 100) {
clearInterval(loadingInterval);
återvändande.
}
// Steg variabel som används för att hålla koll på ritning mellanrum
n++;
}

Det är allt! Du kan se och ladda ner demo-kod från den här GitHub repo. Bonus: om du letar efter en cirkulär loader, kolla in denna repa.

Du kan använda vilken form som helst du vill, och om du använder fylla attribut i duken teckning, som kommer att ge dig en annan effekt.