Android实现Reveal圆形Activity转场动画的完整步骤

前言

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销毁界面。

<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>

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

<?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">

<imageview
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaletype="fitxy"
android:src="@mipmap/wallace" />

<progressbar
android: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中执行的。

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会把根布局慢慢展开。这样就形成了上面的动画效果。

主题设置如下：

<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>

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

<?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">

<textview
android: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>

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

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();
}
}

最后实现效果如下：

五、参考：

• 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/

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。