Membuat Animasi Pada View Di Android


Salah satu hal unik di pemograman Android adalah ia dilengkapi dengan banyak class di package android.animation untuk mengimplementasikan animasi secara mudah. Bila programmer tidak ingin membuat kode program secara langsung, Android SDK bahkan memperbolehkan animasi didefinisikan dalam bentuk XML. Walaupun animasi bisa diterapkan pada seluruh komponen UI (seperti Button, EditText, dan sebagainya), contoh kasus yang lebih realistis adalah penggunaan animasi pada perpindahan activity dan fragment.

Sebagai latihan, saya akan menambahkan animasi pada sebuah program penjelajah file yang sudah saya buat sebelumnya. Pada saat pengguna menyentuh sebuah folder, saya membuat fragment baru yang menampilkan isi folder tersebut, seperti pada kode program berikut ini:

@Override
public void onFolderClick(File file) {
    ExplorerFragment explorerFragment = new ExplorerFragment();
    Bundle args = new Bundle();
    args.putString(ExplorerFragment.DATA_LOKASI, file.getAbsolutePath());
    explorerFragment.setArguments(args);
    FragmentTransaction transaction = getFragmentManager().beginTransaction();
    transaction.replace(R.id.container, explorerFragment);
    transaction.addToBackStack(null);
    transaction.commit();
}

Perpindahan fragment (membuka folder baru) akan terlihat seperti pada animasi berikut ini:

Perpindahan fragment tanpa animasi

Perpindahan fragment tanpa animasi

Untuk menambahkan animasi saat beralih dari fragment ke fragment lainnya, saya dapat memanggil method setTransition() milik FragmentTransaction. Method ini menerima animasi standar berupa FragmentTransaction.TRANSIT_NONE, FragmentTransaction.TRANSIT_FRAGMENT_OPEN, dan FragmentTransaction.TRANSIT_FRAGMENT_CLOSE. Sebagai contoh, saya menambahkan baris berikut ini sebelum transaction.commit():

transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);

Sekarang, saya akan menemukan animasi pada saat peralihan fragment seperti berikut ini:

Perpindahan fragment dengan animasi standar

Perpindahan fragment dengan animasi standar

Perhatikan bahwa saat saya menggunakan tombol Back di perangkat mobile untuk kembali ke fragment sebelumnya, Android juga membuat animasi yang merupakan kebalikan saat membuka sebuah fragment. Hal ini dilakukan secara otomatis tanpa perlu kode program tambahan.

Program penjelajah file yang saya buat juga bisa menampilkan isi sebuah file dalam bentuk sebuah activity baru dengan kode program seperti berikut ini:

Intent intent = new Intent(getActivity(), DisplayTextActivity.class);
intent.putExtra(DisplayTextActivity.DATA_FILE, selectedFile.getAbsolutePath());
FileAdapter fileAdapter = (FileAdapter) filesView.getAdapter();
ArrayList<String> daftarFile = fileAdapter.getDaftarFile();
intent.putStringArrayListExtra(DisplayTextActivity.DATA_DAFTAR_FILE, daftarFile);
intent.putExtra(DisplayTextActivity.DATA_INDEX_FILE, daftarFile.indexOf(selectedFile.getAbsolutePath()));            
startActivity(intent);

Android secara otomatis akan melakukan animasi pada saat perpindahan activity. Walaupun demikian, saya tetap bisa memakai animasi yang berbeda dengan melewatkannya dalam bentuk parameter Bundle seperti pada contoh berikut ini:

View selectedView = filesView.getChildAt(position - filesView.getFirstVisiblePosition());
Bundle bundle = ActivityOptions.makeScaleUpAnimation(filesView, selectedView.getLeft(), selectedView.getTop(), 0, 0).toBundle();
startActivity(intent, bundle);

Sekarang, bila saya membuka activity baru, saya akan menemukan animasi seperti berikut ini:

Animasi pada perpindahan activity

Animasi pada perpindahan activity

Selain memakai animasi yang sudah disediakan, saya juga bisa mendefinisikan sebuah animasi dalam bentuk XML. Sebagai contoh, pada penjelajah file yang saya buat, pengguna bisa melihat isi file sebelumnya atau berikutnya (dalam folder yang sama) dengan menyapu layar ke kiri dan ke kanan. Saya akan mendefinisikan sebuah animasi untuk perpindahan file dengan men-klik kanan folder res dan memilih menu New, Android Resource File. Saya kemudian mengisi dialog yang muncul seperti pada gambar berikut ini:

Mendefinisikan animasi dalam bentuk XML

Mendefinisikan animasi dalam bentuk XML

Saya kemudian mengisi XML yang dihasilkan dengan:

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

    <objectAnimator
        android:valueFrom="1"
        android:valueTo="0"
        android:propertyName="alpha"
        android:duration="0" />

    <objectAnimator
        android:valueFrom="300"
        android:valueTo="0"
        android:propertyName="translationX"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="300" />

    <objectAnimator
        android:valueFrom="0"
        android:valueTo="1"
        android:propertyName="alpha"
        android:duration="300" />

