Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Memperlihatkan atau menyembunyikan tampilan menggunakan animasi

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.

Animasi crossfade
 

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:

  1. Buat variabel anggota untuk tampilan yang ingin di-crossfade. Anda memerlukan referensi ini nanti saat memodifikasi tampilan selama animasi berjalan.
  2. 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.
  3. Cache data properti sistem config_shortAnimTime dalam variabel anggota. Properti ini menentukan durasi "pendek" standar untuk animasi tersebut. Durasi ini ideal untuk animasi halus atau animasi yang sangat sering diputar. config_longAnimTime dan config_mediumAnimTime juga 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:

  1. Untuk tampilan yang diperjelas, tetapkan nilai alfanya ke 0 dan visibilitasnya ke VISIBLE. (Perlu diingat bahwa visibilitas awalnya ditetapkan ke GONE.) Tindakan ini membuat tampilan dapat dilihat, tetapi sepenuhnya transparan.
  2. Untuk tampilan yang diperjelas, animasikan nilai alfanya dari 0 menjadi 1. Untuk tampilan yang dipudarkan, animasikan nilai alfanya dari 1 menjadi 0.
  3. Menggunakan onAnimationEnd() dalam Animator.AnimatorListener, tetapkan visibilitas tampilan yang dipudarkan menjadi GONE. Meskipun nilai alfanya adalah 0, menetapkan visibilitas tampilan ini menjadi GONE akan 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:

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.