Android 5.0中引入了很多炫酷的动画效果，Circular Reveal便是其中一种。使用起来很简单，但效果却是意想不到的炫酷，让你的app更有逼格。
一、效果
废话不说，下面的gif图中使用Circular Reveal动画实现跳转到搜索页的效果。gif图压缩宽高比失真了，不过效果还在。源码在最下面，可以下载体验下。
二、Circular Reveal介绍
当您显示或隐藏一组 UI 元素时，揭露动画可为用户提供视觉连续性。
ViewAnimationUtils.createCircularReveal()方法让您能够为裁剪区域添加动画以揭露或隐藏视图。
* @param view The View will be clipped to the animating circle.* @param centerX The x coordinate of the center of the animating circle, relative to*<code>view</code>.* @param centerY The y coordinate of the center of the animating circle, relative to*<code>view</code>.* @param startRadius The starting radius of the animating circle.* @param endRadius The ending radius of the animating circle.*/public static Animator createCircularReveal(View view,int centerX, int centerY, float startRadius, float endRadius) {return new RevealAnimator(view, centerX, centerY, startRadius, endRadius);}复制代码
ViewAnimationUtils.createCircularReveal()方法所执行的效果，就是将一个View裁剪成圆，然后从圆心逐渐揭露展现视图。
三、实现
从上图可以看出，需要揭露展现的View是整个视图的根布局。开始的位置就是?图标的x，y坐标。开始的半径为0，结束的半径是上面那条斜边的长度。知道了这些参数，那么实现就简单了。
以下代码使用Kotlin实现，不过和java区别不大，不影响看懂原理。
1.动画参数
@SuppressLint("NewApi")private fun actionOtherVisible(isShow: Boolean, triggerView: View, animView: View) {//判断API是否大于21if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.LOLLIPOP) {if (isShow) {animView.visibility = View.VISIBLEif (mListener != null) mListener!!.onShowAnimationEnd()} else {animView.visibility = View.GONEif (mListener != null) mListener!!.onHideAnimationEnd()}return}/*** 计算 triggerView(即搜索按钮) 的中心位置*/val tvLocation = IntArray(2)triggerView.getLocationInWindow(tvLocation)val tvX = tvLocation[0] + triggerView.width / 2val tvY = tvLocation[1] + triggerView.height / 2/*** 计算 animView(即根布局) 的中心位置*/val avLocation = IntArray(2)animView.getLocationInWindow(avLocation)val avX = avLocation[0] + animView.width / 2val avY = avLocation[1] + animView.height / 2//计算宽高val rippleW = if (tvX < avX) animView.width - tvX else tvX - avLocation[0]val rippleH = if (tvY < avY) animView.height - tvY else tvY - avLocation[1]//勾股定理求斜边val maxRadius = Math.sqrt((rippleW * rippleW + rippleH * rippleH).toDouble()).toFloat()val startRadius: Floatval endRadius: Float//根据展示或隐藏设置起始与结束的半径if (isShow) {startRadius = 0fendRadius = maxRadius} else {startRadius = maxRadiusendRadius = 0f}val anim = ViewAnimationUtils.createCircularReveal(animView, tvX, tvY, startRadius, endRadius)animView.visibility = View.VISIBLEanim.duration = DURATIONanim.interpolator = DecelerateInterpolator()//监听动画结束，进行回调anim.addListener(object : AnimatorListenerAdapter() {override fun onAnimationEnd(animation: Animator) {super.onAnimationEnd(animation)if (isShow) {animView.visibility = View.VISIBLEif (mListener != null) mListener!!.onShowAnimationEnd()} else {animView.visibility = View.GONEif (mListener != null) mListener!!.onHideAnimationEnd()}}})anim.start()}复制代码
上述代码中注释清楚解析了动画参数的获取和执行过程。
2.动画调用
fun show(triggerView: View, showView: View) {actionOtherVisible(true, triggerView, showView)}fun hide(triggerView: View, hideView: View) {actionOtherVisible(false, triggerView, hideView)}复制代码
actionOtherVisible()方法根据传入true/false来确定是执行展示或隐藏动画。
3.动画调用时机
在SearchFragment中，监听第一帧的绘制，开启动画。其中mRootView就是根布局View。
override fun onPreDraw(): Boolean {iv_search_search.viewTreeObserver.removeOnPreDrawListener(this);mCircularRevealAnim.show(iv_search_search, mRootView);return true;}复制代码
动画结束调用时机：①在点击搜索，跳转到搜索结果界面。②物理回退键回退。③点击回退按钮
再以上三个地方都可以调用hide()方法，实现隐藏动画。
4.监听回调
在上面配置动画参数的过程中，对动画结束进行了监听回调。调用了AnimListener接口的onHideAnimationEnd()和onShowAnimationEnd()方法，来实现回调。所有在SearchFragment中实现该接口，来监听回调。
override fun onHideAnimationEnd() {et_search_keyword.setText("");dismiss();}override fun onShowAnimationEnd() {if (isVisible) {KeyBoardUtils.openKeyboard(activity, et_search_keyword);}}复制代码
监听到隐藏动画结束的时候，调用dismiss()方法关闭该DialogFragment。监听展现动画结束的时候，开启输入法框。
就是这么简单，通过以上方式就可以实现如此炫酷的效果。
Github地址：搜索页Circular Reveal动画
如果觉得《使用 Circular Reveal 动画让页面跳转更炫酷》对你有帮助，请点赞、收藏，并留下你的观点哦！
