Resource animasi

Resource animasi dapat menentukan salah satu dari dua jenis animasi:

Animasi Properti

Buat animasi dengan mengubah nilai properti objek selama jangka waktu tertentu menggunakan 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: atau membuat animasi dengan menampilkan urutan 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 akan 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 Tampilan. 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() serta 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 (misalnya, #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 (misalnya, #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 di mana animasi berakhir. Warna direpresentasikan sebagai enam digit angka heksadesimal (misalnya, #333333).

android:valueFrom

float, int, atau color. Wajib. Nilai di mana animasi dimulai. Warna direpresentasikan sebagai enam digit angka heksadesimal (misalnya, #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, 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:

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:

• 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 dapat dideklarasikan dalam XML. Bagian berikut menjelaskan cara menggunakan kedua metode tersebut.

Animasi hitung nilai

Animasi yang ditentukan dalam XML yang melakukan transisi seperti merotasi, memudarkan, menggerakkan, dan melebarkan pada grafis.

lokasi file:

res/anim/filename.xml
Nama file akan 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 (bahkan 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 di bawah 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 Animation (yang mana, semua atribut XML diwariskan oleh elemen ini).

<scale>

Pengubahan ukuran animasi. Anda dapat menentukan titik tengah gambar dilebarkan ke luar (atau ke dalam) dengan menetapkan pivotX dan pivotY. Misalnya, jika nilai ini adalah 0, 0 (sudut kiri atas), maka 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 oleh <scale>, lihat referensi class Animation (yang mana, semua atribut XML diwariskan oleh elemen ini).

<translate>

Bergerak vertikal dan/atau horizontal. Mendukung atribut berikut dalam salah satu dari tiga format berikut: nilai dari -100 hingga 100 yang diakhiri dengan "%", menunjukkan persentase yang sesuai dengan nilai itu sendiri; nilai dari -100 hingga 100 berakhir dengan "%p", menunjukkan persentase yang sesuai dengan nilai induknya; nilai float tanpa akhiran, menunjukkan nilai absolut. Menampilkan TranslateAnimation.

atribut:

android:fromXDelta

Float atau persentase. Offset X awal. Dinyatakan dalam: piksel yang sesuai dengan posisi normal (misalnya "5"), persentase yang sesuai dengan lebar elemen (misalnya "5%"), atau 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"), persentase yang sesuai dengan lebar elemen (misalnya "5%"), atau 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"), 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"), persentase yang sesuai dengan tinggi elemen (misalnya "5%"), atau persentase yang sesuai dengan tinggi induk (misalnya "5%p").

Untuk atribut lainnya yang didukung oleh <translate>, lihat referensi class Animation (yang mana, semua atribut XML diwariskan oleh elemen ini).

<rotate>

Animasi rotasi. Merepresentasikan 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"), persentase yang sesuai dengan tepi kiri objek (misalnya "5%"), atau 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"), persentase yang sesuai dengan tepi atas objek (misalnya "5%"), atau persentase yang sesuai dengan tepi atas container induk (misalnya "5%p").

Untuk atribut lainnya yang didukung oleh <rotate>, lihat referensi class Animation (yang mana, semua atribut XML diwariskan 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 ini akan 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:

• Grafis 2D: Animasi Hitung Nilai

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 (yang tercantum dalam tabel di atas), 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, Anda harus membuat resource interpolator Anda sendiri dalam file XML.

lokasi file:

res/anim/filename.xml
Nama file akan 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 di atas).

elemen:

Perhatikan bahwa setiap implementasi Interpolator, saat ditentukan dalam XML, namanya akan dimulai 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, melejit maju hingga melampaui nilai target, lalu akhirnya kembali ke 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 akan 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 akan 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 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 ini akan menetapkan animasi sebagai latar belakang Tampilan, 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:

• Grafis 2D: Animasi Frame