Menganimasikan grafik drawable

Mencoba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan Animasi di Compose.

Menganimasikan vector drawable →

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

Opsi pertama adalah menggunakan AnimationDrawable. Opsi ini memungkinkan Anda menentukan beberapa file drawable statis yang ditampilkan satu per satu untuk membuat animasi. Opsi kedua adalah menggunakan an AnimatedVectorDrawable, yang memungkinkan Anda menganimasikan properti dari a vector drawable.

Menggunakan AnimationDrawable

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

Anda dapat menentukan frame animasi dalam kode menggunakan AnimationDrawable class API, tetapi lebih mudah menentukannya dengan satu file XML yang mencantumkan frame yang membentuk animasi. File XML untuk animasi jenis ini berada di res/drawable/ direktori project Android Anda. Dalam hal ini, petunjuknya memberikan urutan dan durasi untuk setiap frame dalam animasi.

File XML terdiri dari elemen <animation-list> sebagai node root dan serangkaian node turunan <item> yang masing-masing menentukan sebuah frame—resource drawable dan 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 atribut android:oneshot daftar ke true akan membuat animasi berjalan sekali, lalu berhenti dan bertahan di frame terakhir. Jika Anda menetapkan android:oneshot ke false, animasi akan berulang.

Jika Anda menyimpan XML ini sebagai rocket_thrust.xml di direktori res/drawable/ project, Anda dapat menambahkannya sebagai gambar latar ke View, lalu memanggil start() untuk memutarnya. Berikut adalah contoh aktivitas yang menambahkan animasi ke ImageView lalu dianimasikan saat layar disentuh:

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

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() Activity Anda, karena AnimationDrawable belum sepenuhnya terhubung ke jendela ini. Untuk segera memutar animasi, tanpa memerlukan interaksi, Anda dapat memanggilnya dari metode onStart() di Activity, yang dipanggil saat Android membuat tampilan terlihat di layar.

Untuk mengetahui 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 class—dan AnimatedVectorDrawableCompat untuk kompatibilitas mundur—memungkinkan Anda menganimasikan properti vector drawable, seperti memutarnya atau mengubah data jalurnya agar berubah menjadi gambar berbeda.

Biasanya, Anda menetapkan vector drawable teranimasi dalam tiga file XML:

• Vector drawable dengan elemen <vector> di res/drawable/.
• Vector drawable teranimasi dengan elemen <animated-vector> di res/drawable/.
• Satu atau beberapa animator objek dengan elemen <objectAnimator> di res/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

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
      android:duration="6000"
      android:propertyName="rotation"
      android:valueFrom="0"
      android:valueTo="360" />
</set>

Animator kedua dalam contoh ini mengubah jalur vector drawable dari satu bentuk menjadi bentuk lainnya. 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:

Pratinjau Animated Vector Drawable (AVD)

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

Untuk mengetahui informasi selengkapnya, lihat referensi API untuk AnimatedVectorDrawable.