Verdiep je er verder in door onze startershandleiding voor animatie te lezen.
De complete handleiding voor versnelling in animaties.
Of je animatie nu rechttoe rechtaan is of surrealistisch, het is belangrijk dat alles geloofwaardig overkomt. Als we bewegingen creëren in animaties, verwachten de kijkers een bepaalde mate van authenticiteit. Versnelling in animaties is een overgangsmethode waarmee bewegingen minder houterig en schokkerig worden gemaakt. In een softwareprogramma zoals After Effects, Premiere Pro en Animate kun je bepalen wanneer versnelling wordt toegepast door keyframes in de tijdlijn van de animatie te plaatsen. In deze handleiding laten we zien hoe je dat doet.
Wat is versnelling in animaties?
Als versnelling in animaties wordt toegepast, zien bewegingen er natuurlijker en organischer uit. In een lineaire animatie, waarin geen versnelling is toegepast, zijn de bewegingen mechanisch en kan het tempo niet worden verlaagd of verhoogd. Omdat zo'n constante snelheid in het echt niet voorkomt, komen deze bewegingen onnatuurlijk op ons over.
In het echt houden bewegende objecten niet de hele tijd dezelfde snelheid: ze beginnen langzaam, vervolgens gaan ze sneller en daarna gaan ze weer langzamer als ze moeten stoppen.
Het is net als bij autorijden: je trekt op vanuit stilstand, gaat sneller rijden en houdt die snelheid een tijdje aan en aan het einde van de rit ga je langzamer rijden om te stoppen.
Deze bewegingen komen overeen met de belangrijkste versnellingsfuncties waarmee je in je animatiewerk te maken krijgt. Daarmee maak je bewegingen een stuk organischer.
- Ease in: de animatie begint langzaam, gaat vervolgens sneller en komt tot stilstand.
- Ease out: de animatie begint snel, gaat vervolgens langzamer en komt tot stilstand.
- Ease-in-out: een combinatie van deze twee.
Hoe werkt versnelling?
Als je een bepaald object animeert, moet je markeringen (de zogenoemde keyframes) instellen om het begin- en eindpunt van de beweging aan te geven.
Zoals de naam al aangeeft, is een keyframe (sleutelframe) een belangrijk frame waarmee een waarde in de tijdlijn wordt ingesteld op basis waarvan het systeem kan berekenen hoe alle frames tussen de keyframes moeten functioneren.
De keyframes geven als het ware instructies voor het wijzigen van de waarde voor elke animatie die tussen de keyframes voorkomt. De versnelling die je toepast op de animatie tussen de keyframes, bepaalt hoe het object beweegt.
Wat zijn de voordelen van versnelling?
Met versnelling kun je beweging aanpassen om zo de ervaring van kijkers te beïnvloeden. Hier volgen enkele voordelen die versnelling kan bieden voor je animaties:
- Het is menselijk. Lineaire beweging komt in het echt niet voor. Dus als we lineaire beweging in animaties gebruiken, leidt dat tot vlakke, schokkerige bewegingen die de kijker als onnatuurlijk ervaart. Realisme en natuurlijkheid zijn essentieel om je keyframebewegingen herkenbaar en geloofwaardig maken.
- Het is realistisch. Dankzij versnelling krijgt een kijker de tijd om te verwerken wat er allemaal gebeurt. Versnelling zorgt ervoor dat de animatie vloeiend verloopt en natuurlijk en organisch aanvoelt, zodat de kijkers niet worden afgeleid en helemaal meegaan in het verhaal.
- Het is levendig. Versnelling kan ook worden gebruikt om een komisch of dramatisch effect te bewerkstelligen. Neem bijvoorbeeld ease-in-animaties. Die beginnen langzaam en eindigen snel. Stel je voor dat Wile-E-Coyote over de rand van een canyon rent, even in de lucht blijft hangen en ten slotte in de afgrond stort. In computeranimatie kan zo'n effect alleen worden gecreëerd met behulp van versnelling.
- Het is aanpasbaar. Je kunt een breed scala aan versnellingseffecten toepassen. Sommige beginnen snel, andere langzaam. Sommige versnellingseffecten vertagen aan het einde. Welk effect je ook met je beweging wilt bereiken, met versnelling krijg je het voor elkaar.
Hoe gebruik je versnelling voor animaties in After Effects?
After Effects is het ideale programma voor speciale effecten en postproduction. Ga als volgt te werk om versnelling in je animaties te gebruiken.
- Open je animatie en verplaats de tijdindicator naar het begin van de tijdlijn. De keyframes zijn ingesteld als normale lineaire keyframes, die de hele tijd een constante snelheid aanhouden.
- Klik op het eerste keyframe, klik met de rechtermuisknop en selecteer Keyframe Assistance in het pop-upmenu
- Scrol naar de opties Easy Ease, Easy Ease In en Easy Ease Out.
- Als je een van deze optie selecteert, wordt het keyframe gewijzigd van lineaire beweging in versnelling. De vorm van het keyframe verandert. Lineair is bijvoorbeeld ruitvormig, en Easy Ease Out is een pijl die naar links wijst.
- Hier vind je de juiste versnellingsopties voor je beweging. Je kunt bijvoorbeeld Ease Out kiezen voor je eerste keyframe en Ease In voor je laatste keyframe. Zo creëer je een realistische versnelling en vertraging, net als bij een natuurlijke beweging.
- Let op het tijdverschil tussen de keyframes in het deelvenster Tijdlijn. Hoe korter het tijdsinterval tussen de keyframes, hoe sneller de beweging, omdat de beweging voltooid moet zijn vóór het volgende keyframe. Als het interval langer is, is de beweging veel langzamer, omdat de beweging er langer over kan doen.
- Je kunt deze beweging aanpassen door de keyframes vooruit of achteruit te verplaatsen op de tijdlijn.
- Je kunt het pictogram van de grafiekeditor gebruiken om het effect van de versnelling op de keyframes in een grafiek te bekijken.
Hoe gebruik je versnelling voor animaties in Animate?
In Adobe Animate kun je een versnelling ook toepassen op meerdere eigenschappen tegelijk. Stel dat je een object hebt dat tegelijkertijd beweegt en ronddraait, dan kun je verschillende versnellingen toepassen op elke beweging.
Het werkt als volgt.
- Selecteer in je animatie een keyframe in de klassieke-tween-reeks en ga naar het gedeelte Tweenen in het deelvenster Eigenschappen.
- Selecteer 'Elke eigenschap afzonderlijk' in de vervolgkeuzelijst Versnelling.
- Voor elke eigenschap worden velden weergegeven. Klik op Classic Ease om het deelvenster met versnellingspresets te openen en selecteer versnellingsopties voor de eigenschap.
- Je kunt ook aangepaste versnellingen toevoegen. Met het deelvenster en de grafiek voor de aangepaste versnelling kun je de perfecte versnelling voor je keyframe maken. Door te slepen kun je de versnelling eenvoudig helemaal aan je wensen aanpassen.
- Je kunt een versnelling ook toepassen op alle eigenschappen tegelijk. Daarvoor ga je terug naar de vervolgkeuzelijst Versnelling en selecteer je de gewenste opties.
Meer informatie over het bewerken van bewegings-tweens in Animate
Hoe gebruik je versnelling voor animaties in Premiere Pro?
In Premiere Pro kun je kiezen uit verschillende versnellingsopties, waaronder Ease in, Ease out, Hold, Auto Bezier en Continuous Bezier.
Met Bezier kun je de versnellingsgrafiek aanpassen en met Auto Bezier kun je de wijziging vloeiender laten verlopen.
Je kunt eenvoudig verschillende versnellingsfuncties op je keyframes toepassen.
- Stel keyframes in voor je animatie.
- Selecteer je keyframe en ga naar het deelvenster Effect Control.
- Klik op het kleine blauwe ruitje van je keyframe aan de rechterkant van het deelvenster. Dit is standaard ingesteld als lineair.
- Klik met de rechtermuisknop en ga naar de vervolgkeuzelijst Temporal Interpolation.
- Selecteer de gewenste versnellingsoptie of gebruik opties zoals Bezier om de versnelling aan te passen.
- Als je met de rechtermuisknop op de tijdlijn klikt voor elk keyframe en vervolgens op Show Clip Keyframes>Motion>Position klikt, kun je de versnellingsgrafiek voor de keyframes bewerken in de tijdlijn. Zo kun je scherpere of vloeiendere overgangen in je keyframe maken.
Meer informatie over versnelling en keyframes in Premiere Pro
Veelgestelde vragen over versnelling.
Wat is het voornaamste doel van versnelling?
Versnelling is bedoeld om de beweging van een animatie te wijzigen, zodat die er mooier en organischer uitziet. Met versnelling oogt je animatie niet meer saai of abrupt, maar ziet de beweging er vloeiend uit, zodat het geheel een professionelere indruk maakt. Versnelling werkt als een demper aan het begin en einde van de animatie, waardoor het begin en einde van de beweging worden verzacht.
Hoe werkt CSS-animatie?
CSS-animatie (Cascading Style Sheets) bestaat uit een reeks opdrachten die bepalen hoe de animatie op de pagina wordt weergegeven wanneer een object van de ene CSS-stijlconfiguratie in de andere overgaat. Keyframes zijn in de CSS gecodeerd om de begin- en eindstatus van de stijl van de animatie te bepalen, en deze zo nodig tussendoor aan te passen. CSS-animatie wordt doorgaans vloeiend gerenderd en geeft je veel controle over hoe het eindproduct wordt weergegeven.
Wat zijn de typen versnellingsfuncties in CSS?
De belangrijkste typen versnellingsfuncties in CSS zijn lineair, ease-out, ease-in en ease-in-out. Al deze functies kunnen in CSS worden gebruikt om je keyframe-overgangen natuurlijker te laten overkomen.
Wat is een lineaire overgang in CSS?
Bij een lineaire overgang wordt tijdens de hele animatie dezelfde snelheid aangehouden. De tijd en de waarde van het keyframe gaan met dezelfde snelheid vooruit. Omdat dit een robotachtig en onnatuurlijk effect kan opleveren, worden versnellingsfuncties gebruikt om de bewegingen te verzachten, zodat ze er authentieker uitzien.
Wat is ease-out in CSS?
Ease-out-effecten beginnen snel en gaan dan langzamer. Deze effecten zijn zeer geschikt voor animaties die een gebruikersinteractie illustreren. De snelheid aan het begin geeft de indruk dat de responstijd snel is. Deze CSS-overgang kan ook worden gebruikt voor pictogrammen die vanaf de rand het scherm in vliegen. Het lijkt dan alsof de animatie de gebruiker te hulp snelt.
Wat is ease-in in CSS?
Ease-in-overgangen worden minder vaak gebruikt omdat het trage begin en het abrupte einde verwarrend kan zijn voor de kijker. Deze overgangen kunnen echter wel handig zijn voor het animeren van pictogrammen of afbeeldingen die buiten beeld gaan, vooral als het geanimeerde object volledig buiten beeld is voordat het tot stilstand komt. Houd ease-in-overgangen kort, anders kunnen ze traag overkomen en kan de gebruiker ongeduldig raken.
Wat is ease-in-out in CSS?
De ease-in-out-overgang combineert elementen van ease-in en ease-out. De overgang begint langzaam en versnelt halverwege. Dit is ideaal als je een animatie maakt die in een loop wordt afgespeeld.