page.title=Mendefinisikan Animasi Custom @jd:body

Pelajaran ini mengajarkan Anda cara

  1. Menyesuaikan Umpan Balik Sentuh
  2. Menggunakan Reveal Effect
  3. Menyesuaikan Transisi Aktivitas
  4. Menganimasikan Perubahan Status Tampilan
  5. Menganimasikan Drawable Vektor

Anda juga harus membaca

Animasi dalam desain bahan memberi pengguna umpan balik tentang tindakannya dan menyediakan kesinambungan visual saat pengguna berinteraksi dengan aplikasi Anda. Tema bahan menyediakan beberapa animasi default untuk tombol dan transisi aktivitas, dan Android 5.0 (API level 21) ke atas memungkinkan Anda menyesuaikan animasi ini dan membuat yang baru:

Menyesuaikan Umpan Balik Sentuh

Umpan balik sentuh dalam desain bahan menyediakan konfirmasi visual seketika pada titik kontak bila pengguna berinteraksi dengan elemen UI. Animasi umpan balik sentuh default untuk tombol menggunakan kelas {@link android.graphics.drawable.RippleDrawable} baru, yang bertransisi di antara berbagai status dengan efek riak.

Di sebagian besar kasus, Anda harus menerapkan fungsionalitas ini dalam XML tampilan dengan menetapkan latar belakang tampilan sebagai:

Catatan: selectableItemBackgroundBorderless adalah atribut baru yang diperkenalkan di API level 21.

Atau, Anda bisa mendefinisikan {@link android.graphics.drawable.RippleDrawable} sebagai sumber daya XML dengan menggunakan elemen ripple.

Anda bisa menetapkan warna ke objek-objek {@link android.graphics.drawable.RippleDrawable}. Untuk mengubah warna default umpan balik sentuh, gunakan atribut android:colorControlHighlight tema.

Untuk informasi selengkapnya, lihat referensi API bagi kelas {@link android.graphics.drawable.RippleDrawable}.

Menggunakan Reveal Effect

Animasi singkap memberi pengguna kesinambungan visual saat menampilkan atau menyembunyikan sekelompok elemen UI. Metode {@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} memungkinkan Anda menganimasikan lingkaran terpangkas untuk memperlihatkan atau menyembunyikan tampilan.

Untuk memperlihatkan tampilan yang sebelumnya tidak terlihat dengan menggunakan efek ini:

// previously invisible view
View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the final radius for the clipping circle
int finalRadius = Math.max(myView.getWidth(), myView.getHeight());

// create the animator for this view (the start radius is zero)
Animator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);

// make the view visible and start the animation
myView.setVisibility(View.VISIBLE);
anim.start();

Untuk menyembunyikan sebuah tampilan yang sebelumnya terlihat dengan menggunakan efek ini:

// previously visible view
final View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the initial radius for the clipping circle
int initialRadius = myView.getWidth();

// create the animation (the final radius is zero)
Animator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);

// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        myView.setVisibility(View.INVISIBLE);
    }
});

// start the animation
anim.start();

Menyesuaikan Transisi Aktivitas

Gambar 1 - Transisi dengan elemen bersama.

Untuk memutar ulang film, klik layar perangkat

Transisi aktivitas dalam aplikasi desain bahan memberikan koneksi visual antar berbagai status melalui gerakan dan transformasi di antara elemen umum. Anda bisa menetapkan animasi custom untuk masuk ke dan keluar dari transisi dan untuk transisi elemen bersama di antara aktivitas.

Android 5.0 (API level 21) mendukung transisi masuk dan transisi keluar ini:

Transisi apa pun yang memperluas kelas {@link android.transition.Visibility} didukung sebagai transisi masuk atau transisi keluar. Untuk informasi selengkapnya, lihat referensi API untuk kelas {@link android.transition.Transition}.

Android 5.0 (API level 21) juga mendukung transisi elemen bersama ini:

Bila Anda mengaktifkan transisi aktivitas dalam aplikasi, transisi memudar-silang default akan diaktifkan di antara aktivitas masuk dan aktivitas keluar.

  Gambar 2 - Transisi babak dengan satu elemen bersama.

Menetapkan transisi custom

Pertama, aktifkan transisi konten jendela dengan atribut android:windowContentTransitions bila Anda mendefinisikan gaya yang mewarisi tema bahan. Anda juga bisa menetapkan transisi-transisi masuk, keluar, dan elemen bersama dalam definisi gaya:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowContentTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

Transisi change_image_transform dalam contoh ini didefinisikan sebagai berikut:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

