目录
1.引言
在开发过程中，我们经常会遇到需要显示或隐藏View视图的情况，如果在隐藏或显示View的过程中加上动画，能让交互更加的友好和动感，本文将介绍如何使用圆形揭露动画巧妙地隐藏或显示View。
2.圆形揭露动画简介
圆形揭露动画是动画的一种，是由ViewAnimationUtils类提供的，调用ViewAnimationUtils.createCircularReveal()方法可以创建圆形揭露动画，使用此动画要求API级别为21及以上版本，createCircularReveal()方法的参数如下：
//view：使用圆形动画的视图 //centerX：裁剪圆形的中心的X坐标，这个中心是指相对于视图本身 //centerY：裁剪圆形的中心的Y坐标，这个中心是指相对于视图本身 //startRadius：圆形的起始半径 //endRadius：圆形的结束半径 public static Animator createCircularReveal(View view,int centerX, int centerY, float startRadius, float endRadius)
3.使用圆形揭露动画隐藏或显示View
3.1 简易布局
简易布局如下：
<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 使用圆形揭露动画隐藏View
首先要计算得出View相对于自身的中心点的X坐标和Y坐标，然后调用Math.hypot()方法计算得出圆形的半径，接着调用ViewAnimationUtils.createCircularReveal(imageView, ivXCenter, ivYCenter, circleRadius, 0f)创建圆形揭露动画，增加动画执行的Listener，在动画执行结束后调用imageView.setVisibility(View.GONE)，最后启动动画，示例如下：
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 使用圆形揭露动画显示View
使用圆形揭露动画显示View，先计算得出View相对于自身的中心点的X坐标和Y坐标，然后算出圆形的半径，接着创建圆形揭露动画，此时的起始半径是0f，结束半径是圆形的半径，调用imageView.setVisibility(View.VISIBLE)，最后启动动画，示例如下：
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.总结
使用圆形揭露动画隐藏或显示View，主要是计算出View相对于自身的中心点的X坐标和Y坐标，并计算出圆形半径，在调用ViewAnimationUtils.createCircularReveal()方法创建的时候要注意起始半径和结束半径的填写，隐藏View的时候在动画执行完毕后setVisibility()方法隐藏，显示View的时候，在动画启动前调用setVisibility()方法显示。
