Nama : Muhammad Achdad Subing

NPM : 15312419

Mata Kuliah : Pemograman Mobile

Kelas : IF 19 Gx

Tugas :

1. Jelaskan alasan penggunaan Side Effects, Effect Handlers, dan Simple Animations dalam sebuah sistem/aplikasi

Jawab :

Ringkasan Animasi Properti

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 objek tersebut digambar ke layar atau tidak. Animasi properti
mengubah nilai properti (kolom dalam objek) selama jangka waktu tertentu. Untuk menganimasikan
sesuatu, Anda perlu menentukan properti objek yang ingin dianimasikan, seperti posisi objek di layar,
berapa lama Anda ingin menganimasikan objek itu, dan nilai yang Anda inginkan untuk
menganimasikan antar-objek.

Sistem animasi properti memungkinkan Anda menentukan karakteristik animasi berikut:

• Durasi: Anda dapat menentukan durasi animasi. Durasi defaultnya adalah 300 milidetik.
• Interpolasi waktu: Anda dapat menentukan bagaimana nilai untuk properti dihitung sebagai fungsi
dari waktu berlalu saat ini untuk animasi tersebut.
• Jumlah dan perilaku pengulangan: Anda dapat menentukan apakah akan mengulang animasi jika
sudah mencapai akhir durasi dan berapa kali animasi akan diulang. Anda juga dapat menentukan
apakah animasi akan diputar mundur. Menyetelnya ke mundur akan memutar animasi maju lalu
mundur berulang-ulang, 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. Setelan
defaultnya adalah frame di-refresh setiap 10 milidetik, tetapi kecepatan refresh frame aplikasi Anda
bergantung pada seberapa sibuk sistem secara keseluruhan dan seberapa cepat sistem dapat
menampilkan 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, yang mewakili lokasi
horizontalnya di layar. Durasi animasi disetel ke 40 milidetik dengan jarak tempuh 40 piksel. Setiap
10 milidetik, yang merupakan rasio refresh frame default, objek bergerak horizontal sejauh 10 piksel.
Pada akhir 40 milidetik, animasi 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 hipotetis 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 melaju
cepat hingga tengah-tengah, lalu melambat dari titik tengah hingga akhir animasi. Seperti ditunjukkan
dalam Gambar 2, jarak tempuh di awal dan akhir animasi lebih kecil daripada di tengah animasi.

Gambar 2. Contoh animasi non-linear

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

Gambar 3. Cara animasi dihitung

Objek ValueAnimator melacak pengaturan waktu animasi Anda, 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, buatlah 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 akan menghitung fraksi berlalu antara 0 dan 1,
berdasarkan durasi animasi dan lamanya waktu yang telah berlalu. Fraksi berlalu menunjukkan
persentase waktu yang telah diselesaikan animasi, di mana 0 berarti 0% dan 1 berarti 100%.
Misalnya, dalam Gambar 1, fraksi berlalu pada t = 10 mdtk adalah 0,25 karena total durasinya adalah
t = 40 mdtk.

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

Setelah 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 properti pada saat itu adalah 0,15 x (40 - 0), atau 6.

Perbedaan antara animasi properti dengan animasi tampilan

Sistem animasi tampilan memberikan kemampuan untuk hanya menganimasikan objek View, jadi jika
ingin menganimasikan objek non-, Anda harus menerapkan kode Anda sendiri untuk melakukannya.
Sistem animasi tampilan juga dibatasi karena hanya memperlihatkan beberapa aspek dari objek
untuk dianimasikan, seperti penskalaan dan rotasi View, tetapi tidak warna latar belakang.

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

Dengan sistem animasi properti, batasan ini dihilangkan 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
tingkat tinggi, Anda menetapkan animator ke properti yang ingin Anda animasikan, seperti warna,
posisi, atau ukuran dan dapat menentukan aspek animasi seperti interpolasi dan sinkronisasi untuk
beberapa animator.

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

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 tersebut hanya menyediakan fungsionalitas
minimal yang harus diperluas untuk mendukung sepenuhnya nilai penganimasi. Subclass berikut
memperluas Animator:

Tabel 1. Animator

Class Deskripsi

