U kunt animaties ontwikkelen in Google Web Designer door specifieke sleutelframes te gebruiken, die het begin- en het eindpunt van de animatie aangeven. U kunt eigenschappen van een element met animaties instellen voor elk sleutelframe. Web Designer zorgt dan voor de 'tweening' (de tussentijdse overgang) tussen de sleutelframes.
Voorbeeld:
- In het eerste sleutelframe heeft u bijvoorbeeld een rode rechthoek aan de linkerkant van de pagina.
- Bij het tweede sleutelframe, twee seconden later, wijzigt u de kleur- en positie-eigenschappen van de rechthoek zodat deze blauw is en aan de rechterkant van de pagina staat.
Web Designer genereert een animatie met een geleidelijke kleurverschuiving via paarstinten en de verplaatsing over de pagina.
Met css kunnen animaties van bestaande html-elementen worden gemaakt, maar er kunnen geen elementen worden toegevoegd of verwijderd. U kunt in plaats daarvan elementen verbergen en weergeven door een animatie toe te voegen aan de eigenschap visibility van het element.
Omdat animaties worden gemaakt met css, kunt u met de responsieve ontwerptools verschillende animatiereeksen maken voor kijkvensters van verschillende afmetingen.
Modi voor het maken van animaties
Kies uit twee animatiemodi: snelle modus en geavanceerde modus. U kunt op elk gewenst moment tussen de modi schakelen.
Snelle modusU maakt uw animatie scène voor scène, voegt een nieuwe weergave van de hele pagina toe en wijzigt alle elementen die u wilt animeren. Op de tijdlijn worden miniaturen weergegeven van elke scène in volgorde, zoals bij een storyboard. Meer informatie |
Geavanceerde modusU kunt animaties aan afzonderlijke elementen toevoegen voor meer complexere animaties. Elk element heeft een eigen laag op de tijdlijn. Daarnaast worden sleutelframemarkeringen naast de tijdlijn gezet op basis van de timing van een element. Meer informatie |
Beperkingen voor bepaalde amp-html-advertenties
Er kunnen alleen animaties voor de volgende css-eigenschappen worden gemaakt in amp-html-advertenties:
transform(hiermee kunt u elementen verplaatsen, draaien, schalen en omkeren)opacityvisibility