|
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.使用圆形揭露动画隐藏或显示View3.1 简易布局简易布局如下: 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()方法显示。
|
|