Tworzenie animacji za pomocą edytora ruchu

Android Studio zawiera edytor projektu wizualnego dla typu układu MotionLayout, co ułatwia tworzenie i podglądanie animacji.

Edytor ruchu udostępnia prosty interfejs do manipulowania elementami z biblioteki MotionLayout, która stanowi podstawę animacji w aplikacjach na Androida. Bez Androida Studio tworzenie i modyfikowanie tych elementów wymaga ręcznego edytowania ograniczeń w plikach zasobów XML. Edytor ruchu może jednak wygenerować ten kod XML za Ciebie, obsługując stany początkowe i końcowe, klatki kluczowe, przejścia i osie czasu.

ConstraintLayout

Aby rozpocząć korzystanie z Edytora ruchu:

  1. Utwórz ConstraintLayout.
  2. W edytorze układu kliknij prawym przyciskiem myszy podgląd.
  3. Kliknij Convert to MotionLayout (Konwertuj na MotionLayout), jak pokazano poniżej.

Po przekonwertowaniu przez Android Studio elementu ConstraintLayout na MotionLayout do katalogu zawierającego plik XML zostanie dodany plik MotionScene (.xml z rozszerzeniem _scene dołączonym do nazwy pliku układu).

Element MotionLayout staje się układem głównym i pojawia się w interfejsie Edytora ruchu. Układ zawiera już punkt początkowy ConstraintSet, punkt końcowy ConstraintSet i przejście od punktu początkowego do punktu końcowego.

Za pomocą grafiki przeglądowej możesz wybrać ConstraintSet lubTransition oraz komponenty w panelu wyboru.

Następnie możesz edytować ograniczenia i atrybuty początku lub końca w ConstraintSet taki sam sposób, jak w przypadku ConstraintLayout.

Jeśli chcesz dodać do wykresu więcej elementów, możesz użyć ikon tworzenia, aby szybko dodać gesty ConstraintSet, Transition lub OnClick/OnSwipe.

Aby dodać klatkę kluczową, najpierw kliknij strzałkę Przejście:

Następnie w panelu osi czasu Przejście kliknij prawy górny róg i wybierz KeyPosition:

Otworzy się okno, w którym możesz ustawić atrybuty klatki kluczowej.

Możesz też dodać do przejścia obsługę zdarzeń OnClickOnSwipe w panelu atrybutów.

Otworzy się okno, w którym możesz ustawić atrybuty kliknięcia, takie jak komponenty docelowe i kierunek przeciągania.

Edytor ruchu umożliwia wyświetlanie podglądu animacji na powierzchni projektu. Gdy wybierzesz animację, kliknij Odtwórz nad osią czasu, aby wyświetlić podgląd animacji.