如何实现新Fragment从底部滑入覆盖旧Fragment的切换动画？

嘿，我来帮你搞定这个Fragment切换动画的问题！要实现新Fragment从底部滑入并覆盖旧Fragment的效果，你已经找对了核心方向——用translate补间动画配合FragmentTransaction.setCustomAnimations()，不过大概率是某些细节没处理到位导致出问题，我先给你完整的实现流程，再聊聊常见的踩坑点。

第一步：准备动画XML文件 #

你提供的进入动画已经很合适了，我再补充完整的动画集合，让过渡体验更流畅：

1. 新Fragment的底部滑入动画 #

创建res/anim/fragment_slide_up.xml，这就是你给出的代码：

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

这个动画让Fragment从屏幕底部（Y轴100%位置）滑到当前显示区域，减速插值器能让动画结尾更自然不突兀。

2. 可选：旧Fragment的淡出动画（提升过渡体验） #

如果希望旧Fragment在新Fragment滑入时稍微变暗，创建res/anim/fragment_fade_out.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.7"
        android:duration="200"/>
</set>

3. 可选：返回时的反向动画 #

如果需要点击返回键时新Fragment滑回底部，创建res/anim/fragment_slide_down.xml：

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

同时补一个旧Fragment的淡入动画res/anim/fragment_fade_in.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0.7"
        android:toAlpha="1.0"
        android:duration="200"/>
</set>

第二步：代码中实现Fragment切换 #

关键是要注意动画设置的顺序，必须先调用setCustomAnimations()再执行切换操作，以下是两种常见场景的代码示例：

Kotlin 示例（覆盖旧Fragment） #

val fragmentManager = supportFragmentManager
val transaction = fragmentManager.beginTransaction()

// 顺序：新Fragment进入动画、旧Fragment退出动画、返回时进入动画、返回时退出动画
transaction.setCustomAnimations(
    R.anim.fragment_slide_up,
    R.anim.fragment_fade_out,
    R.anim.fragment_slide_down,
    R.anim.fragment_fade_in
)

// 用replace直接覆盖旧Fragment，适合不需要保留旧Fragment状态的场景
transaction.replace(R.id.fragment_container, NewFragment())
// 如果需要保留旧Fragment状态，改用add+hide：
// transaction.hide(currentFragment)
// transaction.add(R.id.fragment_container, NewFragment())

transaction.addToBackStack(null) // 加入回退栈，让返回键能触发反向动画
transaction.commit()

Java 示例（覆盖旧Fragment） #

FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();

transaction.setCustomAnimations(
    R.anim.fragment_slide_up,
    R.anim.fragment_fade_out,
    R.anim.fragment_slide_down,
    R.anim.fragment_fade_in
);

transaction.replace(R.id.fragment_container, new NewFragment());
transaction.addToBackStack(null);
transaction.commit();

常见问题排查 #

如果你已经按上面的步骤做了还是有问题，大概率是以下几个原因：

• 动画完全不生效：检查setCustomAnimations()是否在replace()/add()之前调用；确认动画文件放在res/anim目录下（不是res/animator，后者是属性动画的目录）；确保Fragment容器是FrameLayout这类支持覆盖的布局（LinearLayout会让Fragment挤在一起）。
• 新Fragment没覆盖旧Fragment：确认用了replace()或者add()之后hide()了旧Fragment，否则两个Fragment会同时显示在容器里。
• 返回时没有反向动画：一定要调用addToBackStack(null)把Fragment加入回退栈，并且setCustomAnimations()传入了后两个反向动画参数。

内容的提问来源于stack exchange，提问作者Magnus