Ta strona została przetłumaczona przez Cloud Translation API.

Przykłady Motion Layout

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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).

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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).

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

Rysunek 9. Rozwinięcie „DrawerLayout”.

DrawerLayout (2 z 2)

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

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

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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).

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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ę.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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ę.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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ę.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene.

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