RecyclerView与ViewPager间共享元素过渡动画异常问题求助

我之前也碰到过类似的共享元素过渡坑，结合你提供的代码，咱们一步步拆解这两个问题：

问题1：点击RecyclerView时无过渡+短暂闪烁 #

核心原因：过渡名称设置时机错误+重复过渡名称 #

从你的ViewHolder代码来看，你是在点击事件触发时才给ImageView设置过渡名称，这时候系统已经来不及捕获共享元素的初始状态，直接导致过渡失效；另外所有RecyclerView项的ImageView都用了同一个过渡名称first_page_transition，系统无法区分哪个是真正的共享元素，这也是过渡失效的关键！

修复步骤： #

1. 在视图绑定阶段设置唯一过渡名称
   给每个RecyclerView项的ImageView设置独一无二的过渡名称（比如拼接position后缀），并在绑定数据时就完成设置，而非点击时：

   // 在ViewHolder的bind方法中（假设你有数据绑定逻辑）
   @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
   public void bind(int position) {
       // 生成唯一过渡名称
       String uniqueTransitionName = context.getString(R.string.first_page_transition) + "_" + position;
       iv.setTransitionName(uniqueTransitionName);
   }
   

2. 修改点击事件的启动逻辑
   点击时直接使用已设置好的过渡名称，同时把名称传递给详情页：

   @Override
   public void onClick(View view) {
       int position = getAdapterPosition();
       Intent intent = new Intent(context, DetailsActivity.class);
       intent.putExtra("slider_image", images[position]);
       // 传递唯一过渡名称
       intent.putExtra("transition_name", iv.getTransitionName());
       
       ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(
               (MainActivity) context, 
               iv, 
               iv.getTransitionName()
       );
       context.startActivity(intent, compat.toBundle());
   }
   

3. 临时禁用RecyclerView Item动画（解决闪烁）
   如果点击闪烁是RecyclerView默认Item动画导致的，可以临时禁用：

   ((RecyclerView) view.getParent()).setItemAnimator(null);
   

问题2：返回时卡顿，CardView背景先弹出再显示图片 #

核心原因：详情页ImageView未在过渡开始前完成绘制 #

你的ViewPager适配器每次都inflate新视图，且没有等待ImageView加载完成就启动过渡，导致过渡期间CardView背景先显示，图片后续才渲染完成，产生卡顿感。

修复步骤： #

1. 在详情页延迟过渡，直到ImageView绘制完成
   在DetailsActivity的onCreate中，先延迟过渡启动，等共享元素ImageView完全绘制后再触发：

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_details);
       
       ViewPager viewPager = findViewById(R.id.your_viewpager_id);
       YourPagerAdapter adapter = new YourPagerAdapter(this);
       viewPager.setAdapter(adapter);
       
       // 获取传递的过渡名称和目标图片资源
       String transitionName = getIntent().getStringExtra("transition_name");
       int targetImageRes = getIntent().getIntExtra("slider_image", 0);
       
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
           // 先延迟过渡
           postponeEnterTransition();
           
           // 等待ViewPager加载完成后处理ImageView
           viewPager.post(() -> {
               View currentView = viewPager.getChildAt(0);
               ImageView detailIv = currentView.findViewById(R.id.detail_viewpager_image);
               detailIv.setTransitionName(transitionName);
               detailIv.setImageResource(targetImageRes);
               
               // 监听ImageView绘制完成，再启动过渡
               detailIv.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
                   @Override
                   public boolean onPreDraw() {
                       detailIv.getViewTreeObserver().removeOnPreDrawListener(this);
                       supportStartPostponedEnterTransition();
                       return true;
                   }
               });
           });
       }
   }
   

2. 优化ViewPager适配器的视图复用
   每次inflate新视图会增加开销，建议复用已有视图：

   @Override
   public Object instantiateItem(@NonNull ViewGroup container, int position) {
       ImageView imageView;
       View view = container.findViewWithTag("page_" + position);
       if (view == null) {
           view = layoutInflater.inflate(R.layout.custom_dots_layout, container, false);
           view.setTag("page_" + position);
           imageView = view.findViewById(R.id.detail_viewpager_image);
       } else {
           imageView = view.findViewById(R.id.detail_viewpager_image);
       }
       
       imageView.setImageResource(getImage());
       container.addView(view);
       return view;
   }
   

3. 用系统推荐方法触发返回过渡
   在DetailsActivity的返回逻辑中，使用finishAfterTransition()替代普通finish：

   @Override
   public void onBackPressed() {
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
           finishAfterTransition();
       } else {
           super.onBackPressed();
       }
   }
   

额外优化项 #

• 给styles.xml的过渡添加时长，优化动画流畅度：

  <item name="android:windowSharedElementEnterTransition" tools:targetApi="lollipop">
      <transitionSet>
          <move android:duration="300"/>
      </transitionSet>
  </item>
  <item name="android:windowSharedElementExitTransition" tools:targetApi="lollipop">
      <transitionSet>
          <move android:duration="300"/>
      </transitionSet>
  </item>
  

• 检查RecyclerView和详情页布局是否设置了clipChildren="false"或clipToPadding="false"，这些属性可能影响过渡动画的显示区域。

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