Geavanceerde animaties voor de website, webshop, webapp EN native iOS / Android Apps

Een bewegend beeld dient om aandacht te trekken, als je vaker mijn blog leest herken je dit. En daarover is iets nieuws te melden.

Beweging is een sterk middel om een gebruiker te begeleiden en op speelse wijze feedback te geven. Daarom zien we al enige tijd dat elementen op het web worden voorzien van een animatie. HTML5 in combinatie met CSS3 bieden ingebouwde functionaliteiten om elementen van standaard animaties te voorzien, waardoor je geen data-zware gif afbeelding meer hoeft te gebruiken om een onderdeel bijvoorbeeld iets omhoog en omlaag te bewegen of om de transparantie en dergelijke aan te passen.

Er is niks mis met deze standaard animatietechnieken, een creatief Iemand kan er, ondanks de beperkingen, een heel eind mee komen. Maar we vragen ons zoals altijd af, ‘kan het nog leuker en mooier?’ En ja, dat kan. En ook zonder daarvoor enorme, mobiel-onvriendelijke bestanden te moeten maken.

After Effects motion graphics

Het echte animeren doe je bijvoorbeeld met Adobe After Effects (AE). Hierin maak je niet de gewone simpele animaties, maar echte motion graphics die je tot in detail kunt aanpassen voor omvangrijke animaties die toch vloeiend draaien. Als je dat in CSS wil doen kost het je dagen programmeren, terwijl het in AE, met de juiste kennis daarvan, nu veel sneller en netter kan.

web begrijpelijke bestanden met maar een fractie van de eerdere omvang

AE animaties kon je eerder óf naar een GIF omzetten, met bijbehorend verlies van website-snelheid, óf je koos voor een snellere website en daarmee niet voor een gif, maar voor een eenvoudigere CSS-gedreven animatie. Voortaan hoef je niet meer te kiezen, want je kunt je AE-creaties nu omzetten naar voor het web begrijpelijke bestanden met maar een fractie van de eerdere omvang.

Vectoren

Je kunt ook nog afbeeldingen zoals een JPG of PNG toevoegen, en soms is dat zelfs nodig om een animatie compleet te maken, maar daarmee wordt de totale bestandsomvang wel ineens weer veel groter. Als dat niet echt móet, niet doen. De truc is om je animatie geheel met vectoren te maken, dus met vormen die geen pixels bevatten en daarom zonder enig kwaliteitsverlies groter en groter gemaakt kunnen worden.

Een animatie van 3 seconden met alleen vectoren is ~10KB groot. Met één PNG erin wordt dat meteen ~100KB!

JSON en Javascript

Hoewel JSON (codetaal gebaseerd op Javascript) in essentie bedoeld is voor de communicatie tussen een server en een website/applicatie, blijkt die ook voor andere toepassingen een goede datadrager te zijn. De animatie wordt opgedeeld in stukken code en opgeslagen in een heel lange regel die min of meer de blauwdruk is van de vormen, bewegingen en timings.

hoewel het een enorme lap code is, wordt dat allemaal in milliseconden uitgelezen en gepresenteerd

Voor het ontcijferen van die regel wordt gebruik gemaakt van Javascript. Dat script pakt de data op en laat de browser weten hoe de animatie aan de front-end zijde gerenderd moet worden.

In essentie maak je dus een animatie en render je die niet naar een beeld, maar naar een blauwdruk die is verpakt in een JSON drager. Een script dat je op je server plaatst en waarnaar je in de code refereert, ontvangt dit, leest het uit en zet het om naar een visual. En hoewel het een enorme lap code is, wordt dat allemaal in milliseconden uitgelezen en gepresenteerd.

Ook voor apps

Deze animaties zijn niet alleen in een website, webshop of webapp te gebruiken, maar ook in native iOS- en Android apps. Ook daarin was het vroeger veel meer werk om een animatie aan te kleden met sprites of particle engines. De apps kunnen nu, net als een website, de drager uitlezen en de animatie in volle glorie tonen.

Deze techniek heeft daarom de potentie om in de toekomst nog veel meer gebruikt te gaan worden en kan mogelijk ook jouw producten voorzien van prachtige content. Als dat je goed in de oren klinkt, hoor ik het graag...

Toepassen

Maakt dit de andere animaties overbodig? Nee. Het is een mooie aanvulling die keuzes creëert om te variëren, om waar nodig accenten te leggen en om een professionelere uitstraling te verkrijgen. Maar als je bijvoorbeeld een mooie marketing banner-set maakt voor externe websites, kun je die animaties waarschijnlijk beter achterwege laten. Het basisbestand om dit werkend te krijgen is namelijk 250 - 500 KB en past dat wel in je plannen? Je moet dus per inzet bepalen of het een waardevolle toevoeging voor je is, of misschien toch wat teveel van het goede.

Dus: geniet ervan, maar gebruik met mate...