Skrevet af den

Effektive animationer med Sprites

Via sprites-animation kan du med ganske få linjers kode tilføje små, lette animationer på dine websider. Da denne teknik udelukkende anvender CSS og JavaScript, virker animationen i alle gængse browsere, uden der skal installeres plugins eller lignende. Derudover får du langt mere kontrol over animationen og kan time andre JavaScript-events til animationen.

På Makeables forside anvender vi animerede sprite-animationer

På Makeables forside anvender vi animerede Sprite-animationer

I forbindelse med udviklingen af slideshowet på vores tidligere forside (kunne man trykke på en playknap) fik vi behov for at implementere en grafisk timer, med en animeret nedtælling på – i vores tilfælde – 6 sekunder. Animationen bruges til at indikere, hvornår det automatiske skifte mellem de enkelte slides foregår.

Den umiddelbare løsning ville være at lave en gif-animation, med en varighed på 6 sekunder. Men eftersom GIF-filer ikke renderes éns i alle browsere, ville vi ikke kunne være sikre på, at slideshow og timeranimation ville følges ad. Vi blev derfor nødt til at tænke lidt ud af boksen. Resultatet endte med anvendelsen af Sprites som animationsteknik. En teknik som oprindeligt stammer fra 70’ernes spilkonsoller.

Sådan fungerer Sprites

Rent teknisk fungerer en Sprite-animation lidt på samme måde som en gammeldags smalfilm: Hver enkelt billede (frame) i animationen placeres side om side i ét lang billede (ligesom i en filmstrimmel). Dette billede placeres så som et baggrundsbillede (via CSS). Animationen udføres herefter ved at flytte baggrundsbilledets position, svarende til én frames bredde i et passende tempo (via JavaScript) og voilà – du har nu en animation udelukkende ved hjælp af CSS og JavaScript.

Fordele ved Sprites

Den helt store fordel ved Sprites-teknikken frem for animerede gif-filer er, som nævnt, den større grad af kontrol, men også at du med PNG-billeder kan lave animationer med f.eks. halvgennemsigtighed, hvilket GIF-animationer ikke understøtter. Ved anvendelsen af PNG-filer vil du også i nogle tilfælde kunne opnå mindre filstørrelser end GIF.