Membuat animasi transisi kustom

Mencoba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menambahkan animasi di Compose.

Menambahkan beberapa properti dengan transisi di Compose →

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 menentukan subset tampilan target untuk animasi Anda.

Halaman ini mengajarkan 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 Ringkasan animasi properti. Animasi properti mengubah properti tampilan dari nilai awal ke nilai akhir selama jangka waktu tertentu, sehingga framework harus memiliki nilai awal dan akhir properti 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 untuk 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 ke 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 di scene awal dan akhir. Framework ini mempertahankan peta terpisah untuk status tampilan awal dan akhir.

Membuat animator kustom

Untuk menganimasikan perubahan tampilan antara statusnya di scene awal dan statusnya di scene akhir, sediakan animator dengan mengganti 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 atau fade-in yang diimplementasikan sebagai transisi kustom. Jika scene awal memiliki lima target, dan dua di antaranya dihapus dari scene akhir, dan scene akhir memiliki tiga target dari scene awal ditambah target baru, framework akan memanggil createAnimator() enam kali. Tiga panggilan menganimasikan memudar dan munculnya target yang tetap berada di kedua objek tampilan. Dua panggilan lainnya menganimasikan memudarnya target yang dihapus dari scene akhir. Satu panggilan menganimasikan fade-in target baru di scene akhir.

Untuk tampilan target yang ada di 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.