Przykłady Motion Layout

Ten dokument zawiera przykłady użycia narzędzia MotionLayout. Każdy przykład obejmuje film przedstawiający ruch oraz odpowiedni kod sceny i układów ruchu.

Ruch podstawowy

Ten przykład zawiera pojedynczy widok, który możesz dotknąć i przeciągnąć w celu przesunięcia w poziomie.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 1. Przeciąganie widoku.

Atrybut niestandardowy – backgroundColor

Ten przykład jest podobny do przykładu Ruch podstawowy. Oprócz podstawowego ruchu kolor tła widoku zmienia się wraz z jego przesuwaniem.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 2. Przeciąganie widoku w czasie, gdy zmienia się kolor jego tła.

ImageFilterView – przejście obrazu

Ten przykład pokazuje, jak zmienić wartość nasycenia elementu ImageFilterView.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 3. Przeciąganie obrazu, by zmienić jego nasycenie.

Pozycja klatki kluczowej

W tym przykładzie użyto elementu <KeyFrameSet>, aby zmienić położenie na osi Y widoku podczas ruchu.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 4. Przeciąganie widoku i zmiana jego pozycji na osi Y.

Interpolacja klatek kluczowych

Ten przykład korzysta z przykładu Pozycja klatki kluczowej przez dodanie rotacji i skalowania do przejścia w widoku.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 5. Przeciąganie widoku i zmienianie jego pozycji na osi Y, obrotu oraz skali.

Cykl klatki kluczowej

W tym przykładzie dodano elementy <KeyCycle>, by dodać do widoku ruch fali.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 6. Przeciąganie widoku falami przy jednoczesnym zmianie jego koloru.

Układ koordynatora (1/2)

Ten przykład dodaje element MotionLayout do istniejącego elementu AppBarLayout, aby dodać ruch do paska aplikacji. Przykład dokładnie opisano we wprowadzeniu do Motion Layout (część III).

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 7. przewijanie treści podczas rozwijania paska aplikacji;

Układ koordynatora (2/2)

Ten przykład dodaje element MotionLayout do istniejącego elementu AppBarLayout, aby dodać ruch do paska aplikacji.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 8. Przewijanie treści podczas rozwijania paska aplikacji i przesuwania się tekstu w pasku aplikacji i z niego.

Układ szuflady (1/2)

Ten przykład pokazuje, jak dodać ruch do elementu DrawerLayout. Ten przykład opisano szczegółowo we wprowadzeniu do Motion Layout (część III).

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 9. Rozwiń „Układ szuflady”.

Układ szuflady (2/2)

Ten przykład pokazuje, jak dodać ruch do elementu DrawerLayout.

• Wyświetl plik XML układu.
• Wyświetl plik XML MotionScene dla głównej treści.
• Wyświetl plik XML menu MotionScene.

Rysunek 10. Rozwijamy „Układ rysunku” z animowanym tekstem menu.

Panel boczny

Ten przykład pokazuje, jak wyświetlić panel boczny podczas przeciągania w prawo głównego obszaru treści.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 11. Wyświetlam panel boczny przez przeciągnięcie głównej zawartości.

Paralaksa

Ten przykład pokazuje tło paralaksy, w którym różne warstwy tła poruszają się z różną prędkością.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 12. Efekt paralaksy w obrazie nagłówka.

ViewPager

Ten przykład pokazuje, jak dodać ruch podczas przesuwania między kartami ViewPager. Przykład dokładnie opisano we wprowadzeniu do Motion Layout (część III).

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 13. Efekt paralaksy w obrazie nagłówka podczas przesuwania obiektu „ViewPager”.

ViewPager – Lottie

Ten przykład pokazuje, jak dodać ruch podczas przesuwania między kartami ViewPager.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 14. Obraz pokazujący efekt Lottie w obrazie nagłówka podczas przesuwania „ViewPager”.

Złożone ruchy (1/3)

W tym przykładzie połączono elementy z poprzednich przykładów, aby zademonstrować złożony ruch.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 15. Łączenie efektów w celu uzyskania złożonego ruchu.

Złożone ruchy (2/3)

W tym przykładzie połączono elementy z poprzednich przykładów, aby zademonstrować złożony ruch.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 16. Łączenie efektów w celu uzyskania złożonego ruchu.

Złożone ruchy (3/3)

W tym przykładzie połączono elementy z poprzednich przykładów, aby zademonstrować złożony ruch.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 17. Łączenie efektów w celu uzyskania złożonego ruchu.

Przejście fragmentu (1/2)

Ten przykład pokazuje, jak używać elementu MotionLayout do przechodzenia między fragmentami.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 18. Przejście fragmentów.

Przejście fragmentu (2/2)

Ten przykład pokazuje, jak używać elementu MotionLayout do przechodzenia między fragmentami.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 19. Przejście fragmentów.

Ruch jak w YouTube

Ten przykład pokazuje, jak przełączać się między widokiem kompaktowym a pełnoekranowym z dodatkowymi treściami.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 20. Przenoszenie fragmentów przebiega podobnie jak w YouTube.

Wyzwalacz

Ten przykład pokazuje, jak wyświetlić i ukryć pływający przycisk polecenia, gdy przejście przekracza próg postępu.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 21. Wyświetlaj i ukrywaj pływający przycisk polecenia.

Wielostanowe

Ten przykład pokazuje, jak używać stanu do określania, który ruch zastosować.

• Wyświetl plik XML układu.
• Wyświetl MotionScene (XML).

Rysunek 22. Różne ruchy w zależności od stanu.