-
Cześć.
-
Jestem Natalie.
Pracuję w zespole
-
Google Web Designera.
-
W tym filmie omówię
-
tworzenie animacji
-
w trybie zaawansowanym
osi czasu.
-
Domyślnie oś czasu znajduje się
na dole obszaru roboczego.
-
To jeden
z dwóch trybów osi czasu.
-
Drugim jest
szybki tryb osi czasu.
-
Wiele plików domyślnie
będzie otwierać się
-
w tym trybie, a przełączać się
między nimi można,
-
klikając ten przycisk.
-
To jest tryb szybki,
a to zaawansowany.
-
Tryb szybki omawiamy
w osobnym filmiku.
-
Tutaj skupię się
na trybie zaawansowanym,
-
który jest bardziej złożony,
ale też daje
-
więcej możliwości.
-
Przygotowałam krótką,
animowaną reklamę.
-
Mamy tu
przesuwającą się grafikę,
-
dwa pojawiające się i zanikające
pola tekstowe i logo na końcu.
-
Pokażę, jak można
utworzyć taką reklamę
-
w programie Google Web Designer.
-
Najpierw zajmę się
przesuwaną grafiką.
-
Muszę przeciągnąć ją
na scenę
-
i wstawić w miejscu,
-
w którym ma być
na początku animacji.
-
Właśnie tak.
-
Później będzie ona
się tak przesuwać.
-
Na osi czasu
pojawiła się ścieżka.
-
Jest to warstwa osi czasu,
-
czyli element interfejsu,
który pomoże nam
-
utworzyć poszczególne
etapy animacji.
-
Mówiąc najprościej,
-
będziemy określać
klatki kluczowe,
-
czyli punkty w czasie, w których
element ma określoną właściwość.
-
Potem określimy, jak przebiega
i jak długo trwa przejście
-
między tymi punktami.
-
Aby utworzyć przesunięcie,
utworzę kilka klatek kluczowych.
-
Chcę zatrzymać grafikę
na około sekundę.
-
Klikam prawym przyciskiem
-
jedną sekundę i wybieram
Wstaw klatkę kluczową, a potem
-
to samo robię
pół sekundy dalej.
-
Tutaj przesuwam grafikę
-
do miejsca,
gdzie ma się znajdować
-
w tym punkcie czasu.
-
Tutaj też zatrzymuję grafikę
na około sekundę.
-
Pół sekundy później
-
grafika ma się przesunąć
poza krawędź widoku.
-
Gdy przesuwam znacznik,
-
wyświetla się
podgląd animacji.
-
Mogę też kliknąć w lewym rogu
przycisk odtwarzania,
-
by zobaczyć podgląd
na scenie.
-
Wygląda nieźle.
-
W finalnej wersji
-
widzieliśmy, że grafika
na początku po prostu się pojawia,
-
a dopiero na końcu
przesuwa się
-
poza krawędź widoku.
-
Zajmijmy się teraz tą animacją.
-
Zaznaczam wszystkie
klatki kluczowe
-
i przesuwam je,
-
by zrobić miejsce
na pojawienie się grafiki.
-
W punkcie zero
wstawiam nową klatkę.
-
Chcę, by widoczność
elementu w tym miejscu
-
wynosiła zero.
-
W pozostałych klatkach kluczowych
powinna wynosić 100%.
-
Teraz dodam tekst.
-
Wcześniej widać było
dwa pola tekstowe,
-
które pojawiają się jedno po drugim,
gdy grafika się przesuwa.
-
Utworzę więc
pierwsze pole tekstowe.
-
Powinno się pojawić,
-
pozostać na ekranie,
a potem zniknąć,
-
gdy przesunie się grafika.
-
Najpierw trzeba ustawić
-
widoczność tego pola na zero.
-
Pół sekundy dalej
utworzę klatkę kluczową
-
i ustawię widoczność na 100%.
-
Po półtorej sekundy
ma ona nadal wynosić 100%.
-
Po dwóch sekundach znów
powinna wynosić 0%.
-
Można na przykład
wstawić klatkę kluczową,
-
tak jak poprzednio.
-
Można też
zduplikować klatkę kluczową.
-
Przytrzymując Alt,
mogę skopiować klatkę i przesunąć ją
-
w inne miejsce.
-
Może to być
spora oszczędność czasu.
-
Teraz czas na animację
-
znikającego pola tekstowego.
-
Sprawdźmy podgląd.
-
Idealnie.
-
Drugie pole tekstowe
jest dokładnie takie samo.
-
Różni się tylko tekstem.
-
Pojawia się,
gdy pierwsze zniknie.
-
Oszczędzimy sobie trochę czasu,
-
kopiując tę warstwę z animacją.
-
Klikam prawym przyciskiem
-
i wybieram Zduplikuj warstwę.
-
Teraz znów zaznaczam
-
wszystkie klatki kluczowe
i przesuwam je tam,
-
gdzie ma być animacja.
-
Dostosuję klatki,
gdzie pierwsze pole znika,
-
a drugie się pojawia,
-
by nie nachodziły na siebie.
-
Jeśli klatki są tak blisko siebie,
-
można użyć suwaka powiększenia,
by lepiej zobaczyć
-
granice animacji.
-
Teraz zmienię tekst.
-
Mam tu
dwa pola tekstowe,
-
jedno nad drugim.
-
Jeśli kliknę tutaj,
mogę przypadkowo zmienić
-
pole na górze.
-
Dlatego lepiej
-
od razu je zablokować.
-
Teraz mogę edytować
pole pod spodem.
-
Animacja
jest już właściwie gotowa.
-
Przyjrzyjmy się
-
obszarom między
klatkami kluczowymi.
-
Między każdą parą
widzimy napis Liniowo.
-
Chodzi o funkcję wygładzania CSS,
-
która oblicza
wartości pośrednie między
-
każdą parą klatek.
-
Liniowo oznacza, że wartości
zmieniają się jednostajnie.
-
Są tu też inne opcje.
-
Gdy klikniemy prawym przyciskiem,
-
zobaczymy wszystkie
standardowe funkcje
-
wygładzania CSS.
-
W tym przypadku,
-
gdy grafika się przesuwa,
-
warto ustawić
inną funkcję wygładzania,
-
np. Wolno-normalnie-wolno.
-
Wtedy animacja lekko przyspieszy,
-
by potem znów zwolnić
i zatrzymać się.
-
Wygląda to
bardziej realistycznie.
-
Ograniczę obszar podglądu,
-
przeciągając żółte uchwyty
do momentu przejścia.
-
Włączę zapętlenie podglądu
-
i odtworzę tylko ten fragment,
-
by wychwycić potencjalne błędy.
-
Wygląda nieźle.
-
Nie trzeba używać
-
gotowych funkcji.
-
Można utworzyć własne.
-
Mogę kliknąć prawym przyciskiem
Opcje wygładzania...
-
i dostosować
krzywą Beziera
-
do własnych potrzeb.
-
Klikam OK,
by zastosować zmiany.
-
To koniec tego samouczka.
-
Zainteresowanych odsyłam
-
do naszych innych,
bardziej szczegółowych samouczków.
-
To wszystko.
-
Dziękuję za uwagę.
