Resource animasi

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Resource animasi dapat menentukan salah satu dari dua jenis animasi:

Animasi properti

Buat animasi dengan mengubah nilai properti objek selama periode yang ditetapkan dengan Animator.

Animasi tampilan

Ada dua jenis animasi yang dapat Anda gunakan dengan framework animasi tampilan:

• Animasi hitung nilai: membuat animasi dengan menjalankan serangkaian transformasi pada satu gambar dengan Animation.
• Animasi frame: membuat animasi dengan menampilkan rangkaian gambar secara berurutan dengan AnimationDrawable.

Animasi properti

Animasi yang ditentukan dalam XML yang mengubah properti objek target, seperti warna latar belakang atau nilai alfa, selama jangka waktu tertentu.

lokasi file:

res/animator/filename.xml
Nama file digunakan sebagai ID resource.

jenis data resource yang dihimpun:

Pointer resource ke ValueAnimator, ObjectAnimator, atau AnimatorSet.

referensi resource:

Dalam kode berbasis Java atau Kotlin: R.animator.filename
Dalam XML: @[package:]animator/filename

sintaksis:

<set
  android:ordering=["together" | "sequentially"]>

    <objectAnimator
        android:propertyName="string"
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["restart" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <animator
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["restart" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <set>
        ...
    </set>
</set>

File harus memiliki satu elemen root: baik berupa <set>, <objectAnimator>, atau <valueAnimator>. Anda dapat mengelompokkan elemen animasi di dalam elemen <set>, termasuk elemen <set> lainnya.

elemen:

<set>

Container yang menampung elemen animasi lainnya (elemen <objectAnimator>, <valueAnimator>, atau <set> lainnya). Merepresentasikan AnimatorSet.

Anda dapat menentukan tag <set> yang disusun bertingkat untuk mengelompokkan animasi lebih lanjut. Setiap <set> dapat menentukan atribut ordering-nya sendiri.

Atribut:

android:ordering

Kata kunci. Menentukan urutan pemutaran animasi dalam set ini.

Nilai	Deskripsi
sequentially	Memutar animasi dalam set ini secara berurutan.
together (default)	Memutar animasi dalam set ini secara bersamaan.

<objectAnimator>

Menganimasikan properti tertentu objek selama jangka waktu tertentu. Merepresentasikan ObjectAnimator.

Atribut:

android:propertyName

String. Wajib. Properti objek yang akan dianimasikan, yang direferensikan dengan namanya. Misalnya, Anda dapat menentukan "alpha" atau "backgroundColor" untuk objek View. Namun, elemen objectAnimator tidak menampilkan atribut target, sehingga Anda tidak dapat menetapkan objek yang akan dianimasikan dalam deklarasi XML. Anda perlu meng-inflate resource XML animasi dengan memanggil loadAnimator(), dan memanggil setTarget() untuk menetapkan objek target yang berisi properti ini.

android:valueTo

float, int, atau color. Wajib. Nilai tempat properti animasi berakhir. Warna direpresentasikan sebagai enam digit angka heksadesimal, seperti #333333.

android:valueFrom

float, int, atau color. Nilai tempat properti animasi dimulai. Jika tidak ditentukan, animasi akan dimulai pada nilai yang diperoleh dari metode get properti. Warna direpresentasikan sebagai enam digit angka heksadesimal, seperti #333333.

android:duration

int. Waktu dalam milidetik animasi. 300 milidetik adalah defaultnya.

android:startOffset

int. Jumlah milidetik penundaan animasi setelah start() dipanggil.

android:repeatCount

int. Jumlah berapa kali animasi akan diulang. Untuk mengulang tanpa batas, tetapkan ke "-1" atau ke bilangan bulat positif. Misalnya, nilai "1" berarti animasi akan diulang satu kali setelah animasi dimulai untuk pertama kalinya, yang berarti, animasi dimulai sebanyak dua kali. Nilai defaultnya adalah "0", yang berarti tidak ada pengulangan.

android:repeatMode

int. Perilaku animasi saat mencapai akhir animasinya. android:repeatCount harus ditetapkan ke bilangan bulat positif atau "-1" agar atribut ini dapat berpengaruh. Tetapkan ke "reverse" untuk membalik arah animasi dengan setiap iterasi, atau ke "restart" untuk mengulang animasi dari awal setiap kali dimulai.

android:valueType

Kata kunci. Jangan tentukan atribut ini jika nilainya adalah warna. Framework animasi akan menangani nilai warna secara otomatis.

Nilai	Deskripsi
intType	Menentukan bahwa nilai animasi adalah bilangan bulat.
floatType (default)	Menentukan bahwa nilai animasi adalah float

<animator>

Memulai animasi selama jangka waktu tertentu. Merepresentasikan ValueAnimator.

Atribut:

android:valueTo

float, int, atau color. Wajib. Nilai saat animasi berakhir. Warna direpresentasikan sebagai enam digit angka heksadesimal, seperti #333333.

android:valueFrom

float, int, atau color. Wajib. Nilai saat animasi dimulai. Warna direpresentasikan sebagai enam digit angka heksadesimal, seperti #333333.

android:duration

int. Waktu dalam milidetik animasi. 300 mdtk adalah defaultnya.

android:startOffset

int. Jumlah milidetik penundaan animasi setelah start() dipanggil.

android:repeatCount

int. Jumlah berapa kali animasi akan diulang. Untuk mengulang tanpa batas, tetapkan ke "-1" atau ke bilangan bulat positif. Misalnya, nilai "1" berarti animasi akan diulang satu kali setelah animasi dimulai untuk pertama kalinya, yang berarti, animasi dimulai sebanyak dua kali. Nilai defaultnya adalah "0", yang berarti tidak ada pengulangan.

android:repeatMode

int. Perilaku animasi saat mencapai akhir animasinya. android:repeatCount harus ditetapkan ke bilangan bulat positif atau "-1" agar atribut ini dapat berpengaruh. Tetapkan ke "reverse" untuk membalik arah animasi dengan setiap iterasi, atau ke "restart" untuk mengulang animasi dari awal setiap kali dimulai.

android:valueType

Kata kunci. Jangan tentukan atribut ini jika nilainya adalah warna. Framework animasi akan menangani nilai warna secara otomatis.

Nilai	Deskripsi
intType	Menentukan bahwa nilai animasi adalah bilangan bulat.
floatType (default)	Menentukan bahwa nilai animasi adalah float

contoh:

File XML yang disimpan di res/animator/property_animator.xml:

<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, inflate resource XML dalam kode Anda ke objek AnimatorSet, lalu tetapkan 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:

Kotlin

val set: AnimatorSet = AnimatorInflater.loadAnimator(myContext, R.animator.property_animator)
    .apply {
        setTarget(myObject)
        start()
    }

Java

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

lihat juga:

• Ringkasan Animasi Properti
• Demo API untuk contoh cara menggunakan sistem animasi properti

Animasi tampilan

Framework animasi tampilan mendukung animasi hitung nilai dan frame by frame, yang keduanya dideklarasikan dalam XML. Bagian berikut menjelaskan cara menggunakan kedua metode tersebut.

Animasi hitung nilai

Animasi yang ditentukan dalam XML yang melakukan transisi pada grafis seperti memutar, memudarkan, menggerakkan, dan meregangkan.

lokasi file:

res/anim/filename.xml
Nama file digunakan sebagai ID resource.

jenis data resource yang dihimpun:

Pointer resource ke Animation

.

referensi resource:

Di Java: R.anim.filename
Dalam XML: @[package:]anim/filename

sintaksis:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@[package:]anim/interpolator_resource"
    android:shareInterpolator=["true" | "false"] >
    <alpha
        android:fromAlpha="float"
        android:toAlpha="float" />
    <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float" />
    <translate
        android:fromXDelta="float"
        android:toXDelta="float"
        android:fromYDelta="float"
        android:toYDelta="float" />
    <rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />
    <set>
        ...
    </set>
</set>

File harus memiliki elemen root tunggal: dapat berupa elemen <alpha>, <scale>, <translate>, <rotate>, atau <set> yang menampung grup (atau beberapa grup) elemen animasi lainnya (termasuk elemen <set> bertingkat).

elemen:

<set>

Container yang menampung elemen animasi lainnya (elemen <alpha>, <scale>, <translate>, <rotate>) atau elemen <set> lainnya. Menunjukkan AnimationSet.

Atribut:

android:interpolator

Resource interpolator. Interpolator untuk diterapkan pada animasi. Nilai harus merupakan referensi untuk resource yang menentukan interpolator, bukan nama class interpolator. Resource interpolator default tersedia di platform atau Anda dapat membuat resource interpolator Anda sendiri. Lihat diskusi berikut untuk mengetahui informasi selengkapnya tentang interpolator.

android:shareInterpolator

Boolean. "true" jika Anda ingin membagikan interpolator yang sama ke semua elemen turunan.

<alpha>

Animasi fade-in atau fade-out. Menunjukkan AlphaAnimation.

Atribut:

android:fromAlpha

Float. Offset opasitas awal; 0,0 transparan dan 1,0 buram.

android:toAlpha

Float. Offset opasitas akhir; 0,0 transparan dan 1,0 buram.

Untuk atribut lainnya yang didukung oleh <alpha>, lihat referensi class untuk Animation, yang atribut XML-nya diwarisi oleh elemen ini.

<scale>

Pengubahan ukuran animasi. Anda dapat menentukan titik tengah gambar tempatnya dilebarkan ke luar atau ke dalam dengan menetapkan pivotX dan pivotY. Misalnya, jika nilai ini adalah 0,0 (sudut kiri atas), gambar hanya akan melebar ke bawah dan ke kanan. Menampilkan ScaleAnimation.

Atribut:

android:fromXScale

Float. Offset ukuran X awal, dengan 1,0 tidak ada perubahan.

android:toXScale

Float. Offset ukuran X akhir, dengan 1,0 tidak ada perubahan.

android:fromYScale

Float. Offset ukuran Y awal, dengan 1,0 tidak ada perubahan.

android:toYScale

Float. Offset ukuran Y akhir, dengan 1,0 tidak ada perubahan.

android:pivotX

Float. Koordinat X tidak dapat diubah saat objek diskalakan.

android:pivotY

Float. Koordinat Y tidak dapat diubah saat objek diskalakan.

Untuk atribut lainnya yang didukung <scale>, lihat referensi class untuk Animation, yang atribut XML-nya diwarisi oleh elemen ini.

<translate>

Bergerak vertikal dan/atau horizontal. Menampilkan TranslateAnimation. Mendukung atribut berikut dalam salah satu dari tiga format berikut:

• Nilai dari -100 sampai 100 yang diakhiri dengan "%", menunjukkan persentase yang sesuai dengan nilai itu sendiri.
• Nilai dari -100 sampai 100 diakhiri dengan "%p", menunjukkan persentase yang sesuai dengan induknya.
• Nilai float tanpa akhiran, menunjukkan nilai absolut.

Atribut:

android:fromXDelta

Float atau persentase. Offset X awal. Dinyatakan dalam piksel yang sesuai dengan posisi normal, misalnya "5"; dalam persentase yang sesuai dengan lebar elemen, misalnya "5%"; atau dalam persentase yang sesuai dengan lebar induk, misalnya "5%p".

android:toXDelta

Float atau persentase. Offset X akhir. Dinyatakan dalam piksel yang sesuai dengan posisi normal, misalnya "5"; dalam persentase yang sesuai dengan lebar elemen, misalnya "5%"; atau dalam persentase yang sesuai dengan lebar induk, misalnya "5%p".

android:fromYDelta

Float atau persentase. Offset Y awal. Dinyatakan dalam piksel yang sesuai dengan posisi normal, misalnya "5"; dalam persentase yang sesuai dengan tinggi elemen, misalnya "5%"; atau persentase yang sesuai dengan tinggi induk, misalnya "5%p".

android:toYDelta

Float atau persentase. Offset Y akhir. Dinyatakan dalam piksel yang sesuai dengan posisi normal, misalnya "5"; dalam persentase yang sesuai dengan tinggi elemen, misalnya "5%"; atau persentase yang sesuai dengan tinggi induk, misalnya "5%p".

Untuk atribut lainnya yang didukung <translate>, lihat referensi class untuk Animation, yang atribut XML-nya diwarisi oleh elemen ini.

<rotate>

Animasi rotasi. Menampilkan RotateAnimation.

Atribut:

android:fromDegrees

Float. Memulai posisi angular, dalam derajat.

android:toDegrees

Float. Mengakhiri posisi angular, dalam derajat.

android:pivotX

Float atau persentase. Koordinat X dari pusat rotasi. Dinyatakan dalam piksel yang sesuai dengan tepi kiri objek, misalnya "5"; dalam persentase yang sesuai dengan tepi kiri objek, misalnya "5%"; atau dalam persentase yang sesuai dengan tepi kiri container induk, misalnya "5%p".

android:pivotY

Float atau persentase. Koordinat Y dari pusat rotasi. Dinyatakan dalam piksel yang sesuai dengan tepi atas objek, misalnya "5"; dalam persentase yang sesuai dengan tepi atas objek, misalnya "5%"; atau dalam persentase yang sesuai dengan tepi atas container induk, misalnya "5%p".

Untuk atribut lainnya yang didukung <rotate>, lihat referensi class untuk Animation, yang atribut XML-nya diwarisi oleh elemen ini.

contoh:

File XML yang disimpan di res/anim/hyperspace_jump.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set
        android:interpolator="@android:anim/accelerate_interpolator"
        android:startOffset="700">
        <scale
            android:fromXScale="1.4"
            android:toXScale="0.0"
            android:fromYScale="0.6"
            android:toYScale="0.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="400" />
        <rotate
            android:fromDegrees="0"
            android:toDegrees="-45"
            android:toYScale="0.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="400" />
    </set>
</set>

Kode aplikasi berikut menerapkan animasi ke ImageView dan memulai animasi tersebut:

Kotlin

val image: ImageView = findViewById(R.id.image)
val hyperspaceJump: Animation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump)
image.startAnimation(hyperspaceJump)

Java

ImageView image = (ImageView) findViewById(R.id.image);
Animation hyperspaceJump = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
image.startAnimation(hyperspaceJump);

lihat juga:

• Animasi Tampilan

Interpolator

Interpolator adalah pengubah animasi yang ditentukan dalam XML yang memengaruhi laju perubahan dalam animasi. Hal ini dapat membuat efek animasi yang ada dipercepat, diperlambat, diulang, dipantulkan, dll.

Interpolator diterapkan ke elemen animasi dengan atribut android:interpolator, yang nilainya merupakan referensi ke resource interpolator.

Semua interpolator yang tersedia di Android merupakan subclass dari class Interpolator. Untuk setiap class interpolator, Android menyertakan resource publik yang dapat direferensikan untuk menerapkan interpolator ke animasi menggunakan atribut android:interpolator. Tabel berikut menentukan resource yang akan digunakan untuk masing-masing interpolator:

Class interpolator	ID Resource
AccelerateDecelerateInterpolator	@android:anim/accelerate_decelerate_interpolator
AccelerateInterpolator	@android:anim/accelerate_interpolator
AnticipateInterpolator	@android:anim/anticipate_interpolator
AnticipateOvershootInterpolator	@android:anim/anticipate_overshoot_interpolator
BounceInterpolator	@android:anim/bounce_interpolator
CycleInterpolator	@android:anim/cycle_interpolator
DecelerateInterpolator	@android:anim/decelerate_interpolator
LinearInterpolator	@android:anim/linear_interpolator
OvershootInterpolator	@android:anim/overshoot_interpolator

Berikut adalah cara menerapkan suatu resource dengan atribut android:interpolator:

<set android:interpolator="@android:anim/accelerate_interpolator">
    ...
</set>

Interpolator kustom

Jika tidak puas dengan interpolator yang disediakan oleh platform, Anda dapat membuat resource interpolator kustom dengan atribut yang dimodifikasi. Misalnya, Anda dapat menyesuaikan laju percepatan untuk AnticipateInterpolator, atau menyesuaikan jumlah siklus untuk CycleInterpolator. Untuk melakukannya, buat resource interpolator Anda sendiri dalam file XML.

lokasi file:

res/anim/filename.xml
Nama file digunakan sebagai ID resource.

jenis data resource yang dihimpun:

Pointer resource ke objek interpolator yang terkait

referensi resource:

Dalam XML: @[package:]anim/filename

sintaksis:

<?xml version="1.0" encoding="utf-8"?>
<InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android"
    android:attribute_name="value"
    />

Jika Anda tidak menerapkan atribut apa pun, interpolator Anda akan berfungsi sama persis dengan interpolator yang disediakan oleh platform, yang tercantum dalam tabel sebelumnya.

elemen:

Perhatikan bahwa setiap implementasi Interpolator, saat ditentukan dalam XML, memiliki nama yang diawali dengan huruf kecil.

<accelerateDecelerateInterpolator>

Laju perubahan dimulai dan diakhiri dengan lambat, tetapi dipercepat dipertengahan proses.

Tidak ada atribut.

<accelerateInterpolator>

Laju perubahan dimulai dengan lambat, lalu dipercepat.

Atribut:

android:factor

Float. Laju percepatan. Defaultnya adalah 1.

<anticipateInterpolator>

Perubahan dimulai secara mundur, lalu melejit maju.

Atribut:

android:tension

Float. Jumlah tension yang akan diterapkan. Defaultnya adalah 2.

<anticipateOvershootInterpolator>

Perubahan dimulai secara mundur, lalu melejit maju hingga melampaui nilai target, kemudian menetap di nilai akhir.

Atribut:

android:tension

Float. Jumlah tension yang akan diterapkan. Defaultnya adalah 2.

android:extraTension

Float. Jumlah yang digunakan untuk mengalikan tension. Defaultnya adalah 1,5.

<bounceInterpolator>

Perubahan memantul di bagian akhir.

Tidak ada atribut

<cycleInterpolator>

Mengulang animasi selama jumlah siklus tertentu. Laju perubahannya mengikuti pola sinusoidal.

Atribut:

android:cycles

Bilangan bulat. Jumlah siklus. Defaultnya adalah 1.

<decelerateInterpolator>

Laju perubahan dimulai dengan cepat, lalu melambat.

Atribut:

android:factor

Float. Laju perlambatan. Defaultnya adalah 1.

<linearInterpolator>

Laju perubahan konstan.

Tidak ada atribut.

<overshootInterpolator>

Perubahan melejit maju hingga melampaui nilai terakhir, lalu kembali lagi.

Atribut:

android:tension

Float. Jumlah tension yang akan diterapkan. Defaultnya adalah 2.

contoh:

File XML yang disimpan di res/anim/my_overshoot_interpolator.xml:

<?xml version="1.0" encoding="utf-8"?>
<overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:tension="7.0"
    />

XML animasi ini menerapkan interpolator:

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@anim/my_overshoot_interpolator"
    android:fromXScale="1.0"
    android:toXScale="3.0"
    android:fromYScale="1.0"
    android:toYScale="3.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="700" />

Animasi frame

Animasi yang ditentukan dalam XML yang menunjukkan serangkaian gambar yang berurutan, seperti film.

lokasi file:

res/drawable/filename.xml
Nama file digunakan sebagai ID resource.

jenis data resource yang dihimpun:

Pointer resource ke AnimationDrawable

.

referensi resource:

Di Java: R.drawable.filename
Dalam XML: @[package:]drawable.filename

sintaksis:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource_name"
        android:duration="integer" />
</animation-list>

elemen:

<animation-list>

Wajib. Elemen ini harus menjadi elemen root. Berisi satu atau beberapa elemen <item>.

Atribut:

android:oneshot

Boolean. "true" jika Anda ingin menjalankan animasi satu kali; "false" untuk mengulang animasi.

<item>

Satu frame animasi. Harus berupa turunan dari elemen <animation-list>.

Atribut:

android:drawable

Resource drawable. Drawable yang akan digunakan untuk frame ini.

android:duration

Bilangan bulat. Durasi untuk menampilkan frame ini, dalam milidetik.

contoh:

File XML yang disimpan di res/drawable/rocket_thrust.xml:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <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>

Kode aplikasi berikut menetapkan animasi sebagai latar belakang untuk View, lalu memutar animasi tersebut:

Kotlin

val rocketImage: ImageView = findViewById(R.id.rocket_image)
rocketImage.setBackgroundResource(R.drawable.rocket_thrust)

val rocketAnimation = rocketImage.background
if (rocketAnimation is Animatable) {
    rocketAnimation.start()
}

Java

ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);

rocketAnimation = rocketImage.getBackground();
if (rocketAnimation instanceof Animatable) {
    ((Animatable)rocketAnimation).start();
}

lihat juga:

• Animasi Tampilan