Membuat animasi transisi kustom

Transisi kustom memungkinkan Anda membuat animasi yang tidak tersedia dari class transisi bawaan apa pun. Misalnya, Anda dapat menentukan transisi kustom yang mengubah warna latar depan kolom teks dan input menjadi abu-abu untuk menunjukkan bahwa kolom tersebut dinonaktifkan di layar baru. Jenis perubahan ini membantu pengguna melihat kolom yang Anda nonaktifkan.

Transisi kustom, seperti salah satu jenis transisi bawaan, menerapkan animasi untuk tampilan turunan dari scene awal dan akhir. Namun, tidak seperti jenis transisi bawaan, Anda harus menyediakan kode yang mengambil nilai properti dan menghasilkan animasi. Anda juga dapat menetapkan subset tampilan target untuk animasi Anda.

Halaman ini menunjukkan cara mengambil nilai properti dan membuat animasi untuk membuat transisi kustom.

Memperluas class Transisi

Untuk membuat transisi kustom, tambahkan class ke project Anda yang memperluas class Transition dan ganti fungsi yang ditampilkan dalam cuplikan berikut:

Kotlin

    class CustomTransition : Transition() {

        override fun captureStartValues(transitionValues: TransitionValues) {}

        override fun captureEndValues(transitionValues: TransitionValues) {}

        override fun createAnimator(
            sceneRoot: ViewGroup,
            startValues: TransitionValues?,
            endValues: TransitionValues?
        ): Animator? {}

    }
    

Java

    public class CustomTransition extends Transition {

        @Override
        public void captureStartValues(TransitionValues values) {}

        @Override
        public void captureEndValues(TransitionValues values) {}

        @Override
        public Animator createAnimator(ViewGroup sceneRoot,
                                       TransitionValues startValues,
                                       TransitionValues endValues) {}
    }
    

Bagian berikut menjelaskan cara mengganti fungsi ini.

Mengambil nilai properti tampilan

Animasi transisi menggunakan sistem animasi properti yang dijelaskan dalam Animasi properti. Animasi properti mengubah properti tampilan antara nilai awal dan akhir selama jangka waktu tertentu, sehingga framework harus memiliki nilai properti awal dan akhir untuk membuat animasi.

Namun, animasi properti biasanya hanya memerlukan subset dari semua nilai properti tampilan tersebut. Misalnya, animasi warna memerlukan nilai properti warna, sedangkan animasi gerakan memerlukan nilai properti posisi. Karena nilai properti yang diperlukan bagi animasi bersifat khusus untuk transisi, framework transisi tidak memberikan setiap nilai properti untuk transisi. Sebagai gantinya, framework memanggil fungsi callback yang memungkinkan transisi untuk hanya mengambil nilai properti yang diperlukan dan menyimpannya dalam framework.

Mengambil nilai awal

Untuk meneruskan nilai tampilan awal ke framework, implementasikan fungsi captureStartValues(transitionValues). Framework akan memanggil fungsi ini untuk setiap tampilan dalam scene awal. Argumen fungsi adalah objek TransitionValues yang berisi referensi untuk tampilan dan instance Map tempat Anda dapat menyimpan nilai tampilan yang diinginkan. Dalam implementasinya, ambil nilai properti ini dan teruskan kembali ke framework dengan menyimpannya di peta.

Untuk memastikan bahwa kunci nilai properti tidak bertentangan dengan kunci TransitionValues lainnya, gunakan skema penamaan berikut:

    package_name:transition_name:property_name
    

Cuplikan berikut menunjukkan implementasi fungsi captureStartValues():

Kotlin

    class CustomTransition : Transition() {

        // Define a key for storing a property value in
        // TransitionValues.values with the syntax
        // package_name:transition_class:property_name to avoid collisions
        private val PROPNAME_BACKGROUND = "com.example.android.customtransition:CustomTransition:background"

        override fun captureStartValues(transitionValues: TransitionValues) {
            // Call the convenience method captureValues
            captureValues(transitionValues)
        }

        // For the view in transitionValues.view, get the values you
        // want and put them in transitionValues.values
        private fun captureValues(transitionValues: TransitionValues) {
            // Get a reference to the view
            val view = transitionValues.view
            // Store its background property in the values map
            transitionValues.values[PROPNAME_BACKGROUND] = view.background
        }

        ...

    }
    

