Ringkasan Animasi Properti

Coba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan Animasi di Compose.

animate*AsState →

Sistem animasi properti adalah framework canggih yang memungkinkan Anda menganimasikan hampir semua hal. Anda dapat menentukan animasi untuk mengubah properti objek dari waktu ke waktu, terlepas dari apakah properti digambar ke layar atau tidak. Animasi properti mengubah nilai properti (kolom dalam objek) selama jangka waktu tertentu. Untuk menganimasikan sesuatu, Anda harus menentukan properti objek yang ingin dianimasikan, seperti posisi objek di layar, berapa lama Anda ingin menganimasikannya, dan nilai apa yang ingin Anda animasikan.

Sistem animasi properti memungkinkan Anda menentukan karakteristik animasi berikut:

• Durasi: Anda dapat menentukan durasi animasi. Durasi defaultnya adalah 300 milidetik.
• Jenis interpolasi waktu: Anda dapat menentukan cara penghitungan nilai properti sebagai fungsi dari waktu berlalu saat ini untuk animasi tersebut.
• Jumlah dan perilaku berulang: Anda dapat menentukan apakah animasi akan diulang atau tidak saat mencapai akhir durasi dan berapa kali animasi akan diulang. Anda juga dapat menentukan apakah ingin animasi diputar secara terbalik. Menyetelnya ke terbalik akan memutar animasi maju lalu mundur berulang kali, hingga mencapai jumlah pengulangan yang ditentukan.
• Kumpulan animator: Anda dapat mengelompokkan beberapa animasi ke dalam kumpulan logis yang diputar secara bersamaan, berurutan, atau setelah penundaan tertentu.
• Penundaan refresh frame: Anda dapat menentukan frekuensi refresh frame animasi. Defaultnya disetel agar memuat ulang setiap 10 milidetik, tetapi kecepatan refresh frame oleh aplikasi pada akhirnya bergantung pada seberapa sibuk sistem secara keseluruhan dan seberapa cepat sistem dapat melayani timer yang mendasarinya.

Untuk melihat contoh lengkap animasi properti, lihat class ChangeColor dalam contoh CustomTransition di GitHub.

Cara kerja animasi properti

Pertama-tama, mari kita bahas cara kerja animasi melalui sebuah contoh sederhana. Gambar 1 menggambarkan objek hipotetis yang dianimasikan dengan properti x-nya, yang mewakili lokasi horizontalnya di layar. Durasi animasi disetel ke 40 milidetik dan jarak yang ditempuh adalah 40 piksel. Setiap 10 milidetik, yang merupakan kecepatan refresh frame default, objek bergerak secara horizontal sejauh 10 piksel. Pada akhir 40 milidetik, animasi akan berhenti, dan objek berakhir di posisi horizontal 40. Ini adalah contoh animasi dengan interpolasi linier, yang berarti objek bergerak dengan kecepatan konstan.

Gambar 1. Contoh animasi linier

Anda juga dapat menentukan animasi untuk memiliki interpolasi non-linear. Gambar 2 mengilustrasikan objek fiktif yang melaju cepat di awal animasi, lalu melambat di akhir animasi. Objek masih bergerak 40 piksel dalam 40 milidetik, tetapi tidak linier. Pada awalnya, animasi ini dipercepat hingga titik tengah, lalu melambat dari titik tengah hingga akhir animasi. Seperti ditunjukkan pada Gambar 2, jarak yang ditempuh di awal dan akhir animasi lebih kecil daripada di tengah animasi.

Gambar 2. Contoh animasi non-linear

Mari kita lihat secara mendetail bagaimana komponen penting dari sistem animasi properti akan menghitung animasi seperti yang diilustrasikan di atas. Gambar 3 menunjukkan cara class utama bekerja sama satu sama lain.

Gambar 3. Cara animasi dihitung

Objek ValueAnimator melacak pengaturan waktu animasi, seperti berapa lama animasi telah berjalan, dan nilai saat ini dari properti yang dianimasikannya.

ValueAnimator mengenkapsulasi TimeInterpolator, yang menentukan interpolasi animasi, dan TypeEvaluator, yang menentukan cara menghitung nilai untuk properti yang sedang dianimasikan. Misalnya, dalam Gambar 2, TimeInterpolator yang digunakan adalah AccelerateDecelerateInterpolator dan TypeEvaluator adalah IntEvaluator.

Untuk memulai animasi, buat ValueAnimator dan berikan nilai awal dan akhir untuk properti yang ingin Anda animasikan, beserta durasi animasinya. Saat Anda memanggil start(), animasi akan dimulai. Selama seluruh animasi, ValueAnimator menghitung fraksi berlalu antara 0 dan 1, berdasarkan durasi animasi dan berapa banyak waktu yang telah berlalu. Fraksi berlalu menunjukkan persentase waktu animasi telah selesai, 0 berarti 0% dan 1 berarti 100%. Misalnya, dalam Gambar 1, fraksi berlalu pada t = 10 milidetik akan menjadi 0,25 karena total durasinya adalah t = 40 milidetik.