Elemen changeImageTransform menunjukkan kelas {@link android.transition.ChangeImageTransform}. Untuk informasi selengkapnya, lihat referensi API untuk {@link android.transition.Transition}.

Sebaliknya, untuk mengaktifkan transisi konten jendela dalam kode Anda, panggil metode {@link android.view.Window#requestFeature Window.requestFeature()}:

// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());

Untuk menetapkan transisi dalam kode Anda, panggil metode-metode ini dengan objek {@link android.transition.Transition}:

Metode {@link android.view.Window#setExitTransition setExitTransition()} dan {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} mendefinisikan transisi keluar untuk aktivitas yang memanggil. Metode {@link android.view.Window#setEnterTransition setEnterTransition()} dan {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} mendefinisikan transisi masuk untuk aktivitas yang dipanggil.

Untuk mendapatkan efek penuh sebuah transisi, Anda harus mengaktifkan transisi konten jendela pada aktivitas yang memanggil maupun aktivitas yang dipanggil. Jika tidak, aktivitas yang memanggil akan memulai transisi keluar, namun kemudian Anda akan melihat transisi jendela (seperti mengelupas atau memudar).

Untuk memulai transisi masuk sesegera mungkin, gunakan metode {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} pada aktivitas yang dipanggil. Ini memungkinkan Anda mendapatkan transisi masuk yang lebih dramatis.

Memulai aktivitas dengan menggunakan transisi

Jika Anda mengaktifkan transisi dan mengatur transisi keluar untuk aktivitas, transisi itu akan diaktifkan bila Anda menjalankan aktivitas lain sebagai berikut:

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

Jika Anda telah mengatur transisi masuk untuk aktivitas kedua, transisi juga akan diaktifkan bila aktivitas dimulai. Untuk menonaktifkan transisi bila Anda memulai aktivitas lain, sediakan bundel opsi null.

Memulai aktivitas dengan satu elemen bersama

Untuk membuat animasi transisi layar di antara dua aktivitas yang memiliki satu elemen bersama:

  1. Aktifkan transisi konten jendela dalam tema Anda.
  2. Tetapkan transisi elemen bersama dalam gaya Anda.
  3. Definisikan transisi Anda sebagai sumber daya XML.
  4. Tetapkan nama umum pada elemen bersama dalam kedua layout dengan atribut android:transitionName.
  5. Gunakan metode {@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()}.
// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // start the new activity
        startActivity(intent, options.toBundle());
    }
});

