Pelajari cara menggunakan AnimatedContent untuk lebih banyak transisi khusus antara berbagai jenis konten
Apakah Anda beralih di antara komposisi yang berbeda dan khawatir tentang efek menggelegar ketika pengguna langsung melihat perubahan di layar, tanpa transisi yang anggun di antara keduanya? Yah tidak terlihat lagi! AnimatedContent (saat ini eksperimental) adalah komposisi yang memungkinkan Anda untuk transisi antara komposisi yang berbeda dengan efek transisi yang lebih halus dan lebih kustom. Secara default, membungkus komposisi Anda yang berubah menjadi AnimatedContent, akan memudar dan menskalakan konten Anda masuk dan keluar. Ini dapat membuat perbedaan besar pada tampilan dan nuansa aplikasi Anda, tanpa banyak usaha.
Mari kita lihat contoh sederhana, di aplikasi Jetsurvey, kami memiliki kondisi yang beralih antara hasil survei, atau pertanyaan di dalam survei itu sendiri:
Menjalankan ini, kita dapat mengamati transisi perubahan status tidak semulus yang kita inginkan:
Jika kita membungkusnya when pernyataan dalam AnimatedContentmelewati yang baru state sebagai targetStatekita bisa mendapatkan transisi yang jauh lebih baik antara dua layar ini dengan cukup mudah:
Di dalam AnimatedContent lambda, penting untuk digunakan targetState parameter dan bukan state parameter, karena ini akan memastikan animasi berjalan dengan lancar saat perlu beralih cepat di antara status yang berbeda. Menjalankan ini, kita dapat melihat ada peningkatan besar dalam transisi antara dua komposisi (diperlambat ke 0,25x):
Mari kita sesuaikan transisi ini sedikit lebih banyak, dengan menggunakan opsional transitionSpec parameter yang dapat ditemukan di AnimatedContent bisa dikomposisi. Secara default, transitionSpec akan melakukan fade dan skala konten yang disesuaikan untuk transisi masuk dan keluar. Untuk membuatnya sedikit lebih kustom, mari ubah konten baru menjadi slideInVertically dari bawah dan fadeOut konten sebelumnya.
Itu slideInVertically fungsi mengambil dalam initialOffsetY fungsi. Ini adalah fungsi yang akan menentukan posisi dari mana memulai animasi. Dalam hal ini, kami mengembalikan initialOffsetY dari fullHeight dari konten. Ini berarti animasi akan dimulai dengan set offset di bagian bawah layar (di fullHeight). Ini mungkin tampak agak membingungkan, tetapi sistem koordinat saat menggambar di Android, dimulai dengan [0,0] titik di sudut kiri atas konten, jadi koordinatnya [0, fullHeight] ada di bagian bawah konten. Kami juga dapat menentukan animationSpec (tween, spring dll) pada transisi ini berfungsi untuk menyesuaikan durasi atau jenis animasi. Mari kita lihat seperti apa sekarang ini:
Itu terlihat jauh lebih baik! Konten meluncur masuk dari bawah, dan konten keluar memudar. Untuk melihat opsi lain yang tersedia untuk menyesuaikan transisi, lihat dokumentasi EnterTransition dan ExitTransition.
Contoh lain implementasi menggunakan AnimatedContent adalah ketika transisi antara pertanyaan yang berbeda di set. Sebelumnya konten akan berubah tanpa animasi sebagai berikut:
Dengan membungkus Question dapat disusun dalam AnimatedContentkita akan mendapatkan transisi default pada transisi pertanyaan:
Untuk membuat transisi ini lebih baik, kita dapat menggeser pertanyaan sebelumnya ke kiri layar dan pertanyaan baru dari kanan. Mari tentukan transitionSpec seperti yang ditunjukkan sebelumnya:
Ini bagus untuk maju dalam survei kami, konten meluncur seperti yang diharapkan. Tetapi Anda mungkin memperhatikan, jika kita mengklik tombol sebelumnya, animasi tidak masuk akal karena keluar dari layar dari arah yang salah:
Kami membutuhkannya untuk membalikkan animasi dan menggeser konten “baru” dari kiri ke dalam, dan konten lama ke kanan. Untuk melakukan ini, kami dapat memperluas cara kami menggunakan transitionSpec. Ini mempunyai AnimatedContentScope sebagai penerima, memberi kita kemampuan untuk mengamati atau mengakses initialState dan targetState. Ini memungkinkan kita untuk mengubah logika kita secara kondisional berdasarkan status yang berbeda:
Kami dapat memeriksa targetState.questionIndex dan bandingkan dengan initialState.questionIndexjika target.questionIndex lebih besar, kami tahu kami bergerak maju dalam survei. Kami kemudian mengatur animasi ke slideInHorizontally dengan offset awal dari lebar konten dan slideOutHorizontally dengan lebar negatif konten. jika targetState.questionIndex kurang, kita tahu kita bergerak mundur dalam survei. Kami kemudian dapat mengatur kebalikan dari apa yang akan digunakan: -fullWidth untuk meluncur masuk, dan fullWidth untuk meluncur keluar:
Kami sekarang memiliki animasi yang jauh lebih baik untuk maju dan mundur:
Ada metode pembantu, slideIntoContaineryang juga dapat digunakan untuk mencapai animasi geser dari arah tertentu, tanpa perlu mengetahui offset awal yang diperlukan. slideIntoContainer(towards = AnimatedContentScope.SlideDirection.Up) dapat menggantikan penggunaan kami dari slideInHorizontally dan slideOutHorizontally. Perbedaan antara slideIntoContainer dan slideIn/OutHorizontally/Vertically Apakah itu slideIntoContainer/slideOutOfContainer gunakan ukuran wadah sebagai offset awal/target. Ini sangat berguna ketika ukuran wadah berubah karena: SizeTransform saat meluncur masuk atau keluar.
Properti lain yang dapat disesuaikan adalah targetContentZIndex pada AnimatedContent. Itu targetContentZIndex menentukan bagaimana komposisi akan ditumpuk di atas satu sama lain. Semakin tinggi zIndex, semakin jauh ke atas tumpukan, komposisi akan muncul. Menggunakan contoh yang sama di atas, kita dapat menyesuaikan animasi agar terlihat seperti efek tumpukan kertas:
Kami mengatur targetContentZIndex ke questionIndex karena angka ini akan semakin tinggi semakin jauh dalam survei yang kita lakukan. Ini akan menghasilkan animasi berikut:
AnimatedContent juga menyediakan kemampuan untuk menyesuaikan animasi untuk perubahan ukuran wadah, dengan menentukan a SizeTransform, kita bisa mengatur bagaimana perubahan ukuran akan dianimasikan. Misalnya, melihat aplikasi contoh Crane:
Jika kita menambahkan AnimatedContent di sekitar tab terbang/tidur/makan di bagian atas layar kita, kita dapat menyesuaikan bagaimana perubahan ukuran terjadi dari waktu ke waktu. Dalam contoh ini, kami menggunakan tween sebagai sizeAnimationSpecuntuk mengubah ukuran wadah pada bingkai yang berbeda dalam animasi kita:
Kami juga bisa menyediakannya dengan yang lain animationSpec pilihan, misalnya, kita juga bisa menggunakan keyframes dan gunakan initialSize dan targetSize disediakan untuk menentukan keyframe berbeda yang mungkin kita inginkan dalam animasi ini. Untuk saat ini meskipun sederhana tween kelihatan bagus. Ini akan menghasilkan animasi berikut:
AnimatedContent adalah API sederhana yang membuat transisi antar komponen menjadi lebih menyenangkan. Untuk melihat contoh kode lengkap, lihat permintaan tarik Jetsurvey ini yang memperkenalkan perubahan ini dan permintaan tarik Derek yang memperkenalkan AnimatedContent juga.
Perlu disebutkan bahwa API ini bersifat eksperimental dan kami secara aktif mencari umpan balik yang mungkin Anda miliki tentangnya, lihat dokumentasi AnimatedContent untuk informasi lebih lanjut.
Jika Anda memiliki pertanyaan, jangan ragu untuk menghubungi saya di Twitter @riggarooatau jika Anda memiliki umpan balik atau bug untuk dilaporkan — harap laporkan di Pelacak Masalah Animasi Tulis.
Selamat bertransisi!
#Menyesuaikan #Konten #Animasi #Jetpack #Compose #oleh #Rebecca #Franks #Pengembang #Android #Juli
