想让页面跳转更炫酷？快用Circular Reveal动画！

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能否大于21        if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.LOLLIPOP) {            if (isShow) {                animView.visibility = View.VISIBLE                if (mListener != null) mListener!!.onShowAnimationEnd()            } else {                animView.visibility = View.GONE                if (mListener != null) mListener!!.onHideAnimationEnd()            }            return        }        /**         * 计算 triggerView(即搜索按钮) 的中心位置         */        val tvLocation = IntArray(2)        triggerView.getLocationInWindow(tvLocation)        val tvX = tvLocation[0] + triggerView.width / 2        val tvY = tvLocation[1] + triggerView.height / 2        /**         * 计算 animView(即根布局) 的中心位置         */        val avLocation = IntArray(2)        animView.getLocationInWindow(avLocation)        val avX = avLocation[0] + animView.width / 2        val 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: Float        val endRadius: Float        //根据展现或者隐藏设置起始与结束的半径        if (isShow) {            startRadius = 0f            endRadius = maxRadius        } else {            startRadius = maxRadius            endRadius = 0f        }        val anim = ViewAnimationUtils.createCircularReveal(animView, tvX, tvY, startRadius, endRadius)        animView.visibility = View.VISIBLE        anim.duration = DURATION        anim.interpolator = DecelerateInterpolator()        //监听动画结束，进行回调        anim.addListener(object : AnimatorListenerAdapter() {            override fun onAnimationEnd(animation: Animator) {                super.onAnimationEnd(animation)                if (isShow) {                    animView.visibility = View.VISIBLE                    if (mListener != null) mListener!!.onShowAnimationEnd()                } else {                    animView.visibility = View.GONE                    if (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动画

自己是从事了七年开发的Android工程师，不少人私下问我，2019年Android进阶该怎样学，方法有没有？

没错，年初我花了一个多月的时间整理出来的学习资料，希望能帮助那些想进阶提升Android开发，却又不知道怎样进阶学习的朋友。【包括高级UI、性能优化、架构师课程、NDK、Kotlin、混合式开发（ReactNative+Weex）、Flutter等架构技术资料】，希望能帮助到您面试前的复习且找到一个好的工作，也节省大家在网上搜索资料的时间来学习。

资料获取方式：加入Android架构交流QQ群聊：513088520 ，进群即领取资料！！！

点击链接加入群聊【Android移动架构总群】：加入群聊

资料大全