Java

    public class CustomTransition extends Transition {

        // Define a key for storing a property value in
        // TransitionValues.values with the syntax
        // package_name:transition_class:property_name to avoid collisions
        private static final String PROPNAME_BACKGROUND =
                "com.example.android.customtransition:CustomTransition:background";

        @Override
        public void captureStartValues(TransitionValues transitionValues) {
            // Call the convenience method captureValues
            captureValues(transitionValues);
        }

        // For the view in transitionValues.view, get the values you
        // want and put them in transitionValues.values
        private void captureValues(TransitionValues transitionValues) {
            // Get a reference to the view
            View view = transitionValues.view;
            // Store its background property in the values map
            transitionValues.values.put(PROPNAME_BACKGROUND, view.getBackground());
        }
        ...
    }
    

Mengambil nilai akhir

Framework ini memanggil fungsi captureEndValues(TransitionValues) sekali untuk setiap tampilan target pada scene akhir. Selain itu, captureEndValues() berfungsi sama seperti captureStartValues().

Cuplikan kode berikut menunjukkan implementasi fungsi captureEndValues():

Kotlin

    override fun captureEndValues(transitionValues: TransitionValues) {
        captureValues(transitionValues)
    }
    

Java

    @Override
    public void captureEndValues(TransitionValues transitionValues) {
        captureValues(transitionValues);
    }
    

Dalam contoh ini, fungsi captureStartValues() dan captureEndValues() akan memanggil captureValues() untuk mengambil dan menyimpan nilai. Properti tampilan yang diambil captureValues() sama, tetapi memiliki nilai yang berbeda pada scene awal dan akhir. Framework ini mempertahankan peta terpisah untuk status tampilan awal dan akhir.

Membuat animator kustom

Untuk menganimasikan perubahan tampilan antara status pada scene awal dan scene akhir, sediakan animator dengan fungsi createAnimator(). Saat framework memanggil fungsi ini, fungsi tersebut akan meneruskan tampilan root scene dan objek TransitionValues yang berisi nilai awal dan akhir yang Anda ambil.

Frekuensi framework memanggil fungsi createAnimator() bergantung pada perubahan yang terjadi antara scene awal dan akhir. Misalnya, pertimbangkan animasi fade out/fade in yang diimplementasikan sebagai transisi kustom. Jika scene awal memiliki lima target, yaitu dua target yang dihapus dari scene akhir, dan scene akhir memiliki tiga target dari scene awal ditambah target baru, maka framework akan memanggil createAnimator() 6 kali: tiga dari panggilan menganimasikan fade in dan fade out untuk target yang tetap berada di kedua objek scene; dua panggilan lainnya menganimasikan fade out target yang dihapus dari scene akhir; dan satu panggilan akan menganimasikan fade in target baru di scene akhir.

Untuk tampilan target yang ada pada scene awal dan akhir, framework menyediakan objek TransitionValues untuk argumen startValues dan endValues. Untuk tampilan target yang hanya ada di scene awal atau akhir, framework menyediakan objek TransitionValues untuk argumen yang sesuai dan null untuk argumen lainnya.

Untuk mengimplementasikan fungsi createAnimator(ViewGroup, TransitionValues, TransitionValues) saat Anda membuat transisi kustom, gunakan nilai properti tampilan yang Anda ambil untuk membuat objek Animator dan tampilkan ke framework. Untuk contoh implementasi, lihat class ChangeColor dalam contoh CustomTransition. Untuk informasi selengkapnya tentang animator properti, lihat Animasi properti.

Menerapkan transisi kustom

Transisi kustom sama fungsinya seperti transisi bawaan. Anda dapat menerapkan transisi kustom menggunakan pengelola transisi, seperti yang dijelaskan dalam Menerapkan transisi.