Zodra animaties op de tijdlijn zijn gemaakt, kunt u ze aanpassen door de elementen met animaties te bewerken, sleutelframes en keyspans te wijzigen of de animatie te herhalen.
Op deze pagina:
Een element met animaties bewerken
Wanneer u de eigenschappen van een element met animaties wijzigt, wordt er automatisch een sleutelframe toegevoegd op de schuifregelaarpositie als daar nog geen sleutelframe aanwezig is. U kunt ook een bestaand sleutelframe selecteren om het element op dat specifieke punt op de tijdlijn te bewerken. Een eventuele voorafgaande of daaropvolgende animatie wordt aangepast om te beginnen of te eindigen met de gewijzigde eigenschappen.
Als u wijzigingen in eigenschappen aanbrengt bij het eerste sleutelframe, bewerkt u de basiseigenschappen van het element. Latere sleutelframes nemen de basiseigenschappen over, tenzij u verschillende eigenschapswaarden opgeeft bij die sleutelframes.
Als u meerdere sleutelframes selecteert en de eigenschappen van het element of de elementen bewerkt, worden de wijzigingen op alle geselecteerde sleutelframes toegepast.
Als een element niet voor de volledige animatietijdlijn aanwezig hoeft te zijn, kunt u het bijbehorende zichtbaarheidsbereik zo instellen dat het element buiten het bereik wordt verborgen.
Easing van een animatie wijzigen
Als u de easing van een animatie wilt wijzigen, klikt u met de rechtermuisknop op de keyspan die u wilt wijzigen en selecteert u een nieuwe easing of Opties voor easing om een aangepaste easing op te geven.
Een animatie herhalen
- Klik op de tijdlijn op de knop Herhaling van animatie instellen
op de animatielaag die u wilt herhalen.
- Selecteer een optie in het pop-upmenu:
- Oneindig: De animatie wordt oneindig herhaald.
- ___ keer: De animatie wordt het opgegeven aantal keren herhaald.
- Geen: De animatie wordt niet herhaald.
Lagen met zichtbaarheidsbereiken kunnen niet worden herhaald.
Als u een laag herhaalt, wordt de animatie gewijzigd in het gepubliceerde document.
Als u het afspelen van de animatie herhaalt, is dit alleen van toepassing op het voorbeeld op het werkvlak.
Sleutelframes en keyspans aanpassen op de tijdlijn
Sleutelframes en keyspans selecteren
U kunt op verschillende manieren om sleutelframes en keyspans selecteren:
- Klik op een sleutelframe of een keyspan om dit item te selecteren. Als u twee opeenvolgende sleutelframes selecteert, wordt ook de keyspan daartussen geselecteerd. Als u een keyspan selecteert, worden de omliggende sleutelframes ook automatisch geselecteerd.
- Shift+klik om meerdere opeenvolgende sleutelframes of keyspans te selecteren.
- Ctrl+klik (Windows) of ⌘+klik (Mac) om niet-opeenvolgende sleutelframes of keyspans te selecteren of te deselecteren.
- Klik en sleep een rechthoekig selectievak om alle sleutelframes binnen het rechthoek te selecteren. Keyspans worden alleen geselecteerd als beide bijbehorende sleutelframes zijn opgenomen in het selectievak.
- Ctrl+klik en sleep (Windows) of ⌘+klik en sleep (Mac) een selectievak om te schakelen tussen of sleutelframes zijn geselecteerd of niet. Sleutelframes binnen het rechthoek die momenteel niet zijn geselecteerd, worden geselecteerd, terwijl geselecteerde sleutelframes worden gedeselecteerd. Ook dit is alleen van toepassing op keyspans als beide bijbehorende sleutelframes zich binnen het selectievak bevinden.
-
Dubbelklik op een laag binnen de tijdlijn om alle sleutelframes, keyspans en handgrepen voor het zichtbaarheidsbereik op die laag te selecteren.
Sleutelframes en keyspans verplaatsen
Nadat u sleutelframes of keyspans heeft geselecteerd, kunt u deze verplaatsen door ze over de tijdlijn te naar een nieuwe locatie slepen. De animatietiming verandert dienovereenkomstig.
Animaties schalen
U kunt animaties schalen om ze langer of korter te maken, terwijl de afstand tussen sleutelframes in proportie blijft. Volg deze stappen om een animatie te schalen:
- Selecteer de sleutelframes of keyspans die u wilt schalen. Deze kunnen zich op verschillende lagen bevinden.
- Houd Shift ingedrukt terwijl u een van de geselecteerde sleutelframes naar links of rechts sleept. De lengte van de animatie wordt uitgerekt of verkleind, afhankelijk van of u wegsleept vanaf naar het middelpunt van de animatie of er naartoe sleept. De andere geselecteerde sleutelframes worden proportioneel verplaatst, met uitzondering van het sleutelframe aan het verste uiteinde. Dit blijft op dezelfde plaats staan.
- Als u uitlijnen op tijdlijn heeft ingeschakeld, is de uitlijning alleen van toepassing op het sleutelframe dat u sleept.
- Sleutelframes mogen elkaar niet overlappen of minder dan 0,1 milliseconde van een ander sleutelframe zijn verwijderd.
- Niet-geselecteerde sleutelframes worden niet verplaatst, maar ze kunnen de beweging van geselecteerde sleutelframes beperken.
Schaal van sleutelframes op de tijdlijn aanpassen
Een sleutelframe kopiëren en plakken
U kunt een sleutelframe kopiëren en plakken naar een andere tijd in dezelfde laag, naar een andere laag of zelfs naar de tijdlijn van een andere pagina of een ander document. Het geplakte sleutelframe behoudt de bijbehorende eigenschappen voor animatie, maar niet de easing voor animatie of eventuele bewegingspaden.
U kunt met een van de volgende methoden een sleutelframe kopiëren en plakken:
-
Selecteer het sleutelframe om te kopiëren en druk op Ctrl+C (Windows) of ⌘+C (Mac). Klik vervolgens op de nieuwe positie op de tijdlijn en selecteer de bestemmingslaag of -lagen. Druk op Ctrl+V (Windows) of ⌘+V (Mac) om te plakken.
-
Klik met de rechtermuisknop op het sleutelframe dat u wilt kopiëren. Selecteer Sleutelframe kopiëren in het pop-upmenu. Klik vervolgens met de rechtermuisknop op de nieuwe tijdlijnpositie voor de bestemmingslaag en selecteer Sleutelframe plakken in het pop-upmenu.
-
Alt+klik en sleep (Windows), Option+klik en sleep (Mac) of klik+Alt en sleep (Linux) een sleutelframe om het te dupliceren op de eindpositie. Deze methode werkt niet voor verschillende pagina's, documenten of tijdlijnen voor geneste animaties.
Als u een sleutelframe kopieert en plakt in een laag die eerder geen sleutelframes had, wordt er automatisch een nieuw sleutelframe ingevoegd op 0s samen met het geplakte sleutelframe, tenzij u het sleutelframe op 0s plakt.
Als u een sleutelframe kopieert en plakt in een bestaand sleutelframe, overschrijven de eigenschappen voor animatie van het geplakte sleutelframe de overeenkomstige eigenschappen voor animatie van het bestaande sleutelframe.
Sleutelframes verwijderen
Klik met de rechtermuisknop (Windows) of Ctrl+klik (Mac) op een sleutelframe en selecteer Verwijderen in het pop-upmenu als u een sleutelframe wilt verwijderen.
Regels voor sleutelframes bewerken in het deelvenster Css
Als u bekend bent met css-regels voor sleutelframes (die beginnen met het zoekwoord @keyframes), kunt u het deelvenster Css gebruiken om animatiestijlen te bekijken en te bewerken in de ontwerpweergave. De tijdlijn en het werkvlak weerspiegelen automatisch de wijzigingen die u aanbrengt in het deelvenster.
Werken met regels voor sleutelframes
- Selecteer één element met animaties om de regel voor sleutelframes voor dat element in het deelvenster Css te bekijken.
- Voeg sleutelframes tussen bestaande sleutelframes toe door op Sleutelframe invoegen te klikken.
- Bewerk de percentages voor sleutelframes.
- U kunt eigenschappen met animaties voor een sleutelframe toevoegen, bewerken en verwijderen.
- Schakel een eigenschap met animaties in of uit voor de hele animatie door op het selectievakje naast de eigenschapsnaam te klikken.
- Verwijder een afzonderlijk sleutelframe door het percentage te wissen of door alle eigenschappen met animaties voor dat sleutelframe te verwijderen.
- Verwijder alle css-animaties voor een element door de regel voor sleutelframes te selecteren en onderaan het deelvenster op de knop Geselecteerde regels verwijderen
te klikken.
Regels voor sleutelframes bewerken in het deelvenster Css
Beperkingen
- U kunt de easing niet aanpassen.
- U kunt geen sleutelframe toevoegen na het laatste sleutelframe. Gebruik in plaats daarvan de tijdlijn.
Meer informatie over het gebruik van het deelvenster Css