1. The introduction

In the development process, we often encounter situations in which we need to show or hide the View. If adding animation to the process of hiding or showing the View can make the interaction more friendly and dynamic, this article will show you how to use circular reveal animation to skillfully hide or show the View.

2. Circular expose animation introduction

Circular reveal a kind of animation is the animation, is provided by ViewAnimationUtils class, call ViewAnimationUtils. CreateCircularReveal () method can create a circular uncover animation, use this animation for API level for 21 and above version, The createCircularReveal() method has the following parameters:

//view: view with circular animation
//centerX: Trim the x-coordinate of the center of the circle relative to the view itself
//centerY: Crop the Y coordinate of the center of the circle, which is relative to the view itself
//startRadius: the starting radius of the circle
//endRadius: endRadius of the circle
public static Animator createCircularReveal(View view,int centerX,  int centerY, float startRadius, float endRadius)
Copy the code

3. Hide or show the View using a circular reveal animation

3.1 Simple Layout

The simple layout is as follows:

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

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

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

</LinearLayout>
Copy the code

3.2 Hide the View with a circular reveal animation

You calculate the X and Y coordinates of the View relative to its center point, and then call math.hypot () to calculate the radius of the circle. Then call ViewAnimationUtils. CreateCircularReveal (imageView, ivXCenter ivYCenter, circleRadius, 0 f) create a circle to expose animation, add animation to perform the Listener, Call imageView.setvisibility (view.gone) after the animation has finished, and finally start the animation as shown in the following example:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
     int width = imageView.getWidth();
     int height = imageView.getHeight();
     int ivXCenter = width/2;
     int ivYCenter = height/2;
     float circleRadius = (float) Math.hypot(ivXCenter, ivYCenter);
     Animator circularReveal = ViewAnimationUtils.createCircularReveal(imageView, ivXCenter, ivYCenter, circleRadius, 0f);
     circularReveal.addListener(new AnimatorListenerAdapter() {
         @Override
         public void onAnimationEnd(Animator animation) {
             super.onAnimationEnd(animation);
             imageView.setVisibility(View.GONE);
             isVisible = false; }}); circularReveal.start(); }else {
     imageView.setVisibility(View.GONE);
     isVisible = false;
 }
Copy the code

3.3 Display View with circular expose animation

First calculate the X and Y coordinates of the View relative to its center point, and then calculate the radius of the circle. 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 imageview.setvisibility (view.visible) and finally start the animation as shown in the following example:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    int width = imageView.getWidth();
    int height = imageView.getHeight();
    int ivXCenter = width/2;
    int ivYCenter = height/2;
    float circleRadius = (float) Math.hypot(ivXCenter, ivYCenter);
    Animator circularReveal = ViewAnimationUtils.createCircularReveal(imageView, ivXCenter, ivYCenter, 0f, circleRadius);
    imageView.setVisibility(View.VISIBLE);
    isVisible = true;
    circularReveal.start();
}else {
    imageView.setVisibility(View.VISIBLE);
    isVisible = true;
}
Copy the code

4. To summarize

Hide or show the View with circular reveal animation, mainly to calculate the X and Y coordinates of the View relative to its center point, and calculate the radius of the circle, In the call ViewAnimationUtils. CreateCircularReveal () method to create must pay attention to when radius of start and end range of fill in, hidden when the View in the animation after the execution setVisibility () method to hide, show the View of time, Call the setVisibility() method to display before the animation starts.