-
Hallo.
-
Ik heet Natalie en ben
een van de engineers die
-
meebouwt aan Google Web Designer.
-
In deze video laat ik zien
-
hoe u animaties maakt
met behulp van
-
de tijdlijn in de geavanceerde modus.
-
Het deelvenster Tijdlijn vindt u
standaard onderaan de werkruimte.
-
Dit is een van de twee
tijdlijngereedschappen
-
die we bieden. Het andere is de
tijdlijn in de snelle modus.
-
Veel bestanden worden standaard
in de snelle modus geopend,
-
en u kunt er tussen schakelen
door te klikken op deze knop
-
in de rechterbovenhoek.
-
Dit is de snelle modus
en dit is de geavanceerde modus.
-
We hebben een aparte video
over de snelle modus.
-
Deze video gaat alleen in op de
geavanceerde modus,
-
die de complexere
maar ook de krachtigere is
-
van de twee gereedschappen.
-
Als praktijkoefening heb ik
deze korte advertentie met animatie,
-
met een verschuivende
afbeelding, twee tekstvakken
-
die in- en uitfaden, plus een logo
dat aan het einde wordt weergeven.
-
In deze video
laat ik u zien hoe u
-
deze advertentie kunt bouwen
in Google Web Designer.
-
Laten we eerst
die verschuivende animatie bouwen.
-
De eerste stap is om deze
naar het werkvlak te slepen
-
en te plaatsen zoals we deze
-
aan het begin van
de animatie willen weergeven.
-
Ongeveer hier dus.
-
Later laten we deze
zo verschuiven.
-
U ziet dat deze kleine track
in de tijdlijn is verschenen.
-
Dit is een tijdlijnlaag,
en dit is de
-
UI waarin we onze animatie
-
voor dit object
in de loop der tijd plaatsen.
-
Het idee achter
het maken van animaties
-
is dat we sleutelframes
maken. Dit zijn
-
wegpunten in de tijd, waarbij een element
een specifieke eigenschapswaarden heeft.
-
Dan definiëren we hoe
en hoelang de overgang
-
tussen die waarden moet zijn.
-
We maken meerdere sleutelframes
om deze afbeelding te laten verschuiven.
-
Hij moet ongeveer
een seconde stil blijven,
-
dus zet ik het frame op één seconde.
-
Klik met de rechtermuisknop en
selecteer 'Sleutelframe invoegen'.
-
En een halve seconde later nog een.
-
En dan laat ik in dit sleutelframe
-
de afbeelding verschuiven
naar de plek waar ik
-
het op dit punt wil hebben.
-
Daarna moet de afbeelding
nog een seconde stilstaan.
-
En ten slotte, een halve seconde later,
-
moet hij volledig uit beeld verdwijnen.
-
Als ik de schuifregelaar sleep,
kan ik door de tijdlijn lopen
-
en een voorbeeld van
de animatie bekijken.
-
U kunt ook
op de afspeelknop linksonder klikken
-
om een voorbeeld
weer te geven op het werkvlak.
-
Dat ziet er goed uit.
-
Vervolgens...
-
zagen we in de voltooide animatie
dat de afbeelding
-
infadet aan het begin
-
en dan later begint te verschuiven.
-
Dus laten we nu die fade-animatie maken.
-
Ik selecteer alle sleutelframes
met het selectiegereedschap
-
en verschuif deze om ruimte te maken
-
voor de fade-in aan
het einde en ik voeg
-
een nieuw sleutelframe in op het nulpunt.
-
In dit sleutelframe moet de transparantie
-
van het element nul zijn.
-
Alle overige sleutelframes
moeten 100% zijn.
-
Nu voegen we de tekst toe.
-
We zagen dat er twee tekstvakken zijn
-
en dat deze één voor één infaden
terwijl de afbeelding verschuift.
-
Dus we maken het eerste tekstvak.
-
Dit eerste vak moet
infaden, vervolgens
-
gedurende deze tijd op zijn
plek blijven, en daarna
-
uitfaden terwijl de afbeelding verschuift.
-
Allereerst moeten we de transparantie
van dit vak op nul zetten,
-
omdat dat de beginstatus is.
-
Daarna maken we een sleutelframe
op een halve seconde
-
met een transparantie van 100%.
-
Op anderhalve seconde
moet dit nog steeds 100% zijn.
-
En op twee seconden
moet het weer 0% zijn.
-
Eén manier is een sleutelframe invoegen,
-
zoals we al eerder deden.
-
Maar u kunt het sleutelframe
ook dupliceren.
-
Als u Alt ingedrukt houdt, kunt u
een sleutelframe klonen
-
en naar een andere tijd slepen.
-
Zo kunt u bij bepaalde
animaties tijd besparen.
-
We voegen het laatste frame toe
waarin het tekstvak
-
helemaal uitfadet.
-
U kunt nu een voorbeeld bekijken.
-
Perfect.
-
Oké.
-
En het tweede tekstvak lijkt
veel op het eerste tekstvak.
-
Alleen de tekst is anders
-
en hij verschijnt nadat
het andere is uitgefadet.
-
Dus ik ga mezelf tijd besparen
-
en dupliceer deze laag samen
met de animatie.
-
Ik klik met de rechtermuisknop
-
en selecteer 'Laag dupliceren'.
-
Vervolgens gebruik ik
het selectiegereedschap weer
-
om alle sleutelframes te selecteren
en te verplaatsen naar
-
waar ik de animatie wil hebben.
-
Ik pas deze frames aan
tot waar het eerste tekstvak
-
uitfadet en het tweede infadet,
-
zodat ze niet in elkaar overvloeien.
-
Als sleutelframes
zo dicht bij elkaar komen,
-
kunt u de zoomschuifregelaar
gebruiken om meer details
-
van uw animatie te zien.
-
Laten we nu ook de tekst updaten.
-
Ik heb nu deze twee tekstvakken,
-
bovenop elkaar.
-
Als ik nu hier klik,
bewerk ik mogelijk
-
per ongeluk het bovenste.
-
Dus ik vergrendel het
-
zodat ik het niet ongewild activeer.
-
Zo kan ik het onderste vak bewerken.
-
Nu is onze animatie zo'n beetje af.
-
Laten we zien wat
-
er precies tussen de sleutelframes gebeurt.
-
Tussen elk paar sleutelframes
ziet u Lineair.
-
Dit verwijst naar de CSS-easingfunctie
-
die wordt gebruikt om
tussenliggende waarden te berekenen
-
tussen elk paar sleutelframes.
-
Lineair houdt in dat
de waarden gelijkmatig wijzigen.
-
Er zijn een aantal opties.
-
De rechtermuisknop geeft u toegang
-
tot alle standaard easingfuncties
-
die in de CSS-specificatie worden vermeld.
-
Dus voor deze overgang,
-
waarbij de afbeelding van de ene
naar de andere helft verschuift,
-
kan het goed zijn om
een andere easingfunctie
-
te kiezen, zoals ease-in-out,
waarbij de beweging
-
iets versnelt en daarna vertraagt.
-
alvorens tot stilstand te komen,
waardoor de beweging
-
wat realistischer lijkt.
-
Ik maak mijn voorbeeldgebied kleiner
-
door deze gele handgrepen te verslepen
tot alleen deze overgang hier.
-
Ik stel het voorbeeld in op Herhalen
-
en speel het voorbeeld alleen
voor dit gebied af.
-
Zo kan ik fouten opsporen
voor die overgang.
-
En dat ziet er goed uit.
-
Iets anders wat we kunnen doen,
-
is in plaats van vooraf
gedefinieerde functies
-
eigen functies gebruiken.
-
Selecteer 'Opties voor easing'
met de rechtermuisknop
-
om deze Beziér-curve te veranderen
-
in wat u maar wilt en
sla dit op als aangepaste voorinstelling.
-
En klik op OK om dit toe te passen.
-
Dat was het voor deze videotraining.
-
Voor wie dat wil,
hebben we nog meer video's
-
die dieper ingaan op andere
aspecten van animaties.
-
Dat was het voor nu.
-
Bedankt voor het kijken.
