Przykłady Motion Layout

Wypróbuj tworzenie wiadomości
Jetpack Compose to zalecany zestaw narzędzi interfejsu na Androida. Dowiedz się, jak korzystać z animacji w Compose.
Animacje w sekcji Tworzenie →

Ten dokument zawiera przykłady użycia MotionLayout. Każdy przykład zawiera film demonstrujący ruch oraz odpowiedni kod dla sceny i schematów ruchu.

Podstawowy ruch

Ten przykład zawiera jeden widok, który możesz dotykać i przeciągać, aby przesuwać go w poziomie.

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 przesuwaniem widoku.

Rysunek 2. przeciąganie widoku, gdy zmienia się jego kolor tła;

ImageFilterView – przejście między obrazami

Z tego przykładu dowiesz się, jak zmienić wartość nasycenia ImageFilterView.

Rysunek 3. przeciąganie obrazu podczas zmiany nasycenia,

Pozycja klatki kluczowej

W tym przykładzie użyto <KeyFrameSet> do zmiany pozycji Y widoku podczas animacji.

Rysunek 4. przeciąganie widoku i zmienianie jego pozycji na osi Y.

Interpolacja klatek kluczowych

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

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

Cykl klatek kluczowych

W tym przykładzie dodaję elementy <KeyCycle>, aby nadać widokowi falujący ruch.

Rysunek 6. Przeciąganie widoku z falowatym ruchem przy jednoczesnym zmienianiu jego koloru.

CoordinatorLayout (1/2)

W tym przykładzie dodajemy MotionLayout do istniejącej AppBarLayout, aby nadać ruch paskowi aplikacji. Ten przykład jest bardziej szczegółowo opisany w artykule Wprowadzenie do MotionLayout (część III).

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

CoordinatorLayout (2/2)

W tym przykładzie dodajemy MotionLayout do istniejącej AppBarLayout, aby nadać ruch paskowi aplikacji.

Rysunek 8. przewijanie treści, gdy pasek aplikacji rozszerza się i tekst animuje się na nim i z niego;

DrawerLayout (1/2)

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

Rysunek 9. Rozwinięcie „DrawerLayout”.

DrawerLayout (2 z 2)

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

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

Panel boczny

Ten przykład pokazuje, jak wyświetlić panel boczny, gdy przeciągniesz obszar treści głównej w prawo.

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

Paralaksa

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

Rysunek 12. Efekt paralaksy w nagłówku obrazu.

ViewPager

Ten przykład pokazuje, jak dodać animację podczas przesuwania między kartami ViewPager. Ten przykład jest bardziej szczegółowo opisany w artykule Wprowadzenie do MotionLayout (część III).

Rysunek 13. Efekt paralaksy w nagłówku obrazu podczas przesuwania widoku slajdu.

ViewPager – Lottie

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

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

Złożony ruch (1/3)

Ten przykład łączy elementy z poprzednich przykładów, aby zademonstrować złożoną animację.

Rysunek 15. Łączenie efektów w celu tworzenia złożonych ruchów.

Złożony ruch (2 z 3)

Ten przykład łączy elementy z poprzednich przykładów, aby zademonstrować złożoną animację.

Rysunek 16. Łączenie efektów w celu tworzenia złożonych ruchów.

Skomplikowany ruch (3/3)

Ten przykład łączy elementy z poprzednich przykładów, aby zademonstrować złożoną animację.

Rysunek 17. Łączenie efektów w celu tworzenia złożonych ruchów.

Przejście między fragmentami (1/2)

Ten przykład pokazuje, jak za pomocą pola MotionLayout przechodzić między fragmentami.

Rysunek 18. Przejście między fragmentami.

Przejście między fragmentami (2 z 2)

Ten przykład pokazuje, jak za pomocą pola MotionLayout przechodzić między fragmentami.

Rysunek 19. Przejście między fragmentami.

Ruch podobny do tego w YouTube

Ten przykład pokazuje przejście z widoku kompaktowego do widoku pełnoekranowego z dodatkowymi treściami.

Rysunek 20. Przejścia między fragmentami podobne do YouTube.

KeyTrigger

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

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

Wiele stanów

Ten przykład pokazuje, jak użyć stanu, aby określić, które animacje mają być stosowane.

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