Over easing

Met easing kunt u de versnelling of vertraging van een animatie-overgang wijzigen. Google Web Designer biedt u 5 standaard easing-functies die zijn gedefinieerd in de CSS3-specificatie. Daarnaast beschikt u over stapovergangen en een optie voor aangepaste easings in de geavanceerde modus.

Easing in de snelle modus

In de snelle modus is dezelfde easing van toepassing op alle elementen met animaties tussen thumbnails.

De easing wijzigen in de snelle modus:

1. Klik op de knop Opties voor sleutelframe  tussen de thumbnails.
2. De overgangseditor wordt geopend.
   

3. Klik in de overgangseditor op de pijlen om de standaardvoorinstellingen voor easings te doorlopen. U kunt ook de duur van de easing wijzigen door een tijd in seconden op te geven of door op het tijdveld te klikken en naar links of rechts te slepen.

Standaardvoorinstellingen voor easings

Voorinstelling voor easings	Beschrijving
Lineair	Animaties veranderen met een constante snelheid.
Afnemen	Animaties beginnen met een gemiddelde snelheid en worden aan het eind langzamer.
Afnemen naar buiten	Animaties beginnen snel en worden aan het eind langzamer.
Afnemen naar binnen	Animaties beginnen langzaam en eindigen snel.
Afnemen naar binnen/buiten	Animaties beginnen en eindigen langzaam, maar bewegen snel in het midden.
Stap-einde	Animaties blijven in de beginpositie gedurende de ease-tijd en springen vervolgens rechtstreeks naar de eindpositie.
Stap-begin	Animaties springen meteen naar de eindpositie.

Easing in de geavanceerde modus

In de geavanceerde modus heeft u extra opties voor easings:

• De easing wijzigen voor meerdere keyspans tegelijk.
• Een aangepaste easing opgeven.
• Een aangepaste easing opslaan als nieuwe voorinstelling zodat u deze gemakkelijk opnieuw kunt gebruiken voor andere keyspans.

Een easing wijzigen in de geavanceerde modus:

1. Klik met de rechtermuisknop op een keyspan met animatie waarvan u de easing wilt aanpassen. Als u meerdere easings tegelijk wilt bewerken, selecteert u opeenvolgende keyspans met Shift + klik of niet-opeenvolgende keyspans met Ctrl + klik (Windows) of Command + klik (Mac). Klik vervolgens met de rechtermuisknop op een van de geselecteerde keyspans. (Alleen de easings van keyspans met animaties worden aangepast.)

2. Selecteer een van de voorinstellingen voor easings in het pop-upmenu en selecteer Opties voor easing voor visualisaties van de easingcurven of om een aangepaste easing op te geven.

Een aangepaste easing maken:

1. Klik met de rechtermuisknop op een keyspan en selecteer Opties voor easing om het dialoogvenster Easing te openen.
2. Gebruik een van de volgende methoden om de easing te wijzigen:
   • Sleep de besturingsgrepen om de vorm van de easingcurve aan te passen. De hoek van de besturingsgreep bepaalt de steilheid van de curve en de lengte van de greep bepaalt de mate van versnelling of vertraging.
   • Geef in het veld Kubieke Bézier de functienotatie cubic-bezier() op van de gewenste Bézier-curve. Als u een ongeldige waarde opgeeft, wordt het veld rood onderstreept.
3. Optioneel: U kunt deze aangepaste easing opslaan als voorinstelling door op Opslaan als nieuwe voorinstelling te klikken.
4. Klik op Toepassen om deze aangepaste easing te gebruiken voor de geselecteerde keyspan of keyspans.
   

Aangepaste voorinstellingen voor easings

• Snelle toegang. De voorinstellingen voor easings worden vermeld als opties in het pop-upmenu wanneer u met de rechtermuisknop op een keyspan klikt.
• Eenvoudige identificatie. De namen van voorinstellingen worden weergegeven op de tijdlijn in de geavanceerde modus.