Over bewegingspaden

Met bewegingspaden kunt u animaties aan objecten toevoegen die zich bewegen langs curven en complexe vormen. Net als de lijnen die zijn getekend met het gereedschap Pen, definieert u bewegingspaden door ankerpunten in te stellen die vervolgens worden verbonden via rechte of gebogen lijnen.

Bewegingspaden met animaties worden door css bij benadering gevolgd. Het is dus mogelijk dat elementen met animaties het bewegingspad niet exact volgen. Doorgaans is het verschil niet waarneembaar (standaard minder dan een pixel) en u kunt de mate van afwijking beperken in de eigenschappen van het bewegingspad.

Over bewegingspaden

Bewegingspaden weergeven

Selecteer één element of groep om de lijnen voor het bewegingspad van de animatie en de ankerpunten weer te geven.

Ankerpunten

Ankerpunten kunnen op twee manieren worden ingesteld:

• Miniaturen of sleutelframes die een nieuwe x- of y-positie specificeren voor het element, maken automatisch ankerpunten aan. De start- en eindankerpunten zijn altijd sleutelframes.
• U kunt ankerpunten aan het bewegingspad toevoegen met het gereedschap Bewegingspad.

Besturingsgrepen

Besturingsgrepen zijn zichtbaar als het gereedschap Bewegingspad  is geselecteerd. Elk segment tussen ankerpunten heeft twee besturingsgrepen: voor elk ankerpunt één. Met de lengte en richting van een besturingsgreep wordt aangegeven in hoeverre het bewegingspad is gebogen. Voor rechte lijnen liggen de besturingsgrepen tegen het segment aan of zijn de besturingsgrepen samengevouwen.

Bewegingspaden bewerken

De vorm van een bewegingspad bewerken

Bewegingspaden kunnen eenvoudige curven, gesloten vormen, zoals polygonen en cirkels, of gedetailleerde omtrekken van andere objecten zijn. U kunt zo de vorm van een bewegingspad wijzigen:

Een ankerpunt toevoegen

• Voeg een miniatuur of een sleutelframe toe waarmee de positie van het element wordt gewijzigd. Zo voegt u een ankerpunt toe waar u de easing kunt wijzigen.
• Met de optie Ankerpunt toevoegen  van het gereedschap Bewegingspad  kunt u op een punt op het bewegingspad klikken om een ankerpunt toe te voegen en het bewegingspad daar vast te zetten. Als u deze methode gebruikt om een ankerpunt toe te voegen, wordt er geen miniatuur of sleutelframe toegevoegd.

De kromming aanpassen

• Als het gereedschap Selectie of de standaardoptie voor het gereedschap Bewegingspad  is geselecteerd, kunt u een punt op het bewegingspad, inclusief ankerpunten, slepen om de vorm van het pad te wijzigen.
• Als het gereedschap Bewegingspad  is geselecteerd, kunt u de besturingsgrepen slepen om de lengte en hoek van de grepen te wijzigen en zo de kromming van het pad aan te passen. Als er nog een besturingsgreep voor hetzelfde ankerpunt wordt weergegeven, wordt de hoek van deze greep automatisch aangepast, tenzij u de Alt-toets ingedrukt houdt.
• Dubbelklik op een ankerpunt om de besturingsgrepen voor het ankerpunt samen te vouwen. Als u opnieuw dubbelklikt, worden de besturingsgrepen weer uitgevouwen.

  Dubbelklik op beide ankerpunten om een bewegingspad recht te maken.

Een ankerpunt verwijderen

• Met de optie Ankerpunt verwijderen  van het gereedschap Bewegingspad  kunt u een bestaand ankerpunt verwijderen door erop te klikken. Als u een ankerpunt verwijdert dat bij een miniatuur of sleutelframe zonder andere animatie-eigenschappen dan het bewegingspad hoort, wordt ook de miniatuur of het sleutelframe verwijderd.
• Als u een miniatuur of sleutelframe verwijdert, wordt ook het segment van het bewegingspad verwijderd dat wordt afgesloten met die miniatuur of dat sleutelframe.

Bewegingspaden transformeren

U kunt bewegingspaden verplaatsen, omdraaien of draaien of het formaat ervan aanpassen. Selecteer het gereedschap Bewegingspad  en vink het selectievakje Transformeren aan op de balk met gereedschapsopties. Als deze optie aanstaat, worden de opties voor transformeren weergegeven wanneer u een element met een bewegingspad selecteert.

Een bewegingspad verplaatsen

Sleep het bewegingspad naar een nieuwe positie op het werkvlak.

Het formaat van het bewegingspad aanpassen