Untuk tampilan dinamis bersama yang Anda hasilkan dalam kode, gunakan metode {@link android.view.View#setTransitionName View.setTransitionName()} untuk menetapkan nama elemen umum di kedua aktivitas.

Untuk membalik animasi transisi babak bila Anda menyelesaikan aktivitas kedua, panggil metode {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} sebagai ganti {@link android.app.Activity#finish Activity.finish()}.

Memulai aktivitas dengan beberapa elemen bersama

Untuk membuat animasi transisi babak antara dua aktivitas yang memiliki lebih dari satu elemen bersama, definisikan elemen bersama di kedua layout dengan atribut android:transitionName (atau gunakan metode {@link android.view.View#setTransitionName View.setTransitionName()} di kedua aktivitas), dan buat sebuah objek {@link android.app.ActivityOptions} sebagai berikut:

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));

Menggunakan Gerakan Melengkung

Animasi dalam desain bahan mengandalkan kurva untuk pola interpolasi waktu dan gerakan spasial. Dengan Android 5.0 (API level 21) ke atas, Anda bisa mendefinisikan kurva pewaktuan custom dan pola gerakan melengkung untuk animasi.

Kelas {@link android.view.animation.PathInterpolator} adalah interpolator baru berdasarkan sebuah kurva Bézier atau objek {@link android.graphics.Path}. Interpolator ini menetapkan kurva gerakan dalam bujur sangkar 1x1, dengan titik-titik jangkar di (0,0) dan (1,1) dan titik-titik kontrol sebagaimana ditetapkan menggunakan argumen konstruktor. Anda juga bisa mendefinisikan interpolator path sebagai sumber daya XML:

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.4"
    android:controlY1="0"
    android:controlX2="1"
    android:controlY2="1"/>

Sistem menyediakan sumber daya XML untuk tiga kurva dasar dalam spesifikasi desain bahan:

Anda bisa meneruskan objek {@link android.view.animation.PathInterpolator} ke metode {@link android.animation.Animator#setInterpolator Animator.setInterpolator()}.

Kelas {@link android.animation.ObjectAnimator} memiliki konstruktor-konstruktor baru yang memungkinkan Anda menganimasikan koordinat bersama sebuah path dengan menggunakan dua atau beberapa properti sekaligus. Misalnya, animator berikut menggunakan objek {@link android.graphics.Path} untuk menganimasikan properti X dan Y sebuah tampilan:

ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();

Menganimasikan Perubahan Status Tampilan

Kelas {@link android.animation.StateListAnimator} memungkinkan Anda mendefinisikan animator yang berjalan bila status tampilan berubah. Contoh berikut menampilkan cara mendefinisikan {@link android.animation.StateListAnimator} sebagai sumber daya XML:

<!-- animate the translationZ property of a view when pressed -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="@android:integer/config_shortAnimTime"
        android:valueTo="2dp"
        android:valueType="floatType"/>
        <!-- you could have other objectAnimator elements
             here for "x" and "y", or other properties -->
    </set>
  </item>
  <item android:state_enabled="true"
    android:state_pressed="false"
    android:state_focused="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="100"
        android:valueTo="0"
        android:valueType="floatType"/>
    </set>
  </item>
</selector>

Untuk menyertakan animasi status tampilan custom ke tampilan, definisikan animator menggunakan elemen selector dalam sumber daya file XML sebagaimana dalam contoh ini, dan tetapkan ke tampilan Anda dengan atribut android:stateListAnimator. Untuk menetapkan animator daftar status ke sebuah tampilan dalam kode Anda, gunakan metode {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()}, dan tetapkan animator ke tampilan dengan metode {@link android.view.View#setStateListAnimator View.setStateListAnimator()}.

Bila tema Anda memperluas tema bahan, tombol-tombol akan memiliki animasi Z secara default. Untuk menghindari perilaku ini di tombol Anda, aturlah atribut android:stateListAnimator ke @null.

Kelas {@link android.graphics.drawable.AnimatedStateListDrawable} memungkinkan Anda membuat drawable yang menampilkan animasi di antara perubahan status tampilan terkait. Sebagian widget sistem di Android 5.0 menggunakan animasi ini secara default. Contoh berikut menampilkan cara mendefinisikan {@link android.graphics.drawable.AnimatedStateListDrawable} sebagai sumber daya XML:

<!-- res/drawable/myanimstatedrawable.xml -->
<animated-selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- provide a different drawable for each state-->
    <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
        android:state_pressed="true"/>
    <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
        android:state_focused="true"/>
    <item android:id="@id/default"
        android:drawable="@drawable/drawableD"/>

    <!-- specify a transition -->
    <transition android:fromId="@+id/default" android:toId="@+id/pressed">
        <animation-list>
            <item android:duration="15" android:drawable="@drawable/dt1"/>
            <item android:duration="15" android:drawable="@drawable/dt2"/>
            ...
        </animation-list>
    </transition>
    ...
</animated-selector>

Menganimasikan Drawable Vektor

Drawable Vektor bisa diubah skalanya tanpa kehilangan definisi. Kelas {@link android.graphics.drawable.AnimatedVectorDrawable} memungkinkan Anda menganimasikan properti drawable vektor.

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

Drawable vektor yang dianimasikan bisa menganimasikan atribut elemen <group> dan <path>. Elemen <group> mendefinisikan satu set path atau subgrup, dan elemen <path> mendefinisikan path yang harus digambar.

Bila Anda mendefinisikan drawable vektor yang ingin dianimasikan, gunakan atribut android:name untuk menetapkan nama unik ke grup dan path, sehingga Anda bisa merujuknya dari definisi animator Anda. Misalnya:

<!-- 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 drawable vektor yang dianimasikan merujuk pada grup dan path dalam drawable vektor berdasarkan namanya:

<!-- res/drawable/animvectordrawable.xml -->
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@anim/rotation" />
    <target
        android:name="v"
        android:animation="@anim/path_morph" />
</animated-vector>

Definisi animasi menyatakan objek {@link android.animation.ObjectAnimator} atau {@link android.animation.AnimatorSet}. Animator pertama dalam contoh ini memutar grup target sebanyak 360 derajat:

<!-- res/anim/rotation.xml -->
<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

Animator kedua dalam contoh ini perlahan-lahan mengubah bentuk path drawable vektor dari satu bentuk ke bentuk yang lain. Kedua path harus kompatibel untuk morphing: keduanya harus memiliki jumlah perintah yang sama dan jumlah parameter yang sama untuk setiap perintah.

<!-- res/anim/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>

Untuk informasi selengkapnya, lihat referensi API bagi {@link android.graphics.drawable.AnimatedVectorDrawable}.