Setelah selesai menghitung fraksi berlalu, ValueAnimator akan memanggil TimeInterpolator yang saat ini ditetapkan untuk menghitung fraksi terinterpolasi. Fraksi terinterpolasi memetakan fraksi berlalu ke fraksi baru yang memperhitungkan interpolasi waktu yang ditetapkan. Misalnya, dalam Gambar 2, karena animasi dipercepat secara perlahan, fraksi terinterpolasi, sekitar 0,15, lebih kecil daripada fraksi berlalu, 0,25, pada t = 10 mdtk. Pada Gambar 1, fraksi terinterpolasi selalu sama dengan fraksi berlalu.

Saat fraksi terinterpolasi dihitung, ValueAnimator akan memanggil TypeEvaluator yang sesuai, untuk menghitung nilai properti yang Anda animasikan, berdasarkan fraksi terinterpolasi, nilai awal, dan nilai akhir animasi. Misalnya, dalam Gambar 2, fraksi terinterpolasi adalah 0,15 pada t = 10 mdtk, sehingga nilai untuk properti pada saat itu adalah 0,15 × (40 - 0), atau 6.

Perbedaan antara animasi properti dengan animasi tampilan

Sistem animasi tampilan menyediakan kemampuan untuk hanya menganimasikan objek View, sehingga jika ingin menganimasikan objek non-View, Anda harus mengimplementasikan kode Anda sendiri untuk melakukannya. Sistem animasi tampilan juga dibatasi karena hanya mengekspos beberapa aspek objek View yang akan dianimasikan, misalnya penskalaan dan rotasi View, tetapi tidak dengan warna latar belakang.

Kelemahan lain dari sistem animasi tampilan adalah sistem ini hanya mengubah tempat View digambar, bukan View itu sendiri. Misalnya, jika Anda menganimasikan tombol untuk bergerak melintasi layar, tombol akan digambar dengan benar, tetapi lokasi sebenarnya tempat Anda dapat mengklik tombol tidak berubah, sehingga Anda harus menerapkan logika Anda sendiri untuk menangani hal ini.

Dengan sistem animasi properti, batasan ini akan dihapus sepenuhnya, dan Anda dapat menganimasikan properti apa pun dari objek apa pun (View dan non-View) dan objek itu sendiri benar-benar diubah. Sistem animasi properti juga lebih tangguh dalam menangani animasi. Pada level yang tinggi, Anda menetapkan animator ke properti yang ingin dianimasikan, seperti warna, posisi, atau ukuran, dan dapat menentukan aspek animasi seperti interpolasi dan sinkronisasi beberapa animator.

Namun, sistem animasi tampilan memerlukan lebih sedikit waktu untuk disiapkan dan lebih sedikit kode untuk ditulis. Jika animasi tampilan dapat menyelesaikan semua hal yang perlu Anda lakukan, atau jika kode yang ada sudah berfungsi seperti yang Anda inginkan, Anda tidak perlu menggunakan sistem animasi properti. Mungkin juga masuk akal untuk menggunakan kedua sistem animasi untuk situasi yang berbeda jika kasus penggunaannya muncul.

Ringkasan API

Anda dapat menemukan sebagian besar API sistem animasi properti di android.animation. Karena sistem animasi tampilan sudah menentukan banyak interpolator di android.view.animation, Anda juga dapat menggunakan interpolator tersebut dalam sistem animasi properti. Tabel berikut menjelaskan komponen utama sistem animasi properti.

Class Animator menyediakan struktur dasar untuk membuat animasi. Biasanya, Anda tidak menggunakan class ini secara langsung karena class ini hanya menyediakan fungsionalitas minimal yang harus diperluas untuk mendukung nilai animasi sepenuhnya. Subclass berikut memperluas Animator:

Tabel 1. Animator

Evaluator memberi tahu sistem animasi properti cara menghitung nilai untuk properti tertentu. Objek ini mengambil data pengaturan waktu yang disediakan oleh class Animator, nilai awal dan akhir animasi, serta menghitung nilai teranimasi dari properti berdasarkan data ini. Sistem animasi properti menyediakan evaluator berikut:

Tabel 2. Evaluator

Interpolator waktu menentukan cara menghitung nilai tertentu dalam animasi sebagai fungsi waktu. Misalnya, Anda dapat menentukan animasi agar terjadi secara linier di seluruh animasi, yang berarti animasi bergerak secara merata sepanjang waktu, atau Anda dapat menentukan animasi untuk menggunakan waktu non-linear, misalnya, mempercepat di awal dan melambat di akhir animasi. Tabel 3 menjelaskan interpolator yang terdapat dalam android.view.animation. Jika interpolator yang disediakan tidak ada yang sesuai dengan kebutuhan Anda, terapkan antarmuka TimeInterpolator dan buat interpolator Anda sendiri. Lihat Menggunakan interpolator untuk informasi selengkapnya tentang cara menulis interpolator kustom.

