大家好,又见面了,我是你们的朋友全栈君。
一、效果
二、知识点
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();
}
}
复制代码
最后实现效果如下:
代码地址:CircularRevealActivity:github.com/Geekince/An…
五、参考:
安卓开发交流QQ群:410079135
转载于:https://juejin.im/post/5bdc5615e51d4543fd7c9c8d
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107217.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...