Å Lage en Animert Favicon

0
16

Det er den første tingen dine øyne se etter når du bytter faner.

Det er en måte å forklare hva et favicon er. Kategorien området er et mye mer dyrebart skjermen eiendomsmegling enn hva de fleste anta. Hvis det gjøres riktig, i tillegg til å være en etikett med ikonet, kan det være den perfekte billboard til å representere hva som er i eller hva som skjer på en web-side.

CSS-Triks Favicon

Favicons er faktisk på sitt mest nyttig når du ikke er aktiv på en kategori. Her er et eksempel:

Forestill deg at du sikkerhetskopiere bilder fra de siste sommerferie til en sky-tjeneste. Mens de laster opp, du har åpnet en ny fane for å samle informasjon om de stedene du dro på ferie til senere å kommentere disse bildene. En ting førte til det andre, og nå som du ser på Casey Neistat på den syvende kategorien. Men du kan ikke fortsette YouTube-maraton uten engstelig mellomrom for å sjekke tilbake på cloud service siden for å se om bildene er lastet opp.

Det er denne type situasjon der vi kan få kreative! Hva hvis vi kan dynamisk endre punkter i at favicon og viser laste fremgang? Det er akkurat hva vi skal gjøre i denne artikkelen.

I nettlesere som støttes, kan vi vise et lasting/fremgang animasjonen som en favorittikon med hjelp av JavaScript, HTML <lerret> og noen århundrer gamle geometri.

Å hoppe rett i det, vil vi starte med den enkleste delen: å legge ikonet og lerret elementer til HTML.

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

<body>
<lerret bredde=32 høyde=32></lerret>
</body>

I praktisk bruk, vil du ønsker å skjule <lerret> på siden, og en måte å gjøre dette på er med HTML skjulte attributtet.

<lerret skjulte bredde=32 høyde=32></lerret>

Jeg kommer til å forlate <lerret> synlig på siden for deg å se både favicon og lerret bilder animere sammen.

Både favicon og lerretet er gitt en standard favicon størrelse: 32 square punkter.

For demo formål, for å utløse lasting animasjon, jeg legger til en knapp på siden som vil starte animasjonen når den klikkes. Dette gjelder også i HTML-koden:

<- knappen>Fyll</button>

La oss nå sette opp JavaScript. Først, en sjekk på lerret støtte:

onload = ()=> {
lerret = – dokument.querySelector(‘lerret’),
context = lerret.getContext(‘2d’);
hvis (!!kontekst) {
/* dersom lerretet er støttet */
}
};

Neste, og legger til knappen klikk event handler som vil be animasjon i lerretet.

knappen = – dokument.querySelector(‘knappen’);
knappen.addEventListener(‘click’, function() {
/* En variabel til å spore tegning mellomrom */
n = 0,
/* Intervall hastighet for animasjon */
loadingInterval = setInterval(drawLoader, 60);
});

drawLoader vil være funksjonen gjør tegningen i intervaller på 60 millisekunder hvert, men før vi code det, jeg ønsker å definere stilen av linjene av torget for å bli trukket. La oss gjøre en gradient.

/* Stil av linjene av plassen som vil bli trukket */
la gradient = kontekst.createLinearGradient(0, 0, 32, 32);
gradient.addColorStop(0, ‘#c7f0fe’);
gradient.addColorStop(1, ‘#56d3c9’);
sammenheng.strokeStyle = gradient;
sammenheng.lineWidth = 8;

I drawLoader, vil vi trekke linjer prosent-messig: i løpet av de første 25 intervaller, den øverste linjen vil bli trinnvis trukket; i andre kvartal, rett linje vil bli trukket, og så videre.

Animasjon effekt er oppnådd ved å slette <lerret> i hvert intervall før redrawing linjen(e) fra forrige intervall litt lenger.

I løpet av hvert intervall, når tegningen er ferdig på lerret, det er raskt oversatt til et PNG-bilde til tildeles som favicon.

funksjonen drawLoader() {
med(kontekst) {
clearRect(0, 0, 32, 32);
beginPath();
/* Inntil 25% */
if (n<=25){
/*
(0,0)—–(32,0)
*/
// kode for å trekke den øverste linjen, inkrementelt
}
/* Mellom 25 og 50 prosent */
else if(n>25 && n<=50){
/*
(0,0)—–(32,0)
|
|
(32,32)
*/
// kode for å trekke toppen og rette linjer.
}
/* Mellom 50 til 75 prosent */
else if(n>50 && n<= 75){
/*
(0,0)—–(32,0)
|
|
(0,32)—-(32,32)
*/
// kode for å trekke den øverste, høyre og nederste linjene.
}
/* Mellom 75 til 100 prosent */
else if(n>75 && n<=100){
/*
(0,0)—–(32,0)
| |
| |
(0,32)—-(32,32)
*/
// kode for å trekke alle de fire linjene av plassen.
}
hjerneslag();
}
// Konverter Lerret tegning til PNG og tilordne den til favicon
favicon.href = lerret.toDataURL(‘image/png’);
/* Når du er ferdig tegning */
if (n === 100) {
clearInterval(loadingInterval);
tilbake;
}
// Økning i variabel som brukes til å holde styr på tegning mellomrom
n++;
}

Nå til matematikk og koden for å tegne linjene.

Her er hvordan vi trinnvis trekke den øverste linjen på hver intervall i løpet av de første 25 intervaller:

n = aktuelle intervallet,
x = x-koordinaten for linje er endepunktet på et gitt intervall.
(y-koordinat på slutten poeng er 0 og begynner å peke på linje 0,0)

Ved ferdigstillelse av alle 25 intervaller, verdien av x 32 (størrelsen på ikonet og lerret.)

Så…

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

Koden gjelder dette matematikk og trekke linjen er:

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

For de neste 25 intervaller (rett linje), vi målrette y-koordinaten på samme måte.

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

Og her er instruksjoner for å tegne alle de fire linjer med resten av koden.

funksjonen drawLoader() {
med(kontekst) {
clearRect(0, 0, 32, 32);
beginPath();
/* Inntil 25% av tiden som er tilordnet til å tegne */
if (n<=25){
/*
(0,0)—–(32,0)
*/
moveTo(0, 0); lineTo((32/25)*n, 0);
}
/* Mellom 25 og 50 prosent */
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));
}
/* Mellom 50 til 75 prosent */
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);
}
/* Mellom 75 til 100 prosent */
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)));
}
hjerneslag();
}

// Konverter Lerret tegning til PNG og tilordne den til favicon
favicon.href = lerret.toDataURL(‘image/png’);
/* Når du er ferdig tegning */
if (n === 100) {
clearInterval(loadingInterval);
tilbake;
}
// Økning i variabel som brukes til å holde styr på tegning mellomrom
n++;
}

Det er alt! Du kan se og laste ned demo-koden fra denne GitHub-repo. Bonus: hvis du leter etter en sirkulær loader, sjekk ut denne repo.

Du kan bruke en hvilken som helst form du ønsker, og hvis du bruker fyll attributt i lerretet tegning, som vil gi deg en annen effekt.