Przykłady Motion Layout

Wypróbuj Compose
Jetpack Compose to zalecany zestaw narzędzi UI dla Androida. Dowiedz się, jak używać animacji w Compose.
Animacje w Compose →

W tym dokumencie znajdziesz przykłady użycia MotionLayout. Każdy przykład zawiera film pokazujący ruch oraz odpowiedni kod sceny ruchu i układów.

Podstawowy ruch

Ten przykład zawiera pojedynczy widok, który możesz dotknąć i przeciągnąć, aby przesunąć go w poziomie.

Rysunek 1. Przeciąganie widoku.

Atrybut niestandardowy – backgroundColor

Ten przykład jest podobny do przykładu Podstawowy ruch. Oprócz podstawowego ruchu, gdy widok się przesuwa, zmienia się też jego kolor tła.

Rysunek 2. Przeciąganie widoku przy jednoczesnej zmianie jego koloru tła.

ImageFilterView – przejście obrazu

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

Rysunek 3. Przeciąganie obrazu przy jednoczesnej zmianie jego nasycenia.

Pozycja klatki kluczowej

W tym przykładzie używamy <KeyFrameSet>, aby zmienić pozycję Y widoku podczas ruchu.

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

Interpolacja klatki kluczowej

Ten przykład opiera się na przykładzie Pozycja klatki kluczowej i dodaje do przejścia widoku obrót i skalowanie.

Rysunek 5. Przeciąganie widoku i zmiana jego pozycji Y, obrotu i skali.

Cykl klatek kluczowych

Ten przykład dodaje elementy <KeyCycle>, aby dodać do widoku ruch falowy.

Rysunek 6. Przeciąganie widoku z ruchem falowym przy jednoczesnej zmianie jego koloru.

CoordinatorLayout (1/2)

Ten przykład dodaje MotionLayout do istniejącego AppBarLayout, aby dodać ruch do paska aplikacji. Ten przykład jest dokładniej opisany w artykule Wprowadzenie do MotionLayout (część III).

Rysunek 7. Przewijanie treści przy jednoczesnym rozwijaniu paska aplikacji.

CoordinatorLayout (2/2)

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

Rysunek 8. Przewijanie treści przy jednoczesnym rozwijaniu paska aplikacji oraz animowaniu tekstu wchodzącego i wychodzącego z paska aplikacji.

DrawerLayout (1/2)

Ten przykład pokazuje, jak dodać ruch do DrawerLayout. Ten przykład jest dokładniej opisany w artykule Wprowadzenie do MotionLayout (część III).

Rysunek 9. Rozwijanie `DrawerLayout`.

DrawerLayout (2/2)

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

Rysunek 10. Rozwijanie `DrawerLayout` z animowanym tekstem menu.

Panel boczny

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

Rysunek 11. Wyświetlanie panelu bocznego przez przeciągnięcie treści głównej.

Paralaksa

Ten przykład pokazuje tło z efektem paralaksy, w którym różne warstwy tła przesuwają się z różnymi prędkościami.

Rysunek 12. Efekt paralaksy na obrazie w nagłówku.

ViewPager

Ten przykład pokazuje, jak dodać ruch podczas przesuwania palcem między kartami ViewPager. Ten przykład jest dokładniej opisany w artykule Wprowadzenie do MotionLayout (część III).

Rysunek 13. Efekt paralaksy na obrazie w nagłówku podczas przesuwania palcem `ViewPager`.

ViewPager – Lottie

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

Rysunek 14. Obraz przedstawiający efekt Lottie na obrazie w nagłówku podczas przesuwania palcem `ViewPager`.

Złożony ruch (1/3)

Ten przykład łączy elementy z poprzednich przykładów, aby zademonstrować złożony ruch.

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

Złożony ruch (2/3)

Ten przykład łączy elementy z poprzednich przykładów, aby zademonstrować złożony ruch.

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

Złożony ruch (3/3)

Ten przykład łączy elementy z poprzednich przykładów, aby zademonstrować złożony ruch.

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

Przejście fragmentu (1/2)

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

Rysunek 18. Przejście fragmentu.

Przejście fragmentu (2/2)

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

Rysunek 19. Przejście fragmentu.

Ruch podobny do YouTube

Ten przykład pokazuje przejście między widokiem kompaktowym a pełnoekranowym z dodatkową treścią.

Rysunek 20. Przejście fragmentów podobne do YouTube.

KeyTrigger

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

Rysunek 21. Wyświetlanie i ukrywanie pływającego przycisku polecenia.

Wiele stanów

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

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