</set>

XML di atas pada dasarnya adalah cara deklaratif untuk membuat object dari class ObjectAnimator (https://developer.android.com/reference/android/animation/ObjectAnimator.html). Pada deklarasi di atas, saya membuat beberapa animator yang akan mengubah nilai property translationX dan alpha milik target. Nilai translationX akan mempengaruhi posisi X dari target. Nilai alpha akan mempengaruhi transparansi target (nilai 0 membuat target tidak terlihat sama sekali). Karena animasi saat ini tidak terikat pada sebuah target tertentu, saya bisa memakai ulang animasi yang sama pada banyak View berbeda.

Saya kemudian membuat XML dengan nama kiri_keluar.xml yang isinya seperti berikut ini:

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

    <objectAnimator
        android:valueFrom="1"
        android:valueTo="0"
        android:propertyName="scaleX"
        android:interpolator="@android:interpolator/accelerate_quad"
        android:duration="300" />

    <objectAnimator
        android:valueFrom="1"
        android:valueTo="0"
        android:propertyName="scaleY"
        android:interpolator="@android:interpolator/accelerate_quad"
        android:duration="300" />

    <objectAnimator
        android:valueFrom="0"
        android:valueTo="-200"
        android:propertyName="translationX"
        android:interpolator="@android:interpolator/accelerate_quad"
        android:duration="300" />

    <objectAnimator
        android:valueFrom="1"
        android:valueTo="0"
        android:propertyName="alpha"
        android:duration="300" />

</set>

Kali ini, saya melakukan animasi pada property scaleX dan scaleY yang mempengaruhi ukuran dari sebuah target.

Berikutnya, saya mendeklarasikan animasi dengan nama kanan_masuk.xml seperti berikut ini:

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

    <objectAnimator
        android:valueFrom="1"
        android:valueTo="0"
        android:propertyName="alpha"
        android:duration="0" />

    <objectAnimator
        android:valueFrom="-300"
        android:valueTo="0"
        android:propertyName="translationX"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="300" />

    <objectAnimator
        android:valueFrom="0"
        android:valueTo="1"
        android:propertyName="alpha"
        android:duration="300" />

</set>

Saya juga mendeklarasikan animasi dengan nama kanan_keluar.xml yang isinya seperti:

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

    <objectAnimator
        android:valueFrom="1"
        android:valueTo="0"
        android:propertyName="scaleX"
        android:interpolator="@android:interpolator/accelerate_quad"
        android:duration="300" />

    <objectAnimator
        android:valueFrom="1"
        android:valueTo="0"
        android:propertyName="scaleY"
        android:interpolator="@android:interpolator/accelerate_quad"
        android:duration="300" />

    <objectAnimator
        android:valueFrom="0"
        android:valueTo="200"
        android:propertyName="translationX"
        android:interpolator="@android:interpolator/accelerate_quad"
        android:duration="300" />

    <objectAnimator
        android:valueFrom="1"
        android:valueTo="0"
        android:propertyName="alpha"
        android:duration="300" />

</set>

Sekarang, saya siap untuk memakai mereka pada saat membuat fragment baru. Sebagai contoh, saya mengubah kode program saya menjadi seperti berikut ini:

@Override
public void onNextFile() {
    if ((daftarFile != null) && (index < daftarFile.size() -1)) {
        index++;
        tampilkanFile(new File(daftarFile.get(index)), R.animator.kiri_masuk, R.animator.kiri_keluar);
    }
}

@Override
public void onPreviousFile() {
    if ((daftarFile != null) && (index > 0)) {
        index--;
        tampilkanFile(new File(daftarFile.get(index)), R.animator.kanan_masuk, R.animator.kanan_keluar);
    }
}

private void tampilkanFile(File file, int animasiMasuk, int animasiKeluar) {
    DisplayTextFragment displayTextFragment = new DisplayTextFragment();
    Bundle args = new Bundle();
    args.putString(DisplayTextFragment.DATA_FILE, file.getAbsolutePath());
    displayTextFragment.setArguments(args);
    FragmentTransaction transaction = getFragmentManager().beginTransaction();
    transaction.setCustomAnimations(animasiMasuk, animasiKeluar);
    transaction.replace(R.id.container, displayTextFragment);
    transaction.addToBackStack(null);
    transaction.commit();
}

Bila saya menyapu layar ke kiri dan ke kanan, saya akan memperoleh animasi seperti yang terlihat pada:

Contoh animasi buatan sendiri

Contoh animasi buatan sendiri

Perihal Solid Snake
I'm nothing...

One Response to Membuat Animasi Pada View Di Android

  1. hang puriah mengatakan:

    izin sedot ilmunya gan

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: