如何实现子Fragment中图片到父Activity Toolbar的转场动画

嗨，我来帮你搞定这个跨Fragment到Toolbar的图片转场动画！之前你在同一Activity布局内做转场成功，现在的核心难点是Fragment和Toolbar属于不同的视图层级（Fragment嵌入在Activity的布局容器里，而Toolbar是Activity的直接子View），所以需要调整转场的范围和共享元素的识别逻辑，具体步骤如下：

1. 统一共享元素的TransitionName #

首先要确保Fragment里的源图片和Toolbar里的目标View（比如你要转场到的ImageView）设置完全相同的transitionName：

• 在Fragment的布局XML中给图片添加：

  <ImageView
      android:id="@+id/fragment_source_image"
      android:transitionName="shared_product_image"
      <!-- 其他属性 -->
      />
  

• 在Activity的Toolbar布局里给目标ImageView添加：

  <ImageView
      android:id="@+id/toolbar_target_image"
      android:transitionName="shared_product_image"
      android:visibility="invisible" <!-- 初始隐藏，触发转场时显示 -->
      <!-- 其他属性 -->
      />
  

2. 触发转场的核心代码实现 #

在Fragment中处理图片点击事件时，需要获取Activity中的Toolbar目标View，并以Activity的根布局作为转场容器，这样才能覆盖Fragment和Toolbar的整个视图层级：

// 获取Fragment内的源图片
ImageView sourceImg = getView().findViewById(R.id.fragment_source_image);
// 获取Activity Toolbar里的目标图片
MainActivity parentActivity = (MainActivity) getActivity();
ImageView targetImg = parentActivity.findViewById(R.id.toolbar_target_image);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // 加载自定义转场动画（可选，也可以用系统默认转场）
    Transition imageTransition = TransitionInflater.from(requireContext())
            .inflateTransition(R.transition.image_transition);
    
    // 以Activity的根布局作为转场容器，确保覆盖Toolbar和Fragment
    ViewGroup activityRoot = parentActivity.findViewById(android.R.id.content);
    TransitionManager.beginDelayedTransition(activityRoot, imageTransition);
    
    // 调整目标View的状态，触发转场
    targetImg.setVisibility(View.VISIBLE);
    targetImg.setImageDrawable(sourceImg.getDrawable());
    // 如果需要同步大小，可以在这里设置目标View的宽高和源图片一致
}

3. 自定义转场动画的XML配置（可选） #

如果你想让转场更丝滑，可以在res/transition/image_transition.xml里定义组合转场：

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300">
    <changeBounds /> <!-- 处理位置和大小变化 -->
    <changeImageTransform /> <!-- 处理图片缩放、裁剪的平滑过渡 -->
    <fade android:fadingMode="fade_in" /> <!-- 配合显示/隐藏的淡入效果 -->
</transitionSet>

关键注意点 #

• 必须用Activity的根布局（android.R.id.content）作为转场容器，不能用Fragment的布局，否则Toolbar不在转场范围内，动画不会生效。
• 确保目标View初始状态是invisible或gone，转场时切换为visible才能触发显示动画。
• 如果你的Toolbar是在CollapsingToolbarLayout里，要注意layout_collapseMode="pin"的属性不会影响转场，但需要确保目标View在Toolbar的布局层级中是可访问的。

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