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	要執行動畫效果的View
centerX	圓心x坐標
centerY	圓心y坐標
startRadius	開始時的圓半徑
endRadius	結束時的圓半徑

三、實現

從上圖可以看出，需要揭露展現的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 动画让页面跳转更炫酷的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。