Contoh MotionLayout

Dokumen ini berisi contoh cara menggunakan MotionLayout. Setiap contoh menyertakan video yang mendemonstrasikan gerakan, beserta kode yang sesuai untuk scene gerakan dan tata letak.

Gerakan dasar

Contoh ini berisi satu tampilan yang dapat Anda sentuh dan tarik untuk dipindahkan secara horizontal.

Gambar 1. Menarik tampilan.

Atribut khusus - backgroundColor

Contoh ini mirip dengan contoh Gerakan dasar. Selain gerakan dasar, warna latar belakang tampilan akan berubah saat tampilan bergerak.

Gambar 2. Menarik tampilan saat warna latar belakangnya berubah.

ImageFilterView - transisi gambar

Contoh ini menunjukkan cara mentransisikan nilai saturasi ImageFilterView.

Gambar 3. Menarik gambar saat saturasinya berubah.

Posisi bingkai utama

Contoh ini menggunakan <KeyFrameSet> untuk mengubah posisi Y tampilan selama gerakan.

Gambar 4. Menarik tampilan dan mengubah posisi Y-nya.

Interpolasi bingkai utama

Contoh ini dibuat berdasarkan contoh Posisi keyframe, yang menambahkan rotasi dan penskalaan ke transisi tampilan.

Gambar 5. Menarik tampilan dan mengubah posisi Y, rotasi, dan skalanya.

Siklus bingkai utama

Contoh ini menambahkan elemen <KeyCycle> untuk menambahkan gerakan mirip gelombang ke tampilan.

Gambar 6. Menarik tampilan dengan gerakan seperti gelombang sambil mengubah warnanya.

CoordinatorLayout (1/2)

Contoh ini menambahkan MotionLayout ke AppBarLayout yang ada untuk menambahkan gerakan ke panel aplikasi. Contoh ini dijelaskan lebih lanjut dalam Pengantar MotionLayout (bagian III).

Gambar 7. Men-scroll konten saat panel aplikasi diluaskan.

CoordinatorLayout (2/2)

Contoh ini menambahkan MotionLayout ke AppBarLayout yang ada untuk menambahkan gerakan ke panel aplikasi.

Gambar 8. Men-scroll konten saat panel aplikasi diperluas dan teks bergerak masuk dan keluar dari panel aplikasi.

DrawerLayout (1/2)

Contoh ini menunjukkan cara menambahkan gerakan ke DrawerLayout. Contoh ini akan dijelaskan lebih lanjut dalam Pengantar MotionLayout (bagian III).

Gambar 9. Memperluas `DrawerLayout`.

DrawerLayout (2/2)

Contoh ini menunjukkan cara menambahkan gerakan ke DrawerLayout.

Gambar 10. Memperluas `DrawerLayout` dengan teks menu animasi.

Panel samping

Contoh ini menunjukkan cara menampilkan panel samping saat menarik area konten utama ke kanan.

Gambar 11. Menampilkan panel samping dengan menarik konten utama.

Paralaks

Contoh ini menunjukkan latar belakang paralaks, tempat lapisan latar belakang yang berbeda bergerak pada kecepatan yang berbeda.

Gambar 12. Efek paralaks di gambar header.

ViewPager

Contoh ini menunjukkan cara menambahkan gerakan saat menggeser di antara tab ViewPager. Contoh ini dijelaskan lebih lanjut dalam Pengantar MotionLayout (bagian III).

Gambar 13. Efek paralaks pada gambar header saat menggeser `ViewPager`.

ViewPager - Lottie

Contoh ini menunjukkan cara menambahkan gerakan saat menggeser di antara tab ViewPager.

Gambar 14. Gambar yang menampilkan efek Lottie di gambar header saat menggeser `ViewPager`.

Gerakan kompleks (1/3)

Contoh ini menggabungkan elemen dari contoh sebelumnya untuk mendemonstrasikan gerakan yang kompleks.

Gambar 15. Menggabungkan efek untuk membuat gerakan yang kompleks.

Gerakan kompleks (2/3)

Contoh ini menggabungkan elemen dari contoh sebelumnya untuk mendemonstrasikan gerakan yang kompleks.

Gambar 16. Menggabungkan efek untuk membuat gerakan yang kompleks.

Gerakan kompleks (3/3)

Contoh ini menggabungkan elemen dari contoh sebelumnya untuk mendemonstrasikan gerakan yang kompleks.

Gambar 17. Menggabungkan efek untuk membuat gerakan yang kompleks.

Transisi fragmen (1/2)

Contoh ini menunjukkan cara menggunakan MotionLayout untuk melakukan transisi antarfragmen.

Gambar 18. Transisi fragmen.

Transisi fragmen (2/2)

Contoh ini menunjukkan cara menggunakan MotionLayout untuk melakukan transisi antarfragmen.

Gambar 19. Transisi fragmen.

Gerakan seperti YouTube

Contoh ini menunjukkan transisi antara tampilan ringkas dan pengalaman layar penuh dengan konten tambahan.

Gambar 20. Transisi fragmen mirip dengan YouTube.

KeyTrigger

Contoh ini menunjukkan cara menampilkan dan menyembunyikan tombol tindakan mengambang saat transisi melewati batas progres.

Gambar 21. Menampilkan dan menyembunyikan tombol tindakan mengambang.

Multi-status

Contoh ini menunjukkan cara menggunakan status untuk menentukan gerakan mana yang akan diterapkan.

Gambar 22. Gerakan yang berbeda berdasarkan status.