Activity界面启动和结束动画（仿微信界面切换效果）

68 阅读 0 评论 45 点赞

我是靠谱客的博主正直绿茶，最近开发中收集的这篇文章主要介绍Activity界面启动和结束动画（仿微信界面切换效果），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

如何给界面设置切换动画

通常，我们可以通过**overridePendingTransition(int enterAnim, int exitAnim)**来给Activity设置界面切换效果，但是，这个方法如果要做Activity界面移出屏幕的动画，则必须要先finish掉Activity界面。所以显得的很局限，这里不作具体阐述了。

我们来看下面这个方式：
以下我仿照微信启动和结束界面动画写的效果
这里写图片描述

注：可以到这里去下载Gif图片录制软件

首先我们需要为界面设置theme.

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="界面跳转Demo"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<!-- 需要配置一个theme -->
<!-- 主界面 -->
<activity android:name=".ui.activity.MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<!-- 界面B -->
<activity android:name=".ui.activity.AActivity" />
</application>

接下来看看AppTheme的内容


<style name="AppTheme" parent="@android:style/Theme">
<!-- 设置没有标题 -->
<item name="android:windowNoTitle">true</item>
<!-- 设置activity切换动画 -->
<item name="android:windowAnimationStyle">@style/activityAnim</item>
</style>

上面的style中<item name="android:windowAnimationStyle">@style/activityAnim</item>是Activity界面切换动画的核心，我们看到又引用了@style/activityAnim。下面是起代码


<!-- animation 样式 -->
<style name="activityAnimation" parent="@android:style/Animation">
<item name="android:activityOpenEnterAnimation">@anim/right_in</item>
<item name="android:activityOpenExitAnimation">@anim/left_out</item>
<item name="android:activityCloseEnterAnimation">@animleft_in</item>
<item name="android:activityCloseExitAnimation">@anim/right_out</item>
</style>

android:activityOpenEnterAnimation:要启动的Activity的入场动画
android:activityCloseExitAnimation：要结束的Activity的出场动画
android:activityOpenExitAnimation：当前Activity结束的动画
android:activityCloseEnterAnimation：栈顶Activity的入场动画。

在这里，需要需要先对屏幕作一点讲解。

这里写图片描述
（注：图片来源于网络）
从是上图可以看到，Android屏幕，以屏幕左下角为坐标轴原点，坐标为（0,0），Activity的起点坐标也是其左下角，当一个Activity在我们屏幕中间时，即正在与用户交互的Activity的坐标为（0,0），当Activty从界面中心移动到屏幕左侧时，它的坐标向左边移动了一个屏幕的宽度，我们把一个屏幕的宽度当作100%，所以我们称Activity移动了-100%，同理，屏幕中心的Activity向右侧移动了一个屏幕的宽度时，我们称移动了100%。

根据上面的分析，我们在res/anim中定义四中动画

right_in.xml文件中定义的动画。从屏幕右侧移动到屏幕中心

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="500"
android:fromXDelta="100.0%p"
android:toXDelta="0.0" />
</set>

right_out.xml. 从品目的中心移动到屏幕的右侧

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="500"
android:fromXDelta="0.0"
android:toXDelta="100.0%p" />
</set>

left_in.xml 从屏幕左侧移动到屏幕中心（**注意：**在微信中我们看到Actiovity界面无论从左侧退出，还是从左侧进入，都是稍微的移动，而不是移动整个屏幕，所以我在这里定义了移动30%，如果想移动整个屏幕的距离，可以修改为100%）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="500"
android:fromXDelta="-30.0%p"
android:toXDelta="0.0" />
</set>

left_out.xml 从屏幕中心移动到屏幕左侧(移动距离同left_in)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="500"
android:fromXDelta="0.0"
android:toXDelta="-30.0%p" />
</set>

windowIsTranslucent属性导致Activity动画不生效的问题

当我们通过上面方式设置完动画后，如果发现设置切换动画并没有生效，此时我们检查自己Theme中是否配置了<item name="windowIsTranslucente">true</item>
比如，如果我们设置theme为：


<style name="AppTheme" parent="@android:style/Theme">
...
<item name="windowIsTranslucente">true</item>
...
</style>

这样，会导致Activity切换动画不生效。所以我们需要去掉这个属性的设置。

如果，我们在某个界面需要这个属性，可以为其单独设置，比如，启动页面为了防止黑屏，我们会设置这个属性，此时，我们可以为其单独设置一个theme, 当然这样设置了后，如果需要改变其界面切换动画，我们就可以通过复写**overridePendingTransition(int enterAnim, int exitAnim)**方法来设置。