Android uses circular reveal animation to subtly hide or show View

1 Introduction

During the development process, we often encounter situations where we need to show or hide the View view. If we add animation in the process of hiding or showing the View, the interaction can be made more friendly and dynamic. This article will introduce how to use the circular reveal animation. Hide or show View subtly.

2. Introduction to circular reveal animation

The circular reveal animation is a kind of animation, which is provided by the ViewAnimationUtils class. You can call the ViewAnimationUtils.createCircularReveal() method to create a circular reveal animation. To use this animation, API level 21 and above are required. The parameters of the createCircularReveal() method are as follows :

//view：使用圆形动画的视图
//centerX：裁剪圆形的中心的X坐标，这个中心是指相对于视图本身
//centerY：裁剪圆形的中心的Y坐标，这个中心是指相对于视图本身
//startRadius：圆形的起始半径
//endRadius：圆形的结束半径
public static Animator createCircularReveal(View view,int centerX,  int centerY, float startRadius, float endRadius)
复制代码

3. Use circular reveal animation to hide or show View

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="隐藏或显示"
        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>
复制代码

3.2 Use circular reveal animation to hide View

First, calculate the X and Y coordinates of the View relative to its center point, then call the Math.hypot() method to calculate the radius of the circle, and then call ViewAnimationUtils.createCircularReveal(imageView, ivXCenter, ivYCenter, circleRadius, 0f ) Create a circular reveal animation, add a Listener for animation execution, call imageView.setVisibility(View.GONE) after the animation execution ends, and finally start the animation. The example is as follows:

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;
 }
复制代码

3.3 Use circular reveal animation to display View

Use the circular reveal animation to display the View, first calculate the X coordinate and Y coordinate of the View relative to its own center point, then calculate the radius of the circle, and then create the circular reveal animation. The starting radius at this time is 0f, and the end The radius is the radius of the circle, call imageView.setVisibility(View.VISIBLE), and finally start the animation, the example is as follows:

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;
}
复制代码

4. Summary

使用圆形揭露动画隐藏或显示View，主要是计算出View相对于自身的中心点的X坐标和Y坐标，并计算出圆形半径，在调用ViewAnimationUtils.createCircularReveal()方法创建的时候要注意起始半径和结束半径的填写，隐藏View的时候在动画执行完毕后setVisibility()方法隐藏，显示View的时候，在动画启动前调用setVisibility()方法显示。