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 bertahap memudarkan satu View atau ViewGroup dan secara bersamaan memperjelas yang lain. Animasi ini berguna untuk situasi ketika Anda ingin mengganti konten atau tampilan di aplikasi. Animasi crossfade yang ditampilkan di sini menggunakan ViewPropertyAnimator, yang tersedia untuk Android 3.1 (API level 12) dan 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.
  2. Untuk tampilan yang akan diperjelas, tetapkan visibilitasnya ke GONE. Ini mencegah tampilan tersebut mengambil ruang tata letak dan menghilangkannya dari penghitungan tata letak sehingga mempercepat pemrosesan.
  3. Cache properti sistem config_shortAnimTime dalam variabel anggota. Properti ini menentukan durasi "pendek" standar untuk animasi tersebut. Durasi ini sangat ideal untuk animasi halus atau animasi yang terjadi sangat sering. config_longAnimTime dan config_mediumAnimTime juga tersedia jika Anda ingin menggunakannya.

Berikut adalah contoh menggunakan 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, lakukan crossfade dengan cara berikut:

  1. Untuk tampilan yang diperjelas, setel nilai alfa ke 0 dan visibilitas ke VISIBLE. (Ingat bahwa visibilitas tersebut awalnya disetel ke GONE). Ini membuat tampilan terlihat tetapi sepenuhnya transparan.
  2. Untuk tampilan yang diperjelas, animasikan nilai alfa dari 0 hingga 1. Untuk tampilan yang dipudarkan, setel nilai alfa dari 1 hingga 0.
  3. Dengan onAnimationEnd() dalam Animator.AnimatorListener, setel visibilitas tampilan yang memudar ke GONE. Meskipun nilai alfa-nya 0, menyetel visibilitas tampilan tersebut ke GONE akan mencegah tampilan mengambil ruang tata letak dan menghilangkannya dari penghitungan tata letak sehingga mempercepat pemrosesan.

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 antara tampilan konten dengan menampilkan animasi menyerupai kartu yang sedang dibalik. Animasi card flip yang ditampilkan di sini menggunakan FragmentTransaction, yang tersedia untuk Android 3.0 (API level 11) dan yang lebih tinggi.

Seperti inilah tampilan animasi card flip:

Animasi card flip
 

Membuat objek Animator

Untuk membuat animasi card flip, Anda memerlukan total empat animator. Dua animator untuk animasi bagian depan kartu yang keluar ke kiri, dan masuk dari kiri. Anda juga memerlukan dua animator untuk animasi bagian belakang kartu yang masuk dari kanan, dan keluar 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 tersebut menunjukkan tata letak yang Anda buat sebelumnya dalam metode onCreateView() dari 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, pertama-tama buat tata letak untuk aktivitas Anda. Contoh berikut membuat FrameLayout yang dapat Anda tambahkan fragmen saat 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" />
    

Di kode aktivitas, setel 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 pengguna kontinuitas visual saat menampilkan atau menyembunyikan sekelompok elemen UI. Metode ViewAnimationUtils.createCircularReveal() memungkinkan Anda untuk menganimasikan lingkaran pemotongan dalam menampilkan atau menyembunyikan tampilan. Animasi ini disediakan di 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() memerlukan 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 disetel ke 0 sehingga tampilan akan disembunyikan ketika animasi selesai. Penting untuk menambahkan pemroses ke animasi sehingga visibilitas tampilan dapat disetel ke INVISIBLE saat animasi selesai.