Saat aplikasi Anda digunakan, informasi baru harus ditampilkan di layar ketika informasi lama dihapus. Mengalihkan apa yang ditampilkan secara tiba-tiba dapat membuat tampilan layar terlihat janggal atau pengguna dapat dengan mudah kehilangan konten baru di layar. Memanfaatkan animasi dapat memperlambat proses perubahan dan menarik perhatian pengguna dengan ide agar informasi terbaru terlihat lebih jelas.
Ada tiga animasi yang umum digunakan saat menampilkan atau menyembunyikan tampilan. Anda dapat menggunakan animasi reveal melingkar, crossfade, atau cardflip.
Membuat animasi crossfade
Animasi crossfade (juga dikenal sebagai animasi melebur) secara perlahan memudarkan satu View atau ViewGroup, lalu memperjelas yang lain secara bersamaan. Animasi ini berguna ketika Anda ingin beralih ke konten atau tampilan lain di aplikasi Anda. Animasi crossfade yang ditunjukkan di sini menggunakan ViewPropertyAnimator yang tersedia untuk versi Android 3.1 (API level 12) dan versi yang lebih tinggi.
Berikut adalah contoh crossfade dari indikator progres untuk beberapa konten teks.
Membuat tampilan
Pertama, Anda harus membuat dua tampilan yang ingin di-crossfade. Contoh berikut akan membuat indikator progres dan tampilan teks yang dapat di-scroll:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView style="?android:textAppearanceMedium"
android:lineSpacingMultiplier="1.2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum"
android:padding="16dp" />
</ScrollView>
<ProgressBar android:id="@+id/loading_spinner"
style="?android:progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
Menyiapkan animasi crossfade
Untuk menyiapkan animasi crossfade:
- Buat variabel anggota untuk tampilan yang ingin di-crossfade. Anda memerlukan referensi ini nanti saat memodifikasi tampilan selama animasi berjalan.
- Untuk tampilan yang akan diperjelas, tetapkan visibilitasnya ke
GONE. Cara ini mencegah tampilan tersebut memenuhi ruang tata letak dan menghilangkannya dari penghitungan tata letak, sehingga pemrosesan akan menjadi lebih cepat. - Cache data properti sistem
config_shortAnimTimeconfig_longAnimTimedanconfig_mediumAnimTimejuga tersedia jika Anda ingin menggunakannya.
Berikut adalah contoh penggunaan tata letak dari cuplikan kode sebelumnya sebagai tampilan konten aktivitas:
Kotlin
class CrossfadeActivity : Activity() {
private lateinit var contentView: View
private lateinit var loadingView: View
private var shortAnimationDuration: Int = 0
...
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_crossfade)
contentView = findViewById(R.id.content)
loadingView = findViewById(R.id.loading_spinner)
// Initially hide the content view.
contentView.visibility = View.GONE
// Retrieve and cache the system's default "short" animation time.
shortAnimationDuration = resources.getInteger(android.R.integer.config_shortAnimTime)
}
...
}
Java
public class CrossfadeActivity extends Activity {
private View contentView;
private View loadingView;
private int shortAnimationDuration;
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_crossfade);
contentView = findViewById(R.id.content);
loadingView = findViewById(R.id.loading_spinner);
// Initially hide the content view.
contentView.setVisibility(View.GONE);
// Retrieve and cache the system's default "short" animation time.
shortAnimationDuration = getResources().getInteger(
android.R.integer.config_shortAnimTime);
}
...
}
Meng-crossfade tampilan
Setelah tampilan disiapkan dengan benar, tambahkan fungsi crossfade dengan cara berikut:
- Untuk tampilan yang diperjelas, tetapkan nilai alfanya ke
0dan visibilitasnya keVISIBLE. (Perlu diingat bahwa visibilitas awalnya ditetapkan keGONE.) Tindakan ini membuat tampilan dapat dilihat, tetapi sepenuhnya transparan. - Untuk tampilan yang diperjelas, animasikan nilai alfanya dari
0menjadi1. Untuk tampilan yang dipudarkan, animasikan nilai alfanya dari1menjadi0. - Menggunakan
onAnimationEnd()dalamAnimator.AnimatorListener, tetapkan visibilitas tampilan yang dipudarkan menjadiGONE. Meskipun nilai alfanya adalah0, menetapkan visibilitas tampilan ini menjadiGONEakan mencegah tampilan memenuhi ruang tata letak dan menghilangkannya dari penghitungan tata letak, sehingga pemrosesan akan menjadi lebih cepat.
Metode berikut menunjukkan contoh cara melakukannya:
Kotlin
class CrossfadeActivity : Activity() {
private lateinit var contentView: View
private lateinit var loadingView: View
private var shortAnimationDuration: Int = 0
...
private fun crossfade() {
contentView.apply {
// Set the content view to 0% opacity but visible, so that it is visible
// (but fully transparent) during the animation.
alpha = 0f
visibility = View.VISIBLE
// Animate the content view to 100% opacity, and clear any animation
// listener set on the view.
animate()
.alpha(1f)
.setDuration(shortAnimationDuration.toLong())
.setListener(null)
}
// Animate the loading view to 0% opacity. After the animation ends,
// set its visibility to GONE as an optimization step (it won't
// participate in layout passes, etc.)
loadingView.animate()
.alpha(0f)
.setDuration(shortAnimationDuration.toLong())
.setListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator) {
loadingView.visibility = View.GONE
}
})
}
}
Java
public class CrossfadeActivity extends Activity {
private View contentView;
private View loadingView;
private int shortAnimationDuration;
...
private void crossfade() {
// Set the content view to 0% opacity but visible, so that it is visible
// (but fully transparent) during the animation.
contentView.setAlpha(0f);
contentView.setVisibility(View.VISIBLE);
// Animate the content view to 100% opacity, and clear any animation
// listener set on the view.
contentView.animate()
.alpha(1f)
.setDuration(shortAnimationDuration)
.setListener(null);
// Animate the loading view to 0% opacity. After the animation ends,
// set its visibility to GONE as an optimization step (it won't
// participate in layout passes, etc.)
loadingView.animate()
.alpha(0f)
.setDuration(shortAnimationDuration)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
loadingView.setVisibility(View.GONE);
}
});
}
}
Membuat animasi card flip
Card flip menganimasikan tampilan konten dengan menampilkan animasi yang menyerupai kartu yang sedang dibalik. Animasi card flip yang ditunjukkan di sini menggunakan FragmentTransaction, yang tersedia untuk Android 3.0 (API level 11) dan yang lebih tinggi.
Berikut tampilan animasi card flip:
Membuat objek Animator
Untuk membuat animasi card flip, Anda memerlukan total empat animator. Dua animator untuk saat bagian depan kartu bergerak keluar dan ke kiri, serta saat bergerak masuk dan dari kiri. Anda juga memerlukan dua animator untuk saat bagian belakang kartu bergerak masuk dan dari kanan, serta saat bergerak keluar dan ke kanan.
card_flip_left_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Before rotating, immediately set the alpha to 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:duration="0" />
<!-- Rotate. -->
<objectAnimator
android:valueFrom="-180"
android:valueTo="0"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full" />
<!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
<objectAnimator
android:valueFrom="0.0"
android:valueTo="1.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1" />
</set>
card_flip_left_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
android:valueFrom="0"
android:valueTo="180"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full" />
<!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1" />
</set>
card_flip_right_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Before rotating, immediately set the alpha to 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:duration="0" />
<!-- Rotate. -->
<objectAnimator
android:valueFrom="180"
android:valueTo="0"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full" />
<!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
<objectAnimator
android:valueFrom="0.0"
android:valueTo="1.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1" />
</set>
card_flip_right_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
android:valueFrom="0"
android:valueTo="-180"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full" />
<!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1" />
</set>
Membuat tampilan
Setiap sisi "kartu" adalah tata letak terpisah dan dapat berisi konten apa pun yang Anda inginkan, seperti dua tampilan teks, dua gambar, atau kombinasi tampilan apa pun untuk dibalik. Kemudian, Anda akan menggunakan dua tata letak dalam fragmen yang nantinya akan dianimasikan. Tata letak berikut membuat satu sisi kartu yang menampilkan teks:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#a6c"
android:padding="16dp"
android:gravity="bottom">
<TextView android:id="@android:id/text1"
style="?android:textAppearanceLarge"
android:textStyle="bold"
android:textColor="#fff"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/card_back_title" />
<TextView style="?android:textAppearanceSmall"
android:textAllCaps="true"
android:textColor="#80ffffff"
android:textStyle="bold"
android:lineSpacingMultiplier="1.2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/card_back_description" />
</LinearLayout>
Dan sisi lain kartu yang menampilkan ImageView:
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/image1"
android:scaleType="centerCrop"
android:contentDescription="@string/description_image_1" />
Membuat fragmen
Buat class fragmen untuk bagian depan dan belakang kartu. Class ini menampilkan tata letak yang Anda buat sebelumnya dalam metode onCreateView() setiap fragmen. Anda dapat membuat instance fragmen ini dalam aktivitas induk ketika ingin menunjukkan kartu. Contoh berikut menunjukkan class fragmen bertingkat di dalam aktivitas induk yang menggunakannya:
Kotlin
class CardFlipActivity : FragmentActivity() {
...
/**
* A fragment representing the front of the card.
*/
class CardFrontFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View = inflater.inflate(R.layout.fragment_card_front, container, false)
}
/**
* A fragment representing the back of the card.
*/
class CardBackFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View = inflater.inflate(R.layout.fragment_card_back, container, false)
}
}
Java
public class CardFlipActivity extends FragmentActivity {
...
/**
* A fragment representing the front of the card.
*/
public class CardFrontFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_card_front, container, false);
}
}
/**
* A fragment representing the back of the card.
*/
public class CardBackFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_card_back, container, false);
}
}
}
Menganimasikan card flip
Sekarang, Anda harus menampilkan fragmen di dalam aktivitas induk.
Untuk melakukannya, buat tata letak untuk aktivitas Anda terlebih dahulu. Contoh berikut membuat FrameLayout yang dapat Anda tambahkan fragmen pada waktu proses:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Dalam kode aktivitas, tetapkan tampilan konten menjadi tata letak yang baru saja Anda buat. Sebaiknya, Anda menampilkan fragmen default saat aktivitas dibuat, aktivitas contoh berikut akan menunjukkan kepada Anda cara menampilkan bagian depan kartu secara default:
Kotlin
class CardFlipActivity : FragmentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_activity_card_flip)
if (savedInstanceState == null) {
supportFragmentManager.beginTransaction()
.add(R.id.container, CardFrontFragment())
.commit()
}
}
...
}
Java
public class CardFlipActivity extends FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_activity_card_flip);
if (savedInstanceState == null) {
getSupportFragmentManager()
.beginTransaction()
.add(R.id.container, new CardFrontFragment())
.commit();
}
}
...
}
Sekarang setelah bagian depan kartu terlihat, Anda dapat menunjukkan bagian belakang kartu dengan animasi flip pada waktu yang tepat. Buat metode untuk menunjukkan sisi lain kartu yang melakukan hal-hal berikut:
- Menetapkan animasi kustom yang Anda buat sebelumnya untuk transisi fragmen.
- Mengganti fragmen yang ditampilkan saat ini dengan fragmen baru dan animasikan peristiwa ini dengan animasi kustom yang Anda buat.
- Menambahkan fragmen yang sebelumnya ditampilkan ke stack belakang fragmen sehingga ketika pengguna menekan tombol Kembali kartu akan membalik kembali.
Kotlin
class CardFlipActivity : FragmentActivity() {
...
private fun flipCard() {
if (showingBack) {
supportFragmentManager.popBackStack()
return
}
// Flip to the back.
showingBack = true
// Create and commit a new fragment transaction that adds the fragment for
// the back of the card, uses custom animations, and is part of the fragment
// manager's back stack.
supportFragmentManager.beginTransaction()
// Replace the default fragment animations with animator resources
// representing rotations when switching to the back of the card, as
// well as animator resources representing rotations when flipping
// back to the front (e.g. when the system Back button is pressed).
.setCustomAnimations(
R.animator.card_flip_right_in,
R.animator.card_flip_right_out,
R.animator.card_flip_left_in,
R.animator.card_flip_left_out
)
// Replace any fragments currently in the container view with a
// fragment representing the next page (indicated by the
// just-incremented currentPage variable).
.replace(R.id.container, CardBackFragment())
// Add this transaction to the back stack, allowing users to press
// Back to get to the front of the card.
.addToBackStack(null)
// Commit the transaction.
.commit()
}
}
Java
public class CardFlipActivity extends FragmentActivity {
...
private void flipCard() {
if (showingBack) {
getSupportFragmentManager().popBackStack();
return;
}
// Flip to the back.
showingBack = true;
// Create and commit a new fragment transaction that adds the fragment for
// the back of the card, uses custom animations, and is part of the fragment
// manager's back stack.
getSupportFragmentManager()
.beginTransaction()
// Replace the default fragment animations with animator resources
// representing rotations when switching to the back of the card, as
// well as animator resources representing rotations when flipping
// back to the front (e.g. when the system Back button is pressed).
.setCustomAnimations(
R.animator.card_flip_right_in,
R.animator.card_flip_right_out,
R.animator.card_flip_left_in,
R.animator.card_flip_left_out)
// Replace any fragments currently in the container view with a
// fragment representing the next page (indicated by the
// just-incremented currentPage variable).
.replace(R.id.container, new CardBackFragment())
// Add this transaction to the back stack, allowing users to press
// Back to get to the front of the card.
.addToBackStack(null)
// Commit the transaction.
.commit();
}
}
Membuat animasi reveal melingkar
Animasi reveal memberikan kontinuitas visual kepada pengguna saat menampilkan atau menyembunyikan sekelompok elemen UI. Metode ViewAnimationUtils.createCircularReveal() memungkinkan Anda menganimasikan lingkaran pemotongan untuk menampilkan atau menyembunyikan tampilan. Animasi ini disediakan dalam class ViewAnimationUtils, yang tersedia untuk Android 5.0 (API level 21) dan yang lebih tinggi.
Berikut adalah contoh yang menunjukkan cara menampilkan tampilan yang sebelumnya tidak terlihat:
Kotlin
// previously invisible view
val myView: View = findViewById(R.id.my_view)
// Check if the runtime version is at least Lollipop
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// get the center for the clipping circle
val cx = myView.width / 2
val cy = myView.height / 2
// get the final radius for the clipping circle
val finalRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()
// create the animator for this view (the start radius is zero)
val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0f, finalRadius)
// make the view visible and start the animation
myView.visibility = View.VISIBLE
anim.start()
} else {
// set the view to invisible without a circular reveal animation below Lollipop
myView.visibility = View.INVISIBLE
}
Java
// previously invisible view
View myView = findViewById(R.id.my_view);
// Check if the runtime version is at least Lollipop
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// get the center for the clipping circle
int cx = myView.getWidth() / 2;
int cy = myView.getHeight() / 2;
// get the final radius for the clipping circle
float finalRadius = (float) Math.hypot(cx, cy);
// create the animator for this view (the start radius is zero)
Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0f, finalRadius);
// make the view visible and start the animation
myView.setVisibility(View.VISIBLE);
anim.start();
} else {
// set the view to invisible without a circular reveal animation below Lollipop
myView.setVisibility(View.INVISIBLE);
}
Animasi ViewAnimationUtils.createCircularReveal() membutuhkan lima parameter. Parameter pertama adalah tampilan yang ingin Anda sembunyikan atau tampilkan di layar. Dua parameter berikutnya adalah koordinat x dan y untuk pusat lingkaran pemotongan. Biasanya, koordinat ini akan menjadi pusat tampilan, tetapi Anda juga dapat menggunakan titik yang disentuh pengguna sehingga animasi dimulai di tempat yang mereka pilih. Parameter keempat adalah jari-jari awal dari lingkaran pemangkas.
Dalam contoh di atas, jari-jari awal diatur ke 0 sehingga tampilan yang akan ditampilkan akan disembunyikan oleh lingkaran. Parameter terakhir adalah jari-jari akhir lingkaran. Saat akan menampilkan tampilan, pastikan jari-jari akhir lebih besar dari tampilan itu sendiri sehingga tampilan tersebut dapat ditampilkan sepenuhnya sebelum animasi selesai.
Untuk menyembunyikan tampilan yang sebelumnya terlihat:
Kotlin
// previously visible view
val myView: View = findViewById(R.id.my_view)
// Check if the runtime version is at least Lollipop
if (Build.VERSION.SDK_INT == Build.VERSION_CODES.LOLLIPOP) {
// get the center for the clipping circle
val cx = myView.width / 2
val cy = myView.height / 2
// get the initial radius for the clipping circle
val initialRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()
// create the animation (the final radius is zero)
val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0f)
// make the view invisible when the animation is done
anim.addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator) {
super.onAnimationEnd(animation)
myView.visibility = View.INVISIBLE
}
})
// start the animation
anim.start()
} else {
// set the view to visible without a circular reveal animation below Lollipop
myView.visibility = View.VISIBLE
}
Java
// previously visible view
final View myView = findViewById(R.id.my_view);
// Check if the runtime version is at least Lollipop
if (Build.VERSION.SDK_INT == Build.VERSION_CODES.LOLLIPOP) {
// get the center for the clipping circle
int cx = myView.getWidth() / 2;
int cy = myView.getHeight() / 2;
// get the initial radius for the clipping circle
float initialRadius = (float) Math.hypot(cx, cy);
// create the animation (the final radius is zero)
Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0f);
// 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();
} else {
// set the view to visible without a circular reveal animation below Lollipop
myView.setVisibility(View.VISIBLE);
}
Dalam hal ini, jari-jari awal dari lingkaran pemotongan disetel agar menjadi sebesar tampilan sehingga tampilan akan terlihat sebelum animasi dimulai. Jari-jari terakhir ditetapkan ke 0 sehingga tampilan akan disembunyikan ketika animasi selesai. Penting untuk menambahkan pemroses ke animasi agar visibilitas tampilan dapat ditetapkan ke INVISIBLE saat animasi selesai.