Het Maken van een Geanimeerde Favicon

0
9

Het is het eerste wat uw ogen kijken wanneer je voor het schakelen van tabbladen.

Dat is een manier van het uitleggen van wat een favicon is. De tab is een gebied met veel meer kostbare scherm real-estate dan wat de meeste aannemen. Als het goed gedaan is, naast het zijn van een label met pictogram, het kan de perfecte billboard te vertegenwoordigen wat het is of wat er gebeurt op een web pagina.

De CSS-Tricks Favicon

Favicons zijn eigenlijk op hun meest handig wanneer u niet actief op een tabblad. Hier is een voorbeeld:

Stel je voor dat je een back-up van foto ‘ s van de afgelopen zomervakantie naar een cloud-service. Terwijl ze aan het uploaden bent, je hebt een nieuw tabblad geopend voor het verzamelen van informatie over de plaatsen je ging op vakantie naar later annoteren die foto ‘ s. Van het één kwam het ander, en nu u aan het kijken bent Casey Neistat op de zevende tabblad. Maar je kunt niet doorgaan met je YouTube-marathon zonder de angstige tijdstippen van controle terug op de cloud service pagina om te zien of de foto ‘ s zijn geupload.

Het is dit soort situatie waar we creatief! Wat als we zouden kunnen dynamisch wijzigen van de pixels in dat favicon en weergeven van de voortgang van het uploaden? Dat is precies wat we gaan doen in dit artikel.

Ondersteunde browsers, kunnen we weer een laden/voortgang animatie als een favicon met behulp van JavaScript, HTML <canvas> en enkele eeuwen-oude geometrie.

Meteen in, we beginnen met de makkelijkste deel: het toevoegen van het pictogram en canvas elementen in de HTML.

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

<body>
<canvas breedte=32 hoogte=32></canvas>
</body>

In het praktische gebruik, je zou willen om te verbergen van de <canvas> op de pagina, en één manier om dat te doen is met het HTML-kenmerk verborgen.

<canvas verborgen width=32 hoogte=32></canvas>

Ik laat het <canvas> zichtbaar op de pagina, ziet u zowel de favicon en canvas beelden te animeren samen.

Zowel de favicon en het doek krijgt een standaard favicon grootte: 32 vierkante pixels.

Voor demo doeleinden, om u op gang te laden animatie, ik ben het toevoegen van een knop naar de pagina die de animatie start wanneer erop wordt geklikt. Dit geldt ook in de HTML-code:

<button>Vul</button>

Nu laten we het opzetten van de JavaScript. Eerst een check voor canvas ondersteuning:

onload = ()=> {
canvas = document.querySelector(‘canvas’),
context = canvas.getContext(‘2d’);
als (!!context) {
/* als canvas wordt ondersteund */
}
};

Naast het toevoegen van de knop klik op de gebeurtenis-handler wordt gevraagd de animatie in het doek.

knop = document.querySelector(‘button’);
knop.addEventListener(‘click’, function() {
/* Een variabele voor het bijhouden van de tekening intervallen */
n = 0,
/* Interval snelheid voor de animatie */
loadingInterval = setInterval(drawLoader, 60);
});

drawLoader wordt de functie van het tekenen op intervallen van 60 milliseconden, maar voordat we de code het, ik wil het definiëren van de stijl van de lijnen van het vierkant worden getrokken. We doen een verloop.

/* Style van de lijnen van het square, dat zal getrokken worden */
laat gradiënt = context.createLinearGradient(0, 0, 32, 32);
verloop.addColorStop(0, ‘#c7f0fe’);
verloop.addColorStop(1, ‘#56d3c9’);
de context.strokeStyle = gradiënt;
de context.de lijndikte lineWidth = 8;

In drawLoader, we trekken de lijnen procent-wijs: gedurende de eerste 25 intervallen, de bovenste regel zal stapsgewijs getrokken; in het tweede kwartaal, is de juiste lijn te worden getrokken; en zo voort.

Het animatie-effect wordt bereikt door het wissen van de <canvas> – in elk interval voor opnieuw tekenen van de regel(s) van het vorige interval een beetje langer.

Tijdens elk interval, zodra de tekening is uitgevoerd in canvas, het is snel vertaald naar een PNG-afbeelding die moet worden toegewezen als de favicon.

functie drawLoader() {
met(context) {
clearRect(0, 0, 32, 32);
beginPath();
/* Tot 25% */
if (n<=25){
/*
(0,0)—–(32,0)
*/
// code voor het tekenen van de bovenste regel, stapsgewijs
}
/* 25 tot 50 percent * * /
else if(n>25 && n<=50){
/*
(0,0)—–(32,0)
|
|
(32,32)
*/
// code voor het tekenen van de boven en rechts lijnen.
}
/* Tussen 50 tot 75 procent */
else if(n>50 && n<= 75){
/*
(0,0)—–(32,0)
|
|
(0,32)—-(32,32)
*/
// code voor het tekenen van de boven -, rechter-en onderzijde lijnen.
}
/* Tussen de 75 tot 100 procent */
else if(n>75 && n<=100){
/*
(0,0)—–(32,0)
| |
| |
(0,32)—-(32,32)
*/
// code om te tekenen alle vier de lijnen van het vierkant.
}
beroerte();
}
// Converteren het Doek tekening naar PNG en toewijzen aan de favicon
favicon.href = canvas.toDataURL(‘image/png’);
/* Wanneer u klaar bent met het tekenen */
if (n === 100) {
clearInterval(loadingInterval);
return;
}
// Toename van de variabele gebruikt voor het bijhouden van de tekening intervallen
n++;
}

Nu de wiskunde en de code voor het tekenen van de lijnen.

Hier is hoe we stapsgewijs het tekenen van de bovenste regel op elk interval tijdens de eerste 25 intervallen:

n = huidige interval,
x = x-coördinaat van de lijn het eindpunt op een gegeven interval.
(y-coördinaat van het eindpunt is 0 en begin punt van de lijn is 0,0)

Bij de voltooiing van alle 25 intervallen, is de waarde van x 32 (de grootte van de favicon en canvas.)

Dus…

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

De code voor het toepassen van deze wiskunde en tekenen van de lijn is:

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

Voor de komende 25 intervallen (rechts lijn), richten we ons op de y-coördinaat op dezelfde manier.

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

En hier is de instructie om te tekenen alle vier de lijnen met de rest van de code.

functie drawLoader() {
met(context) {
clearRect(0, 0, 32, 32);
beginPath();
/* Tot 25% van de tijd die is toegewezen aan te trekken */
if (n<=25){
/*
(0,0)—–(32,0)
*/
moveTo(0, 0); lineTo((32/25)*n, 0);
}
/* 25 tot 50 percent * * /
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));
}
/* Tussen 50 tot 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);
}
/* Tussen de 75 tot 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)));
}
beroerte();
}

// Converteren het Doek tekening naar PNG en toewijzen aan de favicon
favicon.href = canvas.toDataURL(‘image/png’);
/* Wanneer u klaar bent met het tekenen */
if (n === 100) {
clearInterval(loadingInterval);
return;
}
// Toename van de variabele gebruikt voor het bijhouden van het tekenen van intervallen
n++;
}

Dat is alles! Kunt u zien en te downloaden van de demo-code van dit GitHub repo. Bonus: als u op zoek bent naar een circulaire loader, check out deze repo.

U kunt gebruik maken van elke vorm die u wilt, en als u de vul-attribuut in het canvas te tekenen, dat geeft je een ander effect.