Terkadang, gambar perlu dianimasikan di layar. Hal ini berguna jika Anda ingin menampilkan animasi pemuatan kustom yang terdiri dari beberapa gambar, atau jika Anda ingin satu ikon berubah menjadi ikon lain setelah pengguna melakukan tindakan tertentu. Android menyediakan beberapa opsi untuk menganimasikan drawable.
Opsi pertama adalah menggunakan Drawable Animasi. Dengan opsi ini, Anda dapat menentukan beberapa file drawable statis yang akan ditampilkan satu per satu untuk membuat sebuah animasi. Opsi kedua adalah menggunakan Vector Drawable Teranimasi, yang memungkinkan Anda menganimasikan berbagai properti dari sebuah vector drawable.
Menggunakan AnimationDrawable
Salah satu cara untuk menganimasikan Drawables adalah dengan memuat serangkaian resource Drawable satu per satu sehingga membentuk sebuah animasi. Ini adalah animasi tradisional, dalam artian dibuat dengan urutan gambar berbeda yang diputar secara berurutan, seperti rol film.
Class AnimationDrawable merupakan dasar untuk animasi Drawable.
Meskipun Anda dapat menentukan frame animasi dalam kode, menggunakan class AnimationDrawable API, akan lebih mudah jika hal itu dilakukan dengan satu file XML yang mencantumkan frame yang membentuk animasi. File XML untuk animasi jenis ini berada di direktori res/drawable/ project Android Anda. Dalam hal ini, petunjuknya berupa urutan dan durasi untuk setiap frame animasi.
File XML terdiri dari sebuah elemen <animation-list> sebagai node root dan serangkaian node <item> turunan yang masing-masing menentukan sebuah frame: resource drawable untuk frame dan durasi frame. Berikut adalah contoh file XML untuk animasi Drawable:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>
Animasi ini berjalan hanya selama tiga frame. Dengan menetapkan atribut android:oneshot daftar ke true, animasi hanya akan berjalan sekali, lalu berhenti dan bertahan di frame terakhir. Jika atribut tersebut ditetapkan ke false, maka animasi akan berjalan sebagai loop. Dengan XML ini disimpan sebagai rocket_thrust.xml di direktori res/drawable/ project, file ini dapat ditambahkan sebagai gambar latar ke View, lalu dipanggil untuk diputar. Berikut ini contoh Aktivitas, di mana animasi ditambahkan ke ImageView, lalu dianimasikan saat layar disentuh:
Kotlin
private lateinit var rocketAnimation: AnimationDrawable
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main)
val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
setBackgroundResource(R.drawable.rocket_thrust)
rocketAnimation = background as AnimationDrawable
}
rocketImage.setOnClickListener({ rocketAnimation.start() })
}
Java
AnimationDrawable rocketAnimation;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
rocketImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
rocketAnimation.start();
}
});
}
Penting dicatat bahwa metode start() yang dipanggil di AnimationDrawable tidak dapat dipanggil selama metode onCreate() Aktivitas Anda, karena AnimationDrawable belum sepenuhnya terhubung ke jendela ini. Jika Anda ingin segera memutar animasi, tanpa memerlukan interaksi, sebaiknya Anda memanggilnya dari metode onStart() dalam Aktivitas Anda, yang akan dipanggil saat Android memunculkan tampilan itu di layar.
Untuk informasi selengkapnya tentang sintaks XML, atribut, dan tag yang tersedia, lihat Resource Animasi.
Menggunakan AnimatedVectorDrawable
Vector drawable adalah jenis drawable yang dapat diskalakan tanpa membuat gambar menjadi pecah atau buram. Class AnimatedVectorDrawable (dan AnimatedVectorDrawableCompat untuk kompatibilitas mundur) memungkinkan Anda menganimasikan properti sebuah vector drawable, seperti memutarnya atau mengganti data jalurnya agar berubah menjadi gambar berbeda.
Biasanya, Anda menetapkan vector drawable teranimasi dalam tiga file XML:
- Sebuah vector drawable dengan elemen
<vector>dires/drawable/ - Sebuah vector drawable teranimasi dengan elemen
<animated-vector>dires/drawable/ - Satu atau beberapa animator objek dengan elemen
<objectAnimator>dires/animator/
Vector drawable teranimasi dapat menganimasikan atribut elemen <group> dan <path>. Elemen <group> menentukan sekumpulan jalur atau subgrup, sedangkan elemen <path> menentukan jalur yang akan digambar.
Saat Anda menentukan sebuah vector drawable yang ingin dianimasikan, gunakan atribut android:name untuk menetapkan nama yang unik ke grup dan jalur, agar Anda dapat merujuknya dari definisi animator. Contoh:
res/drawable/vectordrawable.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600">
<group
android:name="rotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" >
<path
android:name="v"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
</group>
</vector>
Definisi vector drawable teranimasi mengacu pada grup dan jalur dalam vector drawable berdasarkan namanya:
res/drawable/animatorvectordrawable.xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vectordrawable" >
<target
android:name="rotationGroup"
android:animation="@animator/rotation" />
<target
android:name="v"
android:animation="@animator/path_morph" />
</animated-vector>
Definisi animasi ini mewakili objek ObjectAnimator atau AnimatorSet. Animator pertama dalam contoh ini memutar grup target 360 derajat:
res/animator/rotation.xml
<objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
Animator kedua dalam contoh ini mengubah jalur vector drawable dari satu bentuk menjadi bentuk lainnya. Kedua jalur ini harus kompatibel untuk proses morphing: keduanya harus memiliki jumlah perintah yang sama dan jumlah parameter yang sama untuk setiap perintah.
res/animator/path_morph.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
android:valueType="pathType" />
</set>
Berikut adalah AnimatedVectorDrawable yang dihasilkan:
Untuk informasi selengkapnya, lihat referensi API untuk AnimatedVectorDrawable.