ValueAnimator Mesin pengatur waktu utama untuk animasi properti yang juga menghitung nilai untuk properti yang akan dianimasik
Class ini memiliki semua fungsionalitas inti yang menghitung nilai animasi dan berisi detail pengaturan waktu untuk
animasi, informasi tentang apakah animasi berulang atau tidak, pemroses yang menerima peristiwa pembaruan, dan
kemampuan untuk menetapkan jenis kustom yang akan dievaluasi. Ada dua bagian dari properti animasi: menghitung
yang dianimasikan dan menetapkan nilai tersebut pada objek dan properti yang sedang
dianimasikan. ValueAnimator tidak melakukan bagian kedua, sehingga Anda harus memantau pembaruan nilai yang
dihitung oleh ValueAnimator dan memodifikasi objek yang ingin Anda animasikan dengan logika Anda sendiri. Liha
bagian Membuat animasi dengan ValueAnimator untuk informasi selengkapnya.
ObjectAnimator Subclass ValueAnimator yang memungkinkan Anda menetapkan objek target dan properti objek yang akan dianimas
Class ini memperbarui properti yang sesuai saat menghitung nilai baru untuk animasi tersebut. Anda akan sering
menggunakan ObjectAnimator, karena class ini membuat proses penganimasian nilai pada objek target menjadi jauh
mudah. Namun, terkadang Anda perlu menggunakan ValueAnimator secara langsung karena ObjectAnimator memi
beberapa batasan lainnya, seperti mengharuskan metode pengakses tertentu untuk ada di objek target.
AnimatorSet Menyediakan mekanisme untuk mengelompokkan animasi bersama-sama sehingga berjalan secara terkait satu sama l
Anda dapat mengatur agar animasi diputar secara bersamaan, berurutan, atau setelah penundaan tertentu. Lihat
bagian Mengatur koreografi beberapa animasi dengan AnimatorSet untuk informasi selengkapnya.
Evaluator memberi tahu sistem animasi properti cara menghitung nilai untuk properti tertentu.
Evaluator mengambil data waktu yang disediakan oleh class Animator, nilai awal dan akhir animasi,
serta menghitung nilai teranimasi untuk properti tersebut berdasarkan data ini. Sistem animasi
properti menyediakan evaluator berikut:

Tabel 2. Evaluator

Class/Antarmuka Deskripsi

IntEvaluator Evaluator default untuk menghitung nilai properti int.

FloatEvaluator Evaluator default untuk menghitung nilai properti float.
ArgbEvaluator Evaluator default untuk menghitung nilai properti warna yang ditunjukkan sebagai nilai heksadesimal.
TypeEvaluator Antarmuka yang memungkinkan Anda membuat evaluator sendiri. Jika Anda menganimasikan properti objek
yang bukan int, float, atau warna, Anda harus menerapkan antarmuka TypeEvaluator untuk menentukan cara
menghitung nilai teranimasi properti objek. Anda juga dapat menentukan TypeEvaluator kustom untuk nilai int, flo
dan warna, jika Anda ingin memproses jenis tersebut secara berbeda dengan perilaku default. Lihat bagian Menggun
TypeEvaluator untuk informasi selengkapnya tentang cara menulis evaluator kustom.

Interpolator waktu menentukan bagaimana nilai tertentu dalam sebuah animasi dihitung sebagai
fungsi dari 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-linier, misalnya melaju cepat di awal dan
melambat di akhir animasi. Tabel 3 menjelaskan interpolator yang terdapat
dalam android.view.animation. Jika interpolasi yang tersedia tidak ada cocok dengan kebutuhan Anda,
terapkan antarmuka TimeInterpolator dan buat interpolasi Anda sendiri. Lihat Menggunakan
interpolator untuk informasi selengkapnya tentang cara menulis interpolator kustom.

Tabel 3. Interpolator

Class/Antarmuka Deskripsi

AccelerateDecelerateInterpolator Interpolator yang laju perubahannya dimulai dan diakhiri dengan lambat, tetapi meningkat cepat di
bagian tengah.
AccelerateInterpolator Interpolator yang laju perubahannya dimulai dengan lambat, lalu meningkat cepat.
AnticipateInterpolator Interpolator yang perubahannya dimulai secara mundur, lalu melejit maju.
AnticipateOvershootInterpolator Interpolator yang perubahannya dimulai secara mundur, melejit maju, dan melampaui nilai target, l
akhirnya kembali ke nilai akhir.
BounceInterpolator Interpolator yang perubahannya memantul di bagian akhir.
CycleInterpolator Interpolator yang animasinya berulang selama sejumlah siklus tertentu.
DecelerateInterpolator Interpolator yang laju perubahannya dimulai dengan cepat, lalu melambat.
LinearInterpolator Interpolator yang laju perubahannya konstan.
OvershootInterpolator Interpolator yang laju perubahannya melejit maju hingga melampaui nilai terakhir, lalu kembali lag
TimeInterpolator Antarmuka yang memungkinkan Anda menerapkan interpolator sendiri.

Menganimasikan dengan ValueAnimator

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

KotlinJava
 ValueAnimator.ofFloat(0f, 100f).apply {
duration = 1000
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:

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

Dalam kode ini, ValueAnimator mulai menghitung nilai animasi,

antara startPropertyValue dan endPropertyValue, menggunakan logika yang disediakan
oleh MyTypeEvaluator selama 1.000 milidetik, saat metode start() berjalan.

Anda dapat menggunakan nilai animasi ini dengan menambahkan AnimatorUpdateListener ke

objek ValueAnimator, seperti ditunjukkan dalam kode berikut:

KotlinJava
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
}
...
}

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

Menganimasikan dengan ObjectAnimator

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

Membuat instance ObjectAnimator mirip dengan ValueAnimator, tetapi Anda juga menentukan objek
dan nama properti objek tersebut (sebagai String) beserta nilai yang dianimasikan di antaranya:
 KotlinJava
ObjectAnimator.ofFloat(textView, "translationX", 100f).apply {
duration = 1000
start()
}

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

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

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

• Bergantung pada properti atau objek yang dianimasikan, Anda mungkin perlu memanggil
metode invalidate() di View untuk memaksa layar menggambar ulang dirinya sendiri dengan nilai
teranimasi yang telah diperbarui. Anda melakukan 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 setter properti di View,
seperti setAlpha() dan setTranslationX() membatalkan View dengan benar, jadi Anda tidak perlu
membatalkan View saat memanggil metode ini dengan nilai baru. Untuk informasi selengkapnya
tentang pemroses, lihat bagian Pemroses animasi .

Mengatur koreografi beberapa animasi dengan AnimatorSet

Dalam banyak kasus, Anda perlu memutar animasi yang bergantung pada kapan animasi lain
dimulai atau diakhiri. Sistem Android memungkinkan Anda menggabungkan beberapa animasi
menjadi sebuah AnimatorSet, sehingga Anda dapat menentukan apakah animasi akan mulai diputar
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.
KotlinJava
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()
}

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

• Animator.AnimatorListener

• onAnimationStart() - Dipanggil saat animasi dimulai.

• onAnimationEnd() - Dipanggil saat animasi diakhiri.

• 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 ini, kirim
kueri ke objek ValueAnimator yang diteruskan ke peristiwa untuk mendapatkan nilai teranimasi terbaru
dengan metode getAnimatedValue(). Penerapan pemroses ini diperlukan jika Anda
menggunakan ValueAnimator.
Bergantung pada properti atau objek yang dianimasikan, Anda mungkin perlu
memanggil invalidate() di View untuk memaksa area layar menggambar ulang dirinya sendiri dengan
nilai teranimasi yang baru. Misalnya, menganimasikan properti warna sebuah objek Drawable hanya
akan menimbulkan pembaruan pada layar jika objek tersebut menggambar ulang dirinya sendiri.
Semua setter properti di View, seperti setAlpha() dan setTranslationX() membatalkan View dengan
benar, jadi Anda tidak perlu membatalkan View saat memanggil metode ini dengan nilai baru.

Anda dapat memperluas class AnimatorListenerAdapter alih-alih menerapkan

antarmuka Animator.AnimatorListener, jika Anda tidak ingin menerapkan semua metode dalam
antarmuka Animator.AnimatorListener. Class AnimatorListenerAdapter menyediakan implementasi
kosong dari metode yang dapat Anda pilih untuk diganti.
 Misalnya, cuplikan kode berikut membuat AnimatorListenerAdapter untuk
callback onAnimationEnd() saja:

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

Menganimasikan perubahan tata letak pada objek ViewGroup

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

Anda dapat menganimasikan perubahan tata letak dalam ViewGroup dengan class LayoutTransition.
View 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 di container.

• CHANGE_APPEARING - Flag yang menunjukkan animasi yang berjalan pada item yang berubah akibat
adanya item baru yang muncul di 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
akibat adanya item yang menghilang dari container.

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

Contoh LayoutAnimations di Demo API menunjukkan cara menentukan animasi untuk transisi tata
letak, lalu menyetel animasi pada objek View yang ingin Anda animasikan.

LayoutAnimationsByDefault dan file resource tata letak layout_animations_by_default.xml terkaitnya

menunjukkan cara mengaktifkan transisi tata letak default untuk ViewGroups dalam XML. Satu-
satunya hal yang perlu Anda lakukan adalah menyetel
atribut android:animateLayoutchanges ke true untuk ViewGroup. Contoh:

<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 true otomatis akan menganimasikan View yang ditambahkan ke 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 berfungsi sebagai wrapper bagi 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 . 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, jika ingin menetapkan animator daftar status ke sebuah tampilan dalam kode Anda, gunakan
metode AnimatorInflater.loadStateListAnimator(), dan tetapkan animator ke tampilan Anda
menggunakan metode View.setStateListAnimator().

Atau, alih-alih 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 sebuah jenis yang tidak dikenal oleh sistem Android, Anda dapat
membuat evaluator sendiri dengan menerapkan antarmuka TypeEvaluator. Jenis yang dikenal 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 teranimasi di titik animasi saat ini. Class FloatEvaluator menunjukkan cara
melakukan ini:

