前言
Activity的转场动画很早就有，但是太过于单调，样式也不好看，本文将给大家介绍了关于Android实现Reveal圆形Activity转场动画的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧
一、效果
二、知识点
CircularReveal动画、透明主题、转场动画（非必须）
三、方案
假设有两个Activity A和B。Reveal圆形Activity转场动画效果先从A到B，那么基本方案如下：
- 确定要显示的圆形动画中心起点位置
- 通过Intent将起点位置从Activity A传递B
- Activity B主题需要是透明的，同时先隐藏布局视图
- 在Activity A中启动Activity B，Activity A先不销毁
- Activity B启动之后开始动画，在动画启动时显布局视图
- 销毁Activity A，如果需要返回则不销毁
四、实现
4.1 初始界面Activity A
在Activity A中需要定义好主题、布局以及启动Activity B的方法。因为当不需要执行返回动画的时候，要把Activity A销毁，这时候一定是在后台销毁的，所以要把主题相关设置为透明，不然会在Activity B中显示Activity A销毁界面。
|
1
2
3
4
5
6
7
8
9
10
|
<style name="FullScreen" parent="@style/Theme.AppCompat.Light.NoActionBar"><item name="android:windowFullscreen">true</item><item name="android:windowContentOverlay">@null</item><item name="android:windowIsTranslucent">true</item><item name="android:windowBackground">@android:color/transparent</item><item name="android:backgroundDimEnabled">false</item><item name="android:windowTranslucentNavigation">true</item><item name="android:windowTranslucentStatus">true</item><item name="android:windowDrawsSystemBarBackgrounds">true</item></style> |
然后是布局设置，这一步比较简单，这里以启动界面为例，显示一张铺满全屏的图片，下面覆盖一个进度条。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="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"><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="fitXY"android:src="@mipmap/wallace" /><ProgressBarandroid:id="@+id/progressbar"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|center_horizontal"android:layout_marginBottom="180dp" /></FrameLayout> |
在Activity A中启动Activity B代码如下，使用转场动画API执行，当然也可以使用ActivityCompat.startActivity(this, intent, null); overridePendingTransition(0, 0);这种方式。在这段代码中，把Activity A中开始执行Reveal圆形动画的坐标点传递给Activity B，因为动画是在Activity B中执行的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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
2
3
4
5
|
<style name="AppTheme.Transparent" parent="AppTheme"><item name="android:windowIsTranslucent">true</item><item name="android:windowBackground">@android:color/transparent</item><item name="android:windowDrawsSystemBarBackgrounds">true</item></style> |
布局设置如下，注意根布局背景设置：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="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"><TextViewandroid:layout_width="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" /></android.support.constraint.ConstraintLayout> |
最后就是执行动画的代码，先把根据不设置为不可见，然后在跟布局测量完毕之后开始执行动画。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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() {@Overridepublic void onGlobalLayout() {revealActivity(revealX, revealY);rootLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);}});}} else {rootLayout.setVisibility(View.VISIBLE);} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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();}} |
最后实现效果如下：
五、参考：
- https://android.jlelse.eu/a-little-thing-that-matter-how-to-reveal-an-activity-with-circular-revelation-d94f9bfcae28
- https://codesnipps.simolation.com/post/android/create-circular-reveal-animation-when-starting-activitys/
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对服务器之家的支持。
原文链接：https://blog.csdn.net/wangjinyu501/article/details/83662182