Tabel 3. Interpolator

Menganimasikan dengan ValueAnimator

Class ValueAnimator memungkinkan Anda menganimasikan jenis nilai tertentu selama durasi animasi dengan menentukan kumpulan nilai int, float, atau warna yang akan dianimasikan. Anda mendapatkan ValueAnimator dengan memanggil salah satu metode factory: ofInt(), ofFloat(), atau ofObject(). Contoh:

ValueAnimator.ofFloat(0f, 100f).apply {
    duration = 1000
    start()
}

ValueAnimator animation = ValueAnimator.ofFloat(0f, 100f);
animation.setDuration(1000);
animation.start();

Dalam kode ini, ValueAnimator mulai menghitung nilai animasi, antara 0 dan 100, selama 1.000 milidetik, saat metode start() berjalan.

Anda juga dapat menentukan jenis kustom yang akan dianimasikan dengan melakukan langkah berikut:

ValueAnimator.ofObject(MyTypeEvaluator(), startPropertyValue, endPropertyValue).apply {
    duration = 1000
    start()
}

ValueAnimator animation = ValueAnimator.ofObject(new MyTypeEvaluator(), startPropertyValue, endPropertyValue);
animation.setDuration(1000);
animation.start();

Dalam kode ini, ValueAnimator mulai menghitung nilai animasi, antara startPropertyValue dan endPropertyValue menggunakan logika yang diberikan oleh MyTypeEvaluator selama 1.000 milidetik, saat metode start() berjalan.

Anda dapat menggunakan nilai animasi ini dengan menambahkan AnimatorUpdateListener ke objek ValueAnimator, seperti yang ditunjukkan dalam kode berikut:

ValueAnimator.ofObject(...).apply {
    ...
    addUpdateListener { updatedAnimation ->
        // You can use the animated value in a property that uses the
        // same type as the animation. In this case, you can use the
        // float value in the translationX property.
        textView.translationX = updatedAnimation.animatedValue as Float
    }
    ...
}

animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator updatedAnimation) {
        // You can use the animated value in a property that uses the
        // same type as the animation. In this case, you can use the
        // float value in the translationX property.
        float animatedValue = (float)updatedAnimation.getAnimatedValue();
        textView.setTranslationX(animatedValue);
    }
});

Dalam metode onAnimationUpdate(), Anda dapat mengakses nilai animasi yang diperbarui dan menggunakannya dalam properti salah satu tampilan Anda. Untuk mengetahui informasi selengkapnya tentang pemroses, lihat bagian tentang Pemroses animasi.

Menganimasikan dengan ObjectAnimator

ObjectAnimator adalah subclass dari ValueAnimator (yang dibahas di bagian sebelumnya) dan menggabungkan mesin pengaturan waktu dan komputasi nilai ValueAnimator dengan kemampuan untuk menganimasikan properti bernama dari objek target. Hal ini mempermudah penganimasian objek apa pun, karena Anda tidak perlu lagi mengimplementasikan ValueAnimator.AnimatorUpdateListener, karena properti animasi diperbarui secara otomatis.

Membuat instance ObjectAnimator mirip dengan ValueAnimator, tetapi Anda juga menentukan objek dan nama properti objek tersebut (sebagai String) beserta nilai yang akan dianimasikan antara:

ObjectAnimator.ofFloat(textView, "translationX", 100f).apply {
    duration = 1000
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(textView, "translationX", 100f);
animation.setDuration(1000);
animation.start();

Agar ObjectAnimator memperbarui properti dengan benar, Anda harus melakukan hal berikut:

• Properti objek yang Anda animasikan harus memiliki fungsi penyetel (dalam camel case) dalam bentuk set<PropertyName>(). Karena otomatis memperbarui properti selama animasi, ObjectAnimator harus dapat mengakses properti dengan metode penyetel ini. Misalnya, jika nama properti adalah foo, Anda harus memiliki metode setFoo(). Jika metode penyetel ini tidak ada, Anda memiliki tiga opsi:
  • Menambahkan metode setter ke class jika Anda memiliki hak untuk melakukannya.
  • Gunakan class wrapper yang dapat Anda ubah dan minta wrapper menerima nilai dengan metode penyetel yang valid, lalu meneruskannya ke objek asli.
  • Sebagai gantinya, gunakan ValueAnimator.
• Jika Anda hanya menentukan satu nilai untuk parameter values... dalam salah satu metode factory ObjectAnimator, nilai tersebut diasumsikan sebagai nilai akhir animasi. Oleh karena itu, properti objek yang Anda animasikan harus memiliki fungsi pengambil yang digunakan untuk mendapatkan nilai awal animasi. Fungsi pengambil harus dalam bentuk get<PropertyName>(). Misalnya, jika nama properti adalah foo, Anda harus memiliki metode getFoo().
• Metode pengambil (jika diperlukan) dan penyetel dari properti yang Anda animasikan harus beroperasi pada jenis yang sama dengan nilai awal dan akhir yang Anda tetapkan untuk ObjectAnimator. Misalnya, Anda harus memiliki targetObject.setPropName(float) dan targetObject.getPropName() jika membuat ObjectAnimator berikut:

  ObjectAnimator.ofFloat(targetObject, "propName", 1f)
  

• Bergantung pada properti atau objek yang Anda animasikan, Anda mungkin perlu memanggil metode invalidate() di View untuk memaksa layar menggambar ulang dirinya sendiri dengan nilai animasi yang diperbarui. Lakukan hal ini di callback onAnimationUpdate(). Misalnya, menganimasikan properti warna sebuah objek Drawable hanya akan menimbulkan pembaruan pada layar jika objek tersebut menggambar ulang dirinya sendiri. Semua penyetel properti di View, seperti setAlpha() dan setTranslationX() membatalkan View dengan benar, sehingga Anda tidak perlu membatalkan View saat memanggil metode ini dengan nilai baru. Untuk mengetahui informasi selengkapnya tentang pemroses, lihat bagian tentang Pemroses animasi.

Mengatur koreografi beberapa animasi dengan AnimatorSet

Dalam banyak kasus, Anda ingin memutar animasi yang bergantung pada kapan animasi lain dimulai atau selesai. Sistem Android memungkinkan Anda memaketkan animasi menjadi AnimatorSet, sehingga Anda dapat menentukan apakah akan memulai animasi secara bersamaan, berurutan, atau setelah penundaan tertentu. Anda juga dapat menempatkan objek AnimatorSet di dalam objek AnimatorSet lainnya.

Cuplikan kode berikut memutar objek Animator berikut dengan cara berikut:

1. Memutar bounceAnim.
2. Memutar squashAnim1, squashAnim2, stretchAnim1, dan stretchAnim2 secara bersamaan.
3. Memutar bounceBackAnim.
4. Memutar fadeAnim.

val bouncer = AnimatorSet().apply {
    play(bounceAnim).before(squashAnim1)
    play(squashAnim1).with(squashAnim2)
    play(squashAnim1).with(stretchAnim1)
    play(squashAnim1).with(stretchAnim2)
    play(bounceBackAnim).after(stretchAnim2)
}
val fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f).apply {
    duration = 250
}
AnimatorSet().apply {
    play(bouncer).before(fadeAnim)
    start()
}

AnimatorSet bouncer = new AnimatorSet();
bouncer.play(bounceAnim).before(squashAnim1);
bouncer.play(squashAnim1).with(squashAnim2);
bouncer.play(squashAnim1).with(stretchAnim1);
bouncer.play(squashAnim1).with(stretchAnim2);
bouncer.play(bounceBackAnim).after(stretchAnim2);
ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);
fadeAnim.setDuration(250);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(bouncer).before(fadeAnim);
animatorSet.start();

Pemroses animasi

Anda dapat memproses peristiwa penting selama durasi animasi dengan pemroses yang dijelaskan di bawah ini.

• Animator.AnimatorListener
  • onAnimationStart() - Dipanggil saat animasi dimulai.
  • onAnimationEnd() - Dipanggil saat animasi berakhir.
  • onAnimationRepeat() - Dipanggil saat animasi berulang dengan sendirinya.
  • onAnimationCancel() - Dipanggil saat animasi dibatalkan. Animasi yang dibatalkan juga memanggil onAnimationEnd(), terlepas dari bagaimana animasi tersebut diakhiri.
• ValueAnimator.AnimatorUpdateListener

  • onAnimationUpdate() - dipanggil di setiap frame animasi. Pantau peristiwa ini untuk menggunakan nilai terhitung yang dihasilkan oleh ValueAnimator selama animasi. Untuk menggunakan nilai tersebut, buat kueri objek ValueAnimator yang diteruskan ke peristiwa untuk mendapatkan nilai animasi saat ini dengan metode getAnimatedValue(). Anda perlu menerapkan pemroses ini jika menggunakan ValueAnimator.

    Bergantung pada properti atau objek yang dianimasikan, Anda mungkin perlu memanggil invalidate() di View untuk memaksa area layar tersebut menggambar ulang dirinya sendiri dengan nilai animasi baru. Misalnya, menganimasikan properti warna sebuah objek Drawable hanya akan menimbulkan pembaruan pada layar jika objek tersebut menggambar ulang dirinya sendiri. Semua penyetel properti di View, seperti setAlpha() dan setTranslationX() membatalkan View dengan benar, sehingga Anda tidak perlu membatalkan View saat memanggil metode ini dengan nilai baru.

Anda dapat memperluas class AnimatorListenerAdapter alih-alih mengimplementasikan antarmuka Animator.AnimatorListener, jika Anda tidak ingin mengimplementasikan semua metode antarmuka Animator.AnimatorListener. Class AnimatorListenerAdapter menyediakan implementasi kosong dari metode yang dapat Anda pilih untuk diganti.

Misalnya, cuplikan kode berikut membuat AnimatorListenerAdapter hanya untuk callback onAnimationEnd():

ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f).apply {
    duration = 250
    addListener(object : AnimatorListenerAdapter() {
        override fun onAnimationEnd(animation: Animator) {
            balls.remove((animation as ObjectAnimator).target)
        }
    })
}

ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);
fadeAnim.setDuration(250);
fadeAnim.addListener(new AnimatorListenerAdapter() {
public void onAnimationEnd(Animator animation) {
    balls.remove(((ObjectAnimator)animation).getTarget());
}

Menganimasikan perubahan tata letak pada objek ViewGroup

Sistem animasi properti menyediakan kemampuan untuk menganimasikan perubahan pada objek ViewGroup serta menyediakan cara mudah untuk menganimasikan objek View itu sendiri.

Anda dapat menganimasikan perubahan tata letak dalam ViewGroup dengan class LayoutTransition. Tampilan di dalam ViewGroup dapat melalui animasi yang muncul dan menghilang saat Anda menambahkannya ke atau menghapusnya dari ViewGroup atau saat Anda memanggil metode setVisibility() View dengan VISIBLE, INVISIBLE, atau GONE. View lainnya di ViewGroup juga dapat beranimasi ke posisi barunya saat Anda menambahkan atau menghapus View. Anda dapat menentukan animasi berikut dalam objek LayoutTransition dengan memanggil setAnimator() dan meneruskan objek Animator dengan salah satu konstanta LayoutTransition berikut:

• APPEARING - Flag yang menunjukkan animasi yang berjalan pada item yang muncul dalam container.
• CHANGE_APPEARING - Flag yang menunjukkan animasi yang berjalan pada item yang berubah karena adanya item baru yang muncul dalam container.
• DISAPPEARING - Flag yang menunjukkan animasi yang berjalan pada item yang menghilang dari container.
• CHANGE_DISAPPEARING - Flag yang menunjukkan animasi yang berjalan pada item yang berubah karena adanya item yang menghilang dari container.

Anda dapat menentukan animasi kustom Anda sendiri untuk keempat jenis peristiwa ini guna menyesuaikan tampilan transisi tata letak Anda atau cukup memberi tahu sistem animasi agar menggunakan animasi default.

Untuk menetapkan atribut android:animateLayoutchanges ke true bagi ViewGroup, lakukan hal berikut:

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:id="@+id/verticalContainer"
    android:animateLayoutChanges="true" />

Menyetel atribut ini ke benar (true) akan otomatis menganimasikan View yang ditambahkan atau dihapus dari ViewGroup serta View lainnya di ViewGroup.

Menganimasikan perubahan status tampilan menggunakan StateListAnimator

Class StateListAnimator memungkinkan Anda menentukan animator yang berjalan saat status tampilan berubah. Objek ini berperilaku sebagai wrapper untuk objek Animator, yang memanggil animasi tersebut setiap kali status tampilan yang ditentukan (seperti "ditekan" atau "difokus") berubah.

StateListAnimator dapat ditentukan dalam resource XML dengan elemen <selector> root dan elemen <item> turunan yang masing-masing menentukan status tampilan berbeda yang ditentukan oleh class StateListAnimator. Setiap <item> berisi definisi untuk set animasi properti.

Misalnya, file berikut membuat animator daftar status yang mengubah skala x dan y tampilan saat ditekan:

res/xml/animate_scale.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- the pressed state; increase x and y size to 150% -->
    <item android:state_pressed="true">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1.5"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="scaleY"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1.5"
                android:valueType="floatType"/>
        </set>
    </item>
    <!-- the default, non-pressed state; set x and y size to 100% -->
    <item android:state_pressed="false">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="scaleY"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

Untuk melampirkan animator daftar status ke tampilan, tambahkan atribut android:stateListAnimator sebagai berikut:

<Button android:stateListAnimator="@xml/animate_scale"
        ... />

Sekarang, animasi yang ditentukan dalam animate_scale.xml digunakan saat status tombol ini berubah.

Atau, untuk menetapkan animator daftar status ke tampilan dalam kode Anda, gunakan metode AnimatorInflater.loadStateListAnimator(), dan tetapkan animator ke tampilan Anda dengan metode View.setStateListAnimator().

Atau, sebagai ganti menganimasikan properti tampilan, Anda dapat memutar animasi drawable di antara perubahan status, menggunakan AnimatedStateListDrawable. Beberapa widget sistem di Android 5.0 menggunakan animasi ini secara default. Contoh berikut menunjukkan cara menentukan AnimatedStateListDrawable sebagai resource XML:

<!-- res/drawable/myanimstatedrawable.xml -->
<animated-selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- provide a different drawable for each state-->
    <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
        android:state_pressed="true"/>
    <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
        android:state_focused="true"/>
    <item android:id="@id/default"
        android:drawable="@drawable/drawableD"/>

    <!-- specify a transition -->
    <transition android:fromId="@+id/default" android:toId="@+id/pressed">
        <animation-list>
            <item android:duration="15" android:drawable="@drawable/dt1"/>
            <item android:duration="15" android:drawable="@drawable/dt2"/>
            ...
        </animation-list>
    </transition>
    ...
</animated-selector>

Menggunakan TypeEvaluator

Jika ingin menganimasikan jenis yang tidak dikenal oleh sistem Android, Anda dapat membuat evaluator sendiri dengan menerapkan antarmuka TypeEvaluator. Jenis yang diketahui oleh sistem Android adalah int, float, atau warna, yang didukung oleh evaluator jenis IntEvaluator, FloatEvaluator, dan ArgbEvaluator.

Hanya ada satu metode yang perlu diterapkan dalam antarmuka TypeEvaluator, yaitu metode evaluate(). Hal ini memungkinkan animator yang Anda gunakan untuk menampilkan nilai yang sesuai untuk properti animasi Anda di titik animasi saat ini. Class FloatEvaluator menunjukkan cara melakukannya:

private class FloatEvaluator : TypeEvaluator<Any> {

    override fun evaluate(fraction: Float, startValue: Any, endValue: Any): Any {
        return (startValue as Number).toFloat().let { startFloat ->
            startFloat + fraction * ((endValue as Number).toFloat() - startFloat)
        }
    }

}

public class FloatEvaluator implements TypeEvaluator {

    public Object evaluate(float fraction, Object startValue, Object endValue) {
        float startFloat = ((Number) startValue).floatValue();
        return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);
    }
}

Catatan: Saat berjalan, ValueAnimator (atau ObjectAnimator) akan menghitung fraksi berlalu saat ini dari animasi (nilai antara 0 dan 1), lalu menghitung versi terinterpolasinya, bergantung pada interpolator yang Anda gunakan. Fraksi terinterpolasi adalah apa yang diterima TypeEvaluator melalui parameter fraction sehingga Anda tidak perlu memperhitungkan interpolator saat menghitung nilai animasi.

Menggunakan Interpolator

Interpolator menentukan cara menghitung nilai tertentu dalam animasi sebagai fungsi waktu. Misalnya, Anda dapat menentukan animasi agar terjadi secara linier di seluruh animasi, yang berarti animasi bergerak secara merata sepanjang waktu, atau Anda dapat menentukan animasi untuk menggunakan waktu non-linear, misalnya menggunakan akselerasi atau deselerasi di awal atau akhir animasi.

Interpolator dalam sistem animasi menerima fraksi dari Animator yang mewakili waktu berlalu animasi. Interpolator memodifikasi fraksi ini agar bertepatan dengan jenis animasi yang ingin disediakan. Sistem Android menyediakan sekumpulan interpolator yang umum dalam android.view.animation package. Jika tidak ada yang sesuai dengan kebutuhan, Anda dapat mengimplementasikan antarmuka TimeInterpolator dan membuatnya sendiri.

Sebagai contoh, cara interpolator default AccelerateDecelerateInterpolator dan LinearInterpolator menghitung fraksi terinterpolasi dibandingkan di bawah ini. LinearInterpolator tidak berpengaruh pada fraksi berlalu. AccelerateDecelerateInterpolator melaju masuk ke dalam animasi dan melambat di dalamnya. Metode berikut menentukan logika untuk interpolator ini:

AccelerateDecelerateInterpolator

override fun getInterpolation(input: Float): Float =
        (Math.cos((input + 1) * Math.PI) / 2.0f).toFloat() + 0.5f

@Override
public float getInterpolation(float input) {
    return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
}

LinearInterpolator

override fun getInterpolation(input: Float): Float = input

@Override
public float getInterpolation(float input) {
    return input;
}

Tabel berikut menunjukkan nilai perkiraan yang dihitung oleh interpolator ini untuk animasi yang berlangsung selama 1.000 milidetik:

Seperti yang ditunjukkan dalam tabel, LinearInterpolator mengubah nilai pada kecepatan yang sama, 0,2 untuk setiap 200 md yang berlalu. AccelerateDecelerateInterpolator mengubah nilai lebih cepat dari LinearInterpolator antara 200 milidetik dan 600 milidetik, dan lebih lambat antara 600 milidetik dan 1.000 milidetik.

Menentukan keyframe

Objek Keyframe terdiri dari pasangan waktu/nilai yang memungkinkan Anda menentukan status tertentu pada waktu animasi tertentu. Setiap keyframe juga dapat memiliki interpolator sendiri untuk mengontrol perilaku animasi dalam interval antara waktu keyframe sebelumnya dan waktu keyframe ini.

Untuk membuat instance objek Keyframe, Anda harus menggunakan salah satu metode factory, ofInt(), ofFloat(), atau ofObject() untuk mendapatkan jenis Keyframe yang sesuai. Kemudian, panggil metode factory ofKeyframe() untuk mendapatkan objek PropertyValuesHolder. Setelah memiliki objek ini, Anda dapat memperoleh animator dengan meneruskan objek PropertyValuesHolder dan objek yang akan dianimasikan. Cuplikan kode berikut menunjukkan cara melakukannya:

val kf0 = Keyframe.ofFloat(0f, 0f)
val kf1 = Keyframe.ofFloat(.5f, 360f)
val kf2 = Keyframe.ofFloat(1f, 0f)
val pvhRotation = PropertyValuesHolder.ofKeyframe("rotation", kf0, kf1, kf2)
ObjectAnimator.ofPropertyValuesHolder(target, pvhRotation).apply {
    duration = 5000
}

Keyframe kf0 = Keyframe.ofFloat(0f, 0f);
Keyframe kf1 = Keyframe.ofFloat(.5f, 360f);
Keyframe kf2 = Keyframe.ofFloat(1f, 0f);
PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe("rotation", kf0, kf1, kf2);
ObjectAnimator rotationAnim = ObjectAnimator.ofPropertyValuesHolder(target, pvhRotation);
rotationAnim.setDuration(5000);

Menganimasikan tampilan

Sistem animasi properti memungkinkan animasi objek View yang efisien dan menawarkan beberapa keunggulan dibandingkan sistem animasi tampilan. Sistem animasi tampilan mengubah objek View dengan mengubah cara objek tersebut digambar. Hal ini ditangani dalam penampung setiap View, karena View itu sendiri tidak memiliki properti untuk dimanipulasi. Hasilnya, View dianimasikan, tetapi objek View itu sendiri tidak berubah. Hal ini mengakibatkan perilaku seperti objek yang masih ada di lokasi aslinya, meskipun objek tersebut digambar di lokasi berbeda di layar. Di Android 3.0, properti baru serta metode pengambil dan penyetel terkait ditambahkan untuk menghilangkan kelemahan ini.

Sistem animasi properti dapat menganimasikan View di layar dengan mengubah properti sebenarnya dalam objek View. Selain itu, View juga otomatis memanggil metode invalidate() untuk memuat ulang layar setiap kali propertinya diubah. Properti baru di class View yang memfasilitasi animasi properti adalah:

• translationX dan translationY: Properti ini mengontrol lokasi View sebagai delta dari koordinat kiri dan atas yang ditetapkan oleh penampung tata letaknya.
• rotation, rotationX, dan rotationY: Properti ini mengontrol rotasi dalam 2D (properti rotation) dan 3D di sekitar titik pivot.
• scaleX dan scaleY: Properti ini mengontrol penskalaan 2D Tampilan di sekitar titik pivotnya.
• pivotX dan pivotY: Properti ini mengontrol lokasi titik pivot, tempat terjadinya rotasi dan transformasi penskalaan. Secara default, titik pivot terletak di tengah objek.
• x dan y: Ini adalah properti utilitas sederhana untuk mendeskripsikan lokasi akhir View dalam container-nya, sebagai jumlah dari nilai kiri dan atas, serta nilai TranslationX dan TranslationY.
• alpha: Menunjukkan transparansi alfa pada View. Nilai ini secara default adalah 1 (buram), dengan nilai 0 menunjukkan transparansi penuh (tidak terlihat).

Untuk menganimasikan properti objek View, seperti warna atau nilai rotasinya, Anda hanya perlu membuat animator properti dan menentukan properti View yang ingin dianimasikan. Contoh:

ObjectAnimator.ofFloat(myView, "rotation", 0f, 360f)

ObjectAnimator.ofFloat(myView, "rotation", 0f, 360f);

Untuk informasi selengkapnya tentang cara membuat animator, lihat bagian menganimasikan dengan ValueAnimator dan ObjectAnimator.

Menganimasikan dengan ViewPropertyAnimator

ViewPropertyAnimator menyediakan cara sederhana untuk menganimasikan beberapa properti View secara paralel, menggunakan satu objek Animator dasar. Perilakunya sangat mirip dengan ObjectAnimator, karena dapat memodifikasi nilai sebenarnya dari properti tampilan, tetapi lebih efisien saat menganimasikan banyak properti sekaligus. Selain itu, kode untuk menggunakan ViewPropertyAnimator jauh lebih ringkas dan lebih mudah dibaca. Cuplikan kode berikut menunjukkan perbedaan dalam menggunakan beberapa objek ObjectAnimator, satu ObjectAnimator, dan ViewPropertyAnimator saat menganimasikan properti x dan y tampilan secara bersamaan.

Beberapa ObjectAnimator

val animX = ObjectAnimator.ofFloat(myView, "x", 50f)
val animY = ObjectAnimator.ofFloat(myView, "y", 100f)
AnimatorSet().apply {
    playTogether(animX, animY)
    start()
}

ObjectAnimator animX = ObjectAnimator.ofFloat(myView, "x", 50f);
ObjectAnimator animY = ObjectAnimator.ofFloat(myView, "y", 100f);
AnimatorSet animSetXY = new AnimatorSet();
animSetXY.playTogether(animX, animY);
animSetXY.start();

Satu ObjectAnimator

val pvhX = PropertyValuesHolder.ofFloat("x", 50f)
val pvhY = PropertyValuesHolder.ofFloat("y", 100f)
ObjectAnimator.ofPropertyValuesHolder(myView, pvhX, pvhY).start()

PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("x", 50f);
PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("y", 100f);
ObjectAnimator.ofPropertyValuesHolder(myView, pvhX, pvhY).start();

ViewPropertyAnimator

myView.animate().x(50f).y(100f)

myView.animate().x(50f).y(100f);

Untuk mengetahui informasi selengkapnya tentang ViewPropertyAnimator, lihat postingan blog Android Developers yang sesuai.

Mendeklarasikan animasi dalam XML

Sistem animasi properti memungkinkan Anda mendeklarasikan animasi properti dengan XML, bukan melakukannya secara terprogram. Dengan menentukan animasi di XML, Anda dapat menggunakan kembali animasi di berbagai aktivitas dengan mudah dan mengedit urutan animasi dengan lebih mudah.

Untuk membedakan file animasi yang menggunakan API animasi properti baru dengan yang menggunakan framework animasi tampilan lama, mulai dari Android 3.1, Anda harus menyimpan file XML untuk animasi properti di direktori res/animator/.

Class animasi properti berikut memiliki dukungan deklarasi XML dengan tag XML berikut:

• ValueAnimator - <animator>
• ObjectAnimator - <objectAnimator>
• AnimatorSet - <set>

Untuk menemukan atribut yang dapat Anda gunakan dalam deklarasi XML, lihat Resource animasi. Contoh berikut memutar dua kumpulan animasi objek secara berurutan, dengan kumpulan bertingkat pertama memutar dua animasi objek secara bersamaan:

<set android:ordering="sequentially">
    <set>
        <objectAnimator
            android:propertyName="x"
            android:duration="500"
            android:valueTo="400"
            android:valueType="intType"/>
        <objectAnimator
            android:propertyName="y"
            android:duration="500"
            android:valueTo="300"
            android:valueType="intType"/>
    </set>
    <objectAnimator
        android:propertyName="alpha"
        android:duration="500"
        android:valueTo="1f"/>
</set>

Untuk menjalankan animasi ini, Anda harus meng-inflate resource XML dalam kode Anda ke objek AnimatorSet, lalu menetapkan objek target untuk semua animasi sebelum memulai set animasi tersebut. Demi kepraktisan, panggilan ke setTarget() akan menetapkan satu objek target untuk semua turunan AnimatorSet. Kode berikut menunjukkan cara melakukannya:

(AnimatorInflater.loadAnimator(myContext, R.animator.property_animator) as AnimatorSet).apply {
    setTarget(myObject)
    start()
}

AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext,
    R.animator.property_animator);
set.setTarget(myObject);
set.start();

Anda juga dapat mendeklarasikan ValueAnimator dalam XML, seperti yang ditunjukkan pada contoh berikut:

<animator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:valueType="floatType"
    android:valueFrom="0f"
    android:valueTo="-100f" />

Untuk menggunakan ValueAnimator sebelumnya dalam kode, Anda harus meng-inflate objek, menambahkan AnimatorUpdateListener, mendapatkan nilai animasi yang diperbarui, dan menggunakannya di properti salah satu tampilan Anda, seperti yang ditunjukkan pada kode berikut:

(AnimatorInflater.loadAnimator(this, R.animator.animator) as ValueAnimator).apply {
    addUpdateListener { updatedAnimation ->
        textView.translationX = updatedAnimation.animatedValue as Float
    }

    start()
}

ValueAnimator xmlAnimator = (ValueAnimator) AnimatorInflater.loadAnimator(this,
        R.animator.animator);
xmlAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator updatedAnimation) {
        float animatedValue = (float)updatedAnimation.getAnimatedValue();
        textView.setTranslationX(animatedValue);
    }
});

xmlAnimator.start();

Untuk mengetahui informasi tentang sintaksis XML untuk menentukan animasi properti, lihat Resource animasi .

Efek potensial pada performa UI

Animator yang mengupdate UI menyebabkan pekerjaan rendering tambahan untuk setiap frame tempat animasi dijalankan. Karena alasan ini, penggunaan animasi yang memerlukan banyak resource dapat berdampak negatif pada performa aplikasi Anda.

Pekerjaan yang diperlukan untuk menganimasikan UI Anda ditambahkan ke tahap animasi pipeline rendering. Anda dapat mengetahui apakah animasi memengaruhi performa aplikasi dengan mengaktifkan Rendering GPU Profil dan memantau tahap animasi. Untuk informasi selengkapnya, lihat Panduan rendering GPU profil.