page.title=Mendefinisikan Animasi Custom @jd:body
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:
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:
?android:attr/selectableItemBackground
untuk riak berbatas.?android:attr/selectableItemBackgroundBorderless
untuk riak yang meluas ke luar
tampilan. Latar belakang ini akan digambar di atas, dan dibatasi oleh, induk tampilan terdekat dengan
latar belakang non-null.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}.
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();
Gambar 1 - Transisi dengan elemen bersama.
Untuk memutar ulang film, klik layar perangkatTransisi 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.
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.
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
.
Untuk membuat animasi transisi layar di antara dua aktivitas yang memiliki satu elemen bersama:
android:transitionName
.// 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()}.
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"));
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:
@interpolator/fast_out_linear_in.xml
@interpolator/fast_out_slow_in.xml
@interpolator/linear_out_slow_in.xml
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();
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>
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:
<vector>
dalam
res/drawable/
<animated-vector>
dalam
res/drawable/
<objectAnimator>
dalam
res/anim/
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}.