Skip to content

Most visited

Recently visited

navigation

Mendefinisikan Animasi Custom

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 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 RippleDrawable sebagai sumber daya XML dengan menggunakan elemen ripple.

Anda bisa menetapkan warna ke objek-objek RippleDrawable. Untuk mengubah warna default umpan balik sentuh, gunakan atribut android:colorControlHighlight tema.

Untuk informasi selengkapnya, lihat referensi API bagi kelas RippleDrawable.

Menggunakan Reveal Effect

Animasi singkap memberi pengguna kesinambungan visual saat menampilkan atau menyembunyikan sekelompok elemen UI. Metode 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 Visibility didukung sebagai transisi masuk atau transisi keluar. Untuk informasi selengkapnya, lihat referensi API untuk kelas 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 ChangeImageTransform. Untuk informasi selengkapnya, lihat referensi API untuk Transition.

Sebaliknya, untuk mengaktifkan transisi konten jendela dalam kode Anda, panggil metode 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 Transition:

Metode setExitTransition() dan setSharedElementExitTransition() mendefinisikan transisi keluar untuk aktivitas yang memanggil. Metode setEnterTransition() dan 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 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 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 View.setTransitionName() untuk menetapkan nama elemen umum di kedua aktivitas.

Untuk membalik animasi transisi babak bila Anda menyelesaikan aktivitas kedua, panggil metode Activity.finishAfterTransition() sebagai ganti 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 View.setTransitionName() di kedua aktivitas), dan buat sebuah objek 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 PathInterpolator adalah interpolator baru berdasarkan sebuah kurva Bézier atau objek 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 PathInterpolator ke metode Animator.setInterpolator().

Kelas 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 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 StateListAnimator memungkinkan Anda mendefinisikan animator yang berjalan bila status tampilan berubah. Contoh berikut menampilkan cara mendefinisikan 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 AnimationInflater.loadStateListAnimator(), dan tetapkan animator ke tampilan dengan metode 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 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 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 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 ObjectAnimator atau 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 AnimatedVectorDrawable.

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Ikuti Google Developers di WeChat

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience. (Dec 2017 Android Platform & Tools Survey)