• Het vak voor formaataanpassing wordt blauw rondom het bewegingspad weergegeven, met handgrepen in elke hoek en aan elke kant. Sleep een handgreep om het formaat van het bewegingspad aan te passen.
• Houd de Shift-toets ingedrukt tijdens het slepen om de oorspronkelijke hoogte-breedteverhouding te handhaven.
• Houd de Alt-toets ingedrukt tijdens het slepen om het bewegingspad gecentreerd op hetzelfde punt te houden.
• Als u het formaat van het bewegingspad wilt aanpassen in een andere richting, draait u het vak voor formaataanpassing door het aantal graden rotatie op te geven in het veld  op de balk met gereedschapsopties. U kunt ook Alt (Windows) of Option (Mac) ingedrukt houden terwijl u op de pijl-links of -rechts drukt om het vak voor formaataanpassing 5° te draaien. Het veld wordt altijd gereset op 0°, dus u moet de gewenste rotatie vanuit de huidige stand opgeven. Als u het vak voor formaataanpassing draait, wordt de stand van het bewegingspad zelf niet gewijzigd.
• Als u de stand van het vak voor formaataanpassing wilt resetten, dubbelklikt u op het binnenste rotatiebedieningselement (de kleinere ring). Hierdoor wordt ook de locatie van het rotatiedraaipunt gereset.

Het bewegingspad omdraaien

• Sleep een handgreep voor formaataanpassing op de tegenoverliggende handgreep voor formaataanpassing.

Het bewegingspad draaien

• Sleep het buitenste rotatiebedieningselement (de grotere ring) rechtsom of linksom om het bewegingspad te draaien.
• Houd de Shift-toets ingedrukt tijdens het slepen om te draaien met stappen van 45°.
• Als u het draaipunt voor de rotatie wilt verplaatsen, sleept u het binnenste rotatiebedieningselement (de kleinere ring) naar een andere plaats. Reset de draaipuntlocatie door op het binnenste rotatiebedieningselement te dubbelklikken (hiermee wordt ook de stand van het vak voor formaataanpassing gereset).

Bewegingspaden bewerken

De animatiesnelheid bewerken

U kunt de snelheid van een object langs het bewegingspad bepalen door de tijdsinstellingen voor de miniaturen of sleutelframes en de easing tussen de elementen te wijzigen. U kunt de animatie van het bewegingspad ook herhalen.

Optimalisatie

Wanneer u een bewegingspad maakt of bewerkt, wordt de animatie automatisch door Google Web Designer geoptimaliseerd om de hoeveelheid gebruikte css voor de weergave te beperken, waarbij rekening wordt gehouden met de toleranties die u heeft opgegeven in de eigenschappen van het bewegingspad. Hoe kleiner de toleranties, hoe nauwkeuriger de animatie het bewegingspad volgt, maar hoe minder optimalisatiemogelijkheden.

Klik in de eigenschappen van het bewegingspad op Curve optimaliseren  voor extra compressie. Dit proces kan langer duren dan automatische optimalisatie.

Google Web Designer geeft de geschatte grootte van het bewegingspad van het geselecteerde element weer in het deelvenster Eigenschappen, zodat u kunt zien hoeveel schijfruimte het bewegingspad ongeveer in beslag neemt na publicatie van het document.

Eigenschappen van bewegingspaden

De eigenschappen van een bewegingspad worden weergegeven in het deelvenster Eigenschappen zodra u een ankerpunt met het gereedschap Bewegingspad heeft toegevoegd of de vorm van het bewegingspad heeft gewijzigd in een curve.

Eigenschap	Beschrijving
Oriënteren op pad	Wanneer deze eigenschap is aangezet, wordt het element tijdens de animatie in de richting van het bewegingspad gedraaid (wanneer bijvoorbeeld de neerwaartse curve van een bewegingspad wordt gevolgd, wordt het element naar beneden gekanteld). De precisie van de rotatie kunt u bepalen met de eigenschap Hoektolerantie.
Positietolerantie	Hiermee kunt u instellen in hoeverre het element mag afwijken van het bewegingspad. Standaard: 0,5 px Minimaal: 0,1 px Maximaal: 100 px
Hoektolerantie	Hiermee bepaalt u in hoeverre de stand van het element mag afwijken van de stand van het bewegingspad. Alleen van toepassing als de optie Oriënteren op pad is aangezet. Standaard: 1° Minimaal: 1° Maximaal: 360°
Curve optimaliseren	Klik op de knop om de grootte te reduceren van de css die wordt gebruikt om de animatie van het bewegingspad te maken. Na de optimalisatie wordt de knop uitgezet totdat het bewegingspad wordt gewijzigd.
Geschatte grootte	Geeft de geschatte grootte van het bewegingspad weer. Gebruik de knop Curve optimaliseren voor extra compressie.

Beperkingen

• Positionering boven/links: Bewegingspaden bieden geen ondersteuning voor de positionering boven/links. Gebruik in plaats daarvan de css-eigenschap transform (dit is de standaardinstelling).
• 3D-animatie: Google Web Designer ondersteunt geen 3D-bewegingspaden. U kunt 3D-transformaties afzonderlijk toepassen op het element.
• Deelvenster Css: Het deelvenster Css is niet van invloed op bewegingspaden, hoewel de stijlen wel op het element zelf worden toegepast.
• Codeweergave: U kunt de bewegingspaden bewerken in de Codeweergave.
• Beeldadvertenties: Het gereedschap Bewegingspad is niet beschikbaar in beeldadvertenties.