ABC animacji w Adobe XD

 

Cześć!

W tym tutorialu opiszę, jak działa animacja w adobe XD, w jaki sposób się po niej poruszać i dlaczego warto z niej korzystać. A wszystko to na przykładzie aplikacji do obserwowania faz księżyca – stworzymy w programie efekt wczytywania się aplikacji oraz przejścia do ekranu głównego.

Słowem wstępu: czym jest animacja? Najprościej ujmując, jest to sposób ruchu danego elementu. W samym projektowaniu ruch daje nam bardzo dużo możliwości pod kątem przekazywania wybranej informacji oraz ładunku emocjonalnego. Dzięki temu możemy przekazywać subtelne informacje, np. odwracać uwagę podczas ładowania zawartości czy korzystanie użytkownika. Przekaz informacji za pomocą animacji powinien więc być płynny i subtelny oraz pasować do reszty produktu. Dla dociekliwych: polecam zapoznanie się z 12 zasadami Walta Disney’a, „The 12 Principles of Animation of Walt Disney”.
A teraz przejdźmy do samej animacji. 

KROK 1. Zaczynamy od stworzenia ekranu, który początkowo pokazuje użytkownikowi procent wczytywania się aplikacji. Tło do naszego ekranu możesz skopiować bezpośrednio z materiałów dodatkowych. Następnie na tym ekranie tworzymy okrąg (E) i, przytrzymując klawisz shift, ustawiamy jego średnicę na 140, a rozmiar krawędzi na 7, a kolor na #171D5E. Później duplikujemy nasz okrąg. Zmieniamy kolor drugiego okręgu na #171D5E. Drugi okrąg posłuży nam do animowania paska ładowania. W tym celu ustawiamy dash na 10, a gap na 1600, poniżej zmieniamy jeszcze zaokrąglenie kątów. Wszystkie te parametry mieszczą się zaraz obok rozmiaru w oknie appearance.

 

KROK 2. Czas na liczby, które będą się poruszać wraz z naszym okręgiem. Klikając na narzędzie text (T), wpisujemy liczby od 1 do 9 – po kolei, pod sobą. Duplikujemy i powielamy liczby tak, aby w drugim elemencie uzyskać powtórzenie liczb od 1 do 9. Na samym końcu dodajemy znak procentu jako osobny element. Ustawiamy rozmiar na 40, kolor na #D2DEFA, font na Calibri z pogrubieniem. Wyrównujemy wszystkie 3 obiekty. Na cyfrach budujemy prostokąt (R) i tworzymy z nich maskę, używając skrótu (Shift + Ctrl + M). Kopiujemy cały ekran. Następnie przesuwamy liczby na 99. Przechodzimy do samego okręgu i ustawiamy dash na 1600.

 

KROK 3. Klikamy na zakładkę prototype w lewym górnym rogu i przechodzimy do samej animacji. 

Wskazówka: Warto zawsze zwracać uwagę na kolejność warstw oraz na to, czy dany element jest dobrze ustawiony. Czasami ten program lubi tworzyć „niespodziewane” cuda. 😉

Patrząc na sam panel animacji (który mieści się po prawej stronie), mamy w nim zawarte takie elementy, jak interactions, actions i scrolling. Interactions to nic innego, jak wybór tego, jaką czynnością będziemy rozpoczynać naszą animację. Najczęściej korzysta się z tap, drag oraz time, czyli uruchamiamy animację albo kliknięciem, albo przeciągnięciem, albo automatycznie (za pomocą czasu). 

Pozostałe dwa, czyli keys & gamepad oraz voice, nie są  już tak istotne. Odpowiadają one za wyzwalanie animacji dowolnym klawiszem lub głosem (interactions) i za rodzaj ruchu w animacji (actions). Transition to przenikanie obrazu w obraz. Przy overlay element, który zaznaczamy jako drugi, będzie „narzucony” na ten pierwszy – utworzą podwójny widok.

Audio playback oraz speech playback podkładają do wybranego ekranu ścieżkę dźwiękową lub tekst czytany przez wybrany głos z listy. Jednak w tym tutorialu zajmiemy się najbardziej naturalnym efektem, czyli auto-animate. To właśnie dzięki niemu sposób animacji może być taki płynny. W auto animacji mamy jeszcze dostępne jej dodatkowe cechy – easing oraz duration. Easing, czyli łagodzenie, to sposób, w jaki animacja wykonuje ruch. Te efekty są różne, niektóre mają swoją wagę, inne są wolne i tak dalej. Polecam wpisać w przeglądarkę frazę „easing preview Adobe XD animation” i zapoznać się z jej różnymi opcjami, bo tego, niestety, nie odda opis samego ruchu – trzeba to zobaczyć na filmie.

Klikamy na nasz pierwszy ekran – na środku na prawym boku pojawia nam się niebieska strzałka. Przeciągając ją, tworzymy połączenie dla dwóch wybranych elementów. W tym przypadku przeciągamy ją na nasz drugi element, tj. ekran z 99%. Przechodząc do panelu animacji w części interaction ustawiamy time i przy duration dajemy 0 s – wtedy nasza animacja rozpocznie się automatycznie. Dalej w części action wybieramy auto-animate, easing jako ease in-out, a czas ustawiamy na 3 s. Jedna część naszego ekranu gotowa!

 

KROK 4. Teraz stworzymy animację loga naszej aplikacji oraz księżyca. Jak już wcześniej wspomniałam, wszystkie niezbędne części do stworzenia tej aplikacji będą zawarte w pliku. W tym tutorialu skupiamy się na samej animacji – tworzymy więc następny ekran. Teraz potrzebna nam jest pusta warstwa z tłem, która posłuży jako 3 ekran. Ponownie wracamy do animacji i łączymy warstwę z warstwą numer 2. Ustawiamy takie same parametry, zmieniając tylko czas. Następnie powielamy warstwę z tłem i umieszczamy na niej logo „Moony”. Przy animacji tego elementu zmieniamy tylko czas na 1 s. Analogicznie, jak poprzednio, tworzymy następny ekran, dodając księżyc.

Wskazówka: zwróć uwagę na kolejność warstw przy księżycu – dzięki niemu ma on swoją poświatę.

W zakładce prototype ustawiamy animację analogiczną do poprzednich, ze zmianą czasu na 3 s. Ostatni ekran będzie z samym księżycem. Na kolejnym zdublowanym ekranie usuwamy logo i dodajemy te same parametry animacji. Kolejny etap gotowy i w tym momencie mamy już cały ekran z ładowaniem się aplikacji, płynnie przechodzący w logo, oraz wstęp do strony głównej apki!

 

KROK 5. Po animacji ładowania przyszedł czas na stronę główną aplikacji. Skopiujmy po raz kolejny ekran z tłem i księżycem. Dodajmy gotowy element z przygotowanych wcześniej w pliku – ten z informacjami na temat księżyca. Umieśćmy go w odpowiedniej odległości od księżyca – tak, żeby wypełniał dolną część aplikacji. Pośrodku, pomiędzy księżycem a informacjami, dorzućmy jeszcze tekst „19 October” w rozmiarze 32 oraz w kolorze #D2DEFA. Kolejnym i ostatnim elementem będą chmury. Tak, jak przy poprzednich elementach, możesz skorzystać z przygotowanych przeze mnie chmur.

Wskazówka: jeśli klikniesz na którąkolwiek z chmur, zobaczysz, że jej przestrzeń jest znacznie większa niż ona sama. Taki rozmiar przyda się do animacji. Dzięki temu element nie ucieknie nam z wybranego ekranu i chmury spokojnie będą mogły pojawić się na ekranie i zniknąć.

Przy pierwszym ekranie chmury powinny być całkowicie ukryte z lewej strony ekranu. Kopiujemy warstwy, przesuwamy tylko chmury w prawą stronę. Utworzymy w ten sposób jeszcze 4 warstwy. Ostatnia warstwa powinna być już tylko z samym księżycem. Przejdźmy teraz do samej animacji: wszędzie ustalamy time 0 s, auto animację bez żadnego przejścia oraz czas animacji na 3s. I nasza aplikacja jest gotowa! 🙂

Używanie animacji jest doskonałym sposobem na pokazanie, jak coś powinno działać. Owszem, jest to bardzo czasochłonny proces, ale często nasza praca jest wynagradzana efektem zachwytu u użytkownika! Oczywiście to nie całość animacji. Adobe wciąż dodaje nowe sztuczki – zawsze można się pobawić efektami przejścia i czasem. Często te drobiazgi potrafią bardzo zmienić nasz wcześniejszy zamysł, więc gorąco zachęcam do próbowania!