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  # 页面跳转动画  # Android Studio实现注册页面跳转登录页面的创建  # Android实现页面跳转的全过程记录  # Android使用Intent显示实现页面跳转  # Android使用Intent隐式实现页面跳转  # Android Intent实现页面跳转的两种方法  # Android Intent实现页面跳转的方法示例  # Android 实现页面跳转  # Android编程中Intent实现页面跳转功能详解  # Android Activity中使用Intent实现页面跳转与参数传递的方法  # Android实现页面跳转  # 回调  # 跳转到  # 勾股定理  # 还在  # 却是  # 让您  # 很简单  # 更有  # 可以看出  # 在上面  # 搜索结果  # 用户提供  # 那条  # 来实现  # 可为  # 这么简单  # 当您  # 可以下载  # 结束时  # 图中 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 深圳网站制作培训,深圳哪些招聘网站比较好？  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  如何在云指建站中生成FTP站点？  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  Laravel如何实现用户密码重置功能？（完整流程代码）  如何选择可靠的免备案建站服务器？  详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南  JS中对数组元素进行增删改移的方法总结  香港服务器租用费用高吗？如何避免常见误区？  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  如何解决hover在ie6中的兼容性问题  实例解析angularjs的filter过滤器  HTML5建模怎么导出为FBX格式_FBX格式兼容性及导出步骤【指南】  Laravel如何配置和使用缓存？（Redis代码示例）  Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  高端网站建设与定制开发一站式解决方案 中企动力  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  Laravel API资源类怎么用_Laravel API Resource数据转换  如何用5美元大硬盘VPS安全高效搭建个人网站？  Laravel Session怎么存储_Laravel Session驱动配置详解  Android GridView 滑动条设置一直显示状态(推荐)  如何快速搭建虚拟主机网站？新手必看指南  laravel怎么实现图片的压缩和裁剪_laravel图片压缩与裁剪方法  BootStrap整体框架之基础布局组件  Laravel如何使用集合（Collections）进行数据处理_Laravel Collection常用方法与技巧  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  如何登录建站主机？访问步骤全解析  简单实现jsp分页  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程  Laravel如何实现本地化和多语言支持？（i18n教程）  Laravel怎么实现API接口鉴权_Laravel Sanctum令牌生成与请求验证【教程】  php 三元运算符实例详细介绍  C++时间戳转换成日期时间的步骤和示例代码  装修招标网站设计制作流程,装修招标流程？  微信小程序 配置文件详细介绍  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  Python文件操作最佳实践_稳定性说明【指导】  详解Huffman编码算法之Java实现  魔毅自助建站系统：模板定制与SEO优化一键生成指南  Laravel如何配置Horizon来管理队列？（安装和使用）  如何用PHP工具快速搭建高效网站？  Laravel怎么使用Intervention Image库处理图片上传和缩放  Android 常见的图片加载框架详细介绍  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  详解Android图表 MPAndroidChart折线图  Laravel Fortify是什么，和Jetstream有什么关系  公司门户网站制作流程,华为官网怎么做？