Menganimasikan grafik drawable

Mencoba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan Animasi di Compose.
Gambar 1. Drawable animasi.

Dalam beberapa situasi, gambar perlu dianimasikan. Hal ini berguna jika Anda ingin menampilkan animasi pemuatan kustom yang terdiri dari beberapa gambar atau jika Anda ingin ikon berubah setelah tindakan. Android menyediakan dua opsi untuk menganimasikan drawable.

Opsi pertama adalah menggunakan AnimationDrawable. Ini memungkinkan Anda menentukan beberapa file drawable yang ditampilkan satu per satu untuk membuat animasi. Opsi kedua adalah menggunakan AnimatedVectorDrawable, yang memungkinkan Anda menganimasikan properti vektor drawable.

Menggunakan AnimationDrawable

Salah satu cara untuk membuat animasi adalah dengan memuat urutan resource drawable, seperti rol film. Class AnimationDrawable merupakan dasar bagi jenis animasi drawable.

Anda dapat menentukan frame animasi dalam kode Anda menggunakan AnimationDrawable yang sama, namun lebih mudah untuk mendefinisikannya dengan satu file XML yang mencantumkan bingkai yang yang membentuk animasi. File XML untuk animasi jenis ini berada di res/drawable/ project Android Anda. Dalam hal ini, instruksinya memberikan urutan dan durasi untuk setiap {i>frame<i} dalam animasi.

File XML terdiri dari elemen <animation-list> sebagai node root dan serangkaian node <item> turunan yang masing-masing menentukan frame—resource drawable beserta durasinya. 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 selama tiga frame. Menetapkan android:oneshot daftar ke true membuat siklus sekali, lalu berhenti dan menahan di {i>frame<i} terakhir. Jika Anda menetapkan android:oneshot ke false, animasi akan diulang.

Jika Anda menyimpan XML ini sebagai rocket_thrust.xml dalam res/drawable/ direktori project, Anda dapat menambahkannya sebagai gambar latar ke View, lalu panggil start() untuk memutarnya. Berikut adalah contoh aktivitas yang menambahkan animasi ke ImageView, lalu animasi 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 untuk diperhatikan bahwa metode start() memanggil di AnimationDrawable tidak dapat dipanggil selama metode onCreate() Activity, karena AnimationDrawable belum sepenuhnya terikat ke jendela. Untuk langsung memutar animasi, tanpa memerlukan interaksi, Anda dapat memanggilnya dari onStart() di Activity, yang dipanggil saat Android membuat tampilan terlihat di layar.

Untuk informasi selengkapnya tentang sintaksis XML serta tag dan atribut yang tersedia, lihat Resource animasi.

Menggunakan AnimatedVectorDrawable

Vektor drawable adalah jenis drawable yang skalabel tanpa menjadi pecah atau buram. Tujuan AnimatedVectorDrawable class—dan AnimatedVectorDrawableCompat untuk kompatibilitas mundur—memungkinkan Anda menganimasikan properti vektor drawable, seperti memutarnya atau mengubah data jalur untuk mengubahnya menjadi gambar yang berbeda.

Anda biasanya mendefinisikan drawable vektor yang dianimasikan dalam tiga file XML:

  • Vektor drawable dengan elemen <vector> di res/drawable/.
  • Vektor drawable animasi dengan elemen <animated-vector> di res/drawable/.
  • Satu atau beberapa animator objek dengan elemen <objectAnimator> di res/animator/.

Vektor drawable animasi dapat menganimasikan atribut <group> dan Elemen <path>. Elemen <group> menentukan kumpulan jalur atau subgrup, dan elemen <path> menentukan jalur yang akan digambar.

Saat menentukan vektor drawable yang ingin dianimasikan, gunakan android:name untuk menetapkan nama unik ke grup dan jalur, sehingga Anda dapat merujuknya dari animator Anda definisi. 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 vektor drawable animasi mengacu pada grup dan jalur dalam vektor drawable berdasarkan nama mereka:

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 mewakili ObjectAnimator atau AnimatorSet objek. Tujuan 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 vektor drawable dari satu bentuk menjadi lain. Jalur ini harus kompatibel untuk morphing: jalur tersebut 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:

Gambar 2. AnimatedVectorDrawable.

Pratinjau Animated Vector Drawable (AVD)

Alat Animation Vector Drawable di Android Studio memungkinkan Anda melihat pratinjau resource drawable. Alat ini membantu Anda melihat pratinjau <animation-list>, <animated-vector>, dan <animated-selector> resource di Android Studio dan mempermudah penyempurnaan animasi kustom.

Pengguna melihat pratinjau dan memutar animasi di dalam Android Studio
Gambar 3. Alat Animation Vector Drawable di Android Studio.

Untuk informasi selengkapnya, lihat referensi API untuk AnimatedVectorDrawable.