Android Reveal圆形Activity转场动画

一、效果

二、知识点

CircularReveal动画、透明主题、转场动画（非必须）

三、方案

假设有两个Activity A和B。Reveal圆形Activity转场动画效果先从A到B，那么基本方案如下：

1. 确定要显示的圆形动画中心起点位置
2. 通过Intent将起点位置从Activity A传递B
3. Activity B主题需要是透明的，同时先隐藏布局视图
4. 在Activity A中启动Activity B，Activity A先不销毁
5. Activity B启动之后开始动画，在动画启动时显布局视图
6. 销毁Activity A，如果需要返回则不销毁

四、实现

4.1 初始界面Activity A

在Activity A中需要定义好主题、布局以及启动Activity B的方法。因为当不需要执行返回动画的时候，要把Activity A销毁，这时候一定是在后台销毁的，所以要把主题相关设置为透明，不然会在Activity B中显示Activity A销毁界面。

复制代码

然后是布局设置，这一步比较简单，这里以启动界面为例，显示一张铺满全屏的图片，下面覆盖一个进度条。

"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SplashActivity">

    "match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@mipmap/wallace" />

    "@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="180dp" />


复制代码

在Activity A中启动Activity B代码如下，使用转场动画API执行，当然也可以使用ActivityCompat.startActivity(this, intent, null); overridePendingTransition(0, 0);这种方式。在这段代码中，把Activity A中开始执行Reveal圆形动画的坐标点传递给Activity B，因为动画是在Activity B中执行的。

public void presentActivity(View view) {
    ActivityOptionsCompat options = ActivityOptionsCompat.
            makeSceneTransitionAnimation(this, view, "transition");
    int revealX = (int) (view.getX() + view.getWidth() / 2);
    int revealY = (int) (view.getY() + view.getHeight() / 2);

    Intent intent = new Intent(this, MainActivity.class);
    intent.putExtra(MainActivity.EXTRA_CIRCULAR_REVEAL_X, revealX);
    intent.putExtra(MainActivity.EXTRA_CIRCULAR_REVEAL_Y, revealY);

    ActivityCompat.startActivity(this, intent, options.toBundle());

    //ActivityCompat.startActivity(this, intent, null);  overridePendingTransition(0, 0);
}
复制代码

4.2 动画界面Activity B

在Activity B中同样需要定义好主题、布局以及执行动画的方法。上面方案中也说到，Activity B需要是透明主题，而且布局文件不能为透明，随便设置一个背景即可。因为动画效果是从Activity A过度到Activity B，也就是启动Activity B一切准备就绪之后，显示其布局。同时开始执行ViewAnimationUtils.createCircularReveal动画，createCircularReveal会把根布局慢慢展开。这样就形成了上面的动画效果。

主题设置如下：

复制代码

布局设置如下，注意根布局背景设置：

"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_dark"
    tools:context=".MainActivity">

    "wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


复制代码

最后就是执行动画的代码，先把根据不设置为不可见，然后在跟布局测量完毕之后开始执行动画。

if (savedInstanceState == null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP &&
        intent.hasExtra(EXTRA_CIRCULAR_REVEAL_X) &&
        intent.hasExtra(EXTRA_CIRCULAR_REVEAL_Y)) {
    rootLayout.setVisibility(View.INVISIBLE);
    revealX = intent.getIntExtra(EXTRA_CIRCULAR_REVEAL_X, 0);
    revealY = intent.getIntExtra(EXTRA_CIRCULAR_REVEAL_Y, 0);
    ViewTreeObserver viewTreeObserver = rootLayout.getViewTreeObserver();
    if (viewTreeObserver.isAlive()) {
        viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                revealActivity(revealX, revealY);
                rootLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
        });
    }
} else {
    rootLayout.setVisibility(View.VISIBLE);
}
 
复制代码

protected void revealActivity(int x, int y) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        float finalRadius = (float) (Math.max(rootLayout.getWidth(), rootLayout.getHeight()) * 1.1);
        // create the animator for this view (the start radius is zero) 
        Animator circularReveal = ViewAnimationUtils.createCircularReveal(rootLayout, x, y, 0, finalRadius);
        circularReveal.setDuration(400);
        circularReveal.setInterpolator(new AccelerateInterpolator());
        // make the view visible and start the animation 
        rootLayout.setVisibility(View.VISIBLE);
        circularReveal.start();
    } else {
        finish();
    }
}
复制代码

最后实现效果如下：

代码地址：CircularRevealActivity：github.com/Geekince/An…

五、参考：

• android.jlelse.eu/a-little-th…
• codesnipps.simolation.com/post/androi…

---

安卓开发交流QQ群：410079135

转载于:https://juejin.im/post/5bdc5615e51d4543fd7c9c8d