Android Navigation组件实战：5分钟搞定Fragment跳转动画（附完整代码）

原创

于 2026-02-27 10:34:10 发布 · 170 阅读

Android Navigation组件动画实战：打造丝滑Fragment转场体验

如果你还在为Fragment之间生硬的切换而烦恼，每次跳转都像在翻看一本没有过渡效果的PPT，那么今天的内容绝对能让你眼前一亮。Navigation组件作为Android Jetpack中负责导航的核心库，不仅简化了页面跳转的逻辑管理，更提供了强大的动画配置能力，让应用界面切换变得流畅自然。

我在实际项目中遇到过不少开发者，他们虽然用上了Navigation，但转场动画要么不生效，要么效果生硬，甚至出现奇怪的闪烁问题。经过多次调试和踩坑，我总结出了一套完整的动画配置方案，从基础渐入到复杂组合动画，都能轻松应对。这篇文章将带你深入Navigation动画的每一个细节，并提供可直接复用的代码模板。

1. Navigation动画基础：理解四种动画类型

在开始编写动画之前，我们需要先搞清楚Navigation动画的四种类型。很多开发者配置动画后效果不理想，往往是因为没有理解这四种动画的具体作用时机。

enterAnim：新页面进入时的动画。当用户从页面A导航到页面B时，页面B会执行这个动画。

exitAnim：旧页面退出时的动画。同样在A→B的导航过程中，页面A会执行这个动画。

popEnterAnim：当用户按下返回键或调用popBackStack()时，重新显示的页面（即返回后的目标页面）的进入动画。

popExitAnim：返回操作中，当前页面退出时的动画。

这四种动画的配合使用，才能实现完整的双向转场效果。只配置enterAnim和exitAnim，返回时就会显得生硬。

1.1 动画资源文件创建规范

在Android Studio中创建动画资源文件，我推荐一个高效的工作流：

# 在项目资源目录中创建anim文件夹（如果不存在）
res/
├── anim/
│   ├── slide_in_right.xml
│   ├── slide_out_left.xml
│   ├── slide_in_left.xml
│   └── slide_out_right.xml

创建这些文件时，我习惯使用Android Studio的快捷方式：右键点击res目录 → New → Android Resource File，然后在Resource type中选择Animation。

注意：动画文件的命名要有明确含义，比如slide_in_right表示从右侧滑入，这样在后续维护时能快速理解每个动画的作用。

1.2 基础滑动动画实现

让我们从最常用的左右滑动动画开始。这种动画在移动应用中最为常见，符合用户的自然操作习惯。

slide_in_right.xml（从右侧滑入）：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:interpolator="@android:anim/decelerate_interpolator">
    
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0%"
        android:fromYDelta="0"
        android:toYDelta="0" />
        
    <alpha
        android:fromAlpha="0.7"
        android:toAlpha="1.0" />
</set>

slide_out_left.xml（向左滑出）：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="250"
    android:interpolator="@android:anim/accelerate_interpolator">
    
    <translate
        android:fromXDelta="0"
        android:toXDelta="-100%p"
        android:fromYDelta="0"
        android:toYDelta="0" />
        
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.5" />
</set>

这里我做了几个优化：首先，动画时长设置为300ms和250ms，这个时长在移动设备上既不会太快让用户感觉突兀，也不会太慢影响操作流畅度。其次，我添加了透明度变化，让过渡更加柔和。最后，使用了系统预置的插值器，decelerate_interpolator让进入动画先快后慢，accelerate_interpolator让退出动画先慢后快，更符合物理运动规律。

对应的返回动画也需要配对创建：

slide_in_left.xml（从左侧滑入，用于返回）：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:interpolator="@android:anim/decelerate_interpolator">
    
    <translate
        android:fromXDelta="-100%p"
        android:toXDelta="0%"
        android:fromYDelta="0"
        android:toYDelta="0" />
</set>

slide_out_right.xml（向右滑出，用于返回）：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="250"
    android:interpolator="@android:anim/accelerate_interpolator">
    
    <translate
        android:fromXDelta="0"
        android:toXDelta="100%p"
        android:fromYDelta="0"
        android:toYDelta="0" />
</set>

2. 在Navigation图中配置动画

有了动画资源文件，接下来需要在Navigation图中进行配置。这里有个细节需要注意：动画配置是在<action>标签中完成的，而不是在<fragment>标签中。

2.1 基础配置示例

下面是一个完整的导航图配置示例，展示了如何在两个Fragment之间配置滑动动画：

<?xml version="1.0" encoding="utf-8"?>
<navigation 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/main_nav_graph"
    app:startDestination="@id/homeFragment">
    
    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.app.ui.home.HomeFragment"
        android:label="Home"
        tools:layout="@layout/fragment_home">
        
        <action
            android:id="@+id/action_home_to_detail"
            app:destination="@id/detailFragment"
            app:enterAnim="@anim/slide_in_right"
            app:exitAnim="@anim/slide_out_left"
            app:popEnterAnim="@anim/slide_in_left"
            app:popExitAnim="@anim/slide_out_right" />
            
    </fragment>
    
    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.app.ui.detail.DetailFragment"
        android:label="Detail"
        tools:layout="@layout/fragment_detail">
        
        <!-- 可以在这里配置从detail返回home的动画，
             但通常

标签