How Android uses circular reveal animations to cleverly hide or show View details

1. Introduction

During the development process, we often encounter situations where we need to display or hide the View. If animation is added in the process of hiding or displaying the View, the interaction can be more friendly and dynamic. This article will introduce how to use circular reveal animation to cleverly hide or display the View.

2. Introduction to the circular reveal animation

Circular reveal animation is a type of animation, provided by the ViewAnimationUtils class. Calling the() method can create a circular reveal animation. Using this animation requires the API level 21 and above. The parameters of the createCircularReveal() method are as follows:

//view: View using circular animation//centerX: Crop the X coordinate of the center of the circle, which refers to the view itself//centerY: Crop the Y coordinate of the center of the circle, which refers to the view itself//startRadius: The starting radius of the circle//endRadius: The end radius of the circlepublic static Animator createCircularReveal(View view,int centerX,  int centerY, float startRadius, float endRadius)

3. Use circular expose animation to hide or show View

3.1 Simple layout

The simple layout is as follows:

<LinearLayout xmlns:andro
    xmlns:app="/apk/res-auto"
    xmlns:tools="/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hide or show"
        android:textColor="@color/black"
        android:textSize="18sp" />

    <ImageView
        android:
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="50dp"
        android:src="@mipmap/ic_launcher"/>
</LinearLayout>

3.2 Use Circle Reveal Animation to Hide View

First, we need to calculate the X coordinate and Y coordinate of the View relative to its center point, and then call the () method to calculate the radius of the circle. Then we call (imageView, ivXCenter, ivYCenter, circleRadius, 0f) to create the circle reveal animation, add the Listener for the animation execution, call () after the animation execution is over, and finally start the animation. The example is as follows:

if (.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
     int width = ();
     int height = ();
     int ivXCenter = width/2;
     int ivYCenter = height/2;
     float circleRadius = (float) (ivXCenter, ivYCenter);
     Animator circularReveal = (imageView, ivXCenter, ivYCenter, circleRadius, 0f);
     (new AnimatorListenerAdapter() {
         @Override
         public void onAnimationEnd(Animator animation) {
             (animation);
             ();
             isVisible = false;
         }
     });
     ();
 }else {
     ();
     isVisible = false;
 }

3.3 Use circular reveal animation to display View

Use the circular expose animation to display the View. First calculate the X coordinate and Y coordinates of the View relative to its center point, then calculate the radius of the circle, and then create the circular expose animation. At this time, the starting radius is 0f and the ending radius is the radius of the circle. Call (), and finally start the animation. The example is as follows:

if (.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    int width = ();
    int height = ();
    int ivXCenter = width/2;
    int ivYCenter = height/2;
    float circleRadius = (float) (ivXCenter, ivYCenter);
    Animator circularReveal = (imageView, ivXCenter, ivYCenter, 0f, circleRadius);
    ();
    isVisible = true;
    ();
}else {
    ();
    isVisible = true;
}

4. Summary

Use circle to expose the animation to hide or display the View, mainly to calculate the X and Y coordinates of the View relative to its center point, and calculate the circular radius. When calling the() method to create, pay attention to filling in the starting radius and end radius. When hiding the View, the setVisability() method is hidden after the animation is executed. When displaying the View, call the setVisability() method before the animation is started to display.

This is the article about how Android uses circular exposure animation to cleverly hide or display View. For more related content related to Android hiding or displaying View, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!