0%

Android页面跳转时前一个页面闪现问题

前言

公司项目:页面跳转 - 转场动画为默认动画
情况介绍:从A页面跳转B页面后,B页面做了网络请求,请求过程会弹出LoadingDialog,请求结束关闭LoadingDialog并根据请求结果刷新当前界面。
异常情况:A页面跳转B页面,B页面网络请求成功时,会频繁偶现A页面闪现的情况。

Bug分析与处理

Bug分析:应该是A页面跳转B页面过程中,动画未完成时,A页面在任务栈顶部。此时B页面网络请求加载完毕重新渲染页面(可以理解为B页面强行转入任务栈顶部),导致转场动画效果中断,A页面重新展示,并B页面紧跟着移动到任务栈顶部。
解决方案:使用自定义转场动画替代默认转场动画。
理由:自定义转场动画为B页面动画,非A页面动画,此时B页面在任务栈顶部,B页面的数据渲染不影响B页面自身的动画。

转场动画代码如下:src\res\anim

A跳B时:
B进场动画:on_activity_open_enter.xml

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300">
<!--从屏幕右边往屏幕移动 直至覆盖整个屏幕-->
<translate
android:fromXDelta="100%p"
android:toXDelta="0%p" />
</set>

A退场动画:on_activity_open_exit.xml

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300">
<!--界面从右往左边移动,直至消失在屏幕的左边-->
<translate
android:fromXDelta="0%p"
android:toXDelta="-100%p" />
</set>

B回到A时:

A进场动画:on_activity_close_enter.xml

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300">
<!--从屏幕的左边往屏幕移动,直至重新遮住整个屏幕-->
<translate
android:fromXDelta="-100%p"
android:toXDelta="0%p" />
</set>

B退场动画:on_activity_close_exit.xml

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300">
<!--从屏幕往屏幕右边移动,直至消失在界面右边-->
<translate
android:fromXDelta="0%p"
android:toXDelta="100%p" />
</set>

src\res\values\styles.xml中调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--配置进场出场动画-->
<style name="Animation" parent="@android:style/Animation">
<item name="android:activityOpenEnterAnimation">@anim/on_activity_open_enter</item>
<item name="android:activityOpenExitAnimation">@anim/on_activity_open_exit</item>
<item name="android:activityCloseEnterAnimation">@anim/on_activity_close_enter</item>
<item name="android:activityCloseExitAnimation">@anim/on_activity_close_exit</item>
<item name="android:taskOpenEnterAnimation">@anim/on_activity_open_enter</item>
<item name="android:taskOpenExitAnimation">@anim/on_activity_open_exit</item>
<item name="android:taskCloseEnterAnimation">@anim/on_activity_close_enter</item>
<item name="android:taskCloseExitAnimation">@anim/on_activity_close_exit</item>
<item name="android:taskToFrontEnterAnimation">@null</item>
<item name="android:taskToFrontExitAnimation">@null</item>
<item name="android:taskToBackEnterAnimation">@null</item>
<item name="android:taskToBackExitAnimation">@null</item>
</style>

<!--将动画配置到theme中-->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowAnimationStyle">@style/Animation</item>
</style>

AndroidManifest.xml中引用

1
2
3
4
5
<application
...
android:theme="@style/AppBaseTheme">
...
</application>
------------本文结束感谢您的阅读------------

Thank you for your accept!