KotlinJava
 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)
}
}

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

Menggunakan Interpolator
Interpolator menentukan cara menghitung nilai tertentu dalam animasi sebagai fungsi dari 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-linier, misalnya menggunakan akselerasi atau deselerasi di awal atau akhir
animasi.

Interpolator dalam sistem animasi menerima sebuah fraksi dari Animator yang mewakili waktu berlalu
dari animasi tersebut. Interpolator mengubah fraksi ini agar bersesuaian dengan jenis animasi yang
ingin disediakannya. Sistem Android menyediakan sekumpulan interpolator yang umum
di android.view.animation package. Jika tidak ada dari interpolator tersebut yang sesuai dengan
kebutuhan, Anda dapat menerapkan antarmuka TimeInterpolator dan membuat interpolator Anda
sendiri.

Sebagai contoh, cara interpolator

default AccelerateDecelerateInterpolator dan LinearInterpolator menghitung fraksi terinterpolasi
dibandingkan di bawah ini. LinearInterpolator tidak berpengaruh pada fraksi
berlalu. AccelerateDecelerateInterpolator melaju cepat di awal animasi dan melambat di akhir animasi.
Metode berikut menentukan logika untuk interpolator ini:

AccelerateDecelerateInterpolator

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

LinearInterpolator

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

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

mdtk berlalu Fraksi berlalu/Fraksi terinterpolasi (Linear) Fraksi terinterpolasi (Akselerasi/Deselerasi)

 0 0 0
200 0,2 0,1
400 0,4 0,345
600 .6 0,8
800 0,8 0,9
1000 1 1

Seperti ditunjukkan dalam tabel, LinearInterpolator mengubah nilai pada kecepatan yang sama, yaitu
0,2 untuk setiap 200 milidetik yang berlalu. AccelerateDecelerateInterpolator mengubah nilai ini lebih
cepat daripada 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 tertentu untuk sebuah animasi. 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 yang sesuai. Kemudian panggil
metode factory ofKeyframe() untuk mendapatkan objek PropertyValuesHolder. Setelah mendapatkan
objek ini, Anda dapat memperoleh animator dengan meneruskan objek PropertyValuesHolder dan
objek yang akan dianimasikan. Cuplikan kode berikut menunjukkan cara melakukannya:

KotlinJava
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
}

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 di container setiap View, karena
View itu sendiri tidak memiliki properti yang bisa 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 dan metode getter dan setter terkaitnya ditambahkan untuk meniadakan 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 me-refresh
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
atasnya, yang ditetapkan oleh container tata letaknya.
• rotation, rotationX, dan rotationY: Properti ini mengontrol rotasi dalam 2D (properti ) dan 3D di sekitar
titik pivot.
• scaleX dan scaleY: Properti ini mengontrol penskalaan 2D sebuah View di sekitar titik pivotnya.

• pivotX dan pivotY: Properti ini mengontrol lokasi titik pivot, yang memungkinkan terjadinya rotasi dan
transformasi penskalaan. Secara default, titik pivot terletak di tengah objek.
• x dan y: Ini adalah properti utilitas sederhana untuk menjelaskan 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 nilai warna atau rotasinya, Anda hanya perlu
membuat animator properti dan menentukan properti View yang ingin Anda animasikan. Contoh:

KotlinJava
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 pokok. Perilaku objek ini sangat mirip
dengan ObjectAnimator, yaitu dengan memodifikasi nilai sebenarnya properti tampilan, tetapi lebih
efisien saat menganimasi 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, ObjectAnimator tunggal, dan ViewPropertyAnimator saat menganimasikan
properti x dan y sebuah tampilan secara bersamaan.

Beberapa ObjectAnimator

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

Satu ObjectAnimator

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

ViewPropertyAnimator

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

Untuk informasi selengkapnya tentang ViewPropertyAnimator, lihat entri blog Android Developers yang
terkait.

Mendeklarasikan animasi dalam XML

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

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

Class animasi properti di bawah ini 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 set animasi objek secara berurutan, dengan set 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 meluaskan 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:

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

Anda juga dapat mendeklarasikan ValueAnimator dalam XML, seperti ditunjukkan dalam 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 meluaskan objek ini,
menambahkan AnimatorUpdateListener, mendapatkan nilai animasi yang diperbarui, dan
menggunakannya di properti salah satu tampilan Anda, seperti ditunjukkan dalam kode berikut:

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

start()
}

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

Efek potensial pada performa UI

Animator yang memperbarui UI menyebabkan kerja rendering ekstra untuk setiap frame tempat
animasi dijalankan. Karena alasan ini, penggunaan animasi yang memerlukan resource intensif
dapat berdampak negatif terhadap performa aplikasi Anda.

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