如何在ViewPager片段中应用共享元素动画？

Question

我想在ViewPager的一个Fragment中使用共享元素动画，将视图从一个Fragment转换到另一个Fragment。

在ViewPager中有3个Fragment，每个Fragment都有一个单独的TextView，并在XML文件中具有相同的transition名称。

现在，当ViewPager滑动到另一个Fragment时，我希望看到SharedElement的效果。

- Rahul Upadhyay

---

嗨Rahul，使用此链接在片段中进行共享元素转换：https://github.com/lgvalle/Material-Animations/ - Jinu

谢谢@Jinu，我也尝试过这种方法。但是它并不能满足我的需求。 我想要在FragmentPagerAdapter中使用ViewPager来动画化视图。 - Rahul Upadhyay

共享元素过渡不适用于ViewPager，但您可以像Flickr一样转换元素。https://medium.com/@BashaChris/the-android-viewpager-has-become-a-fairly-popular-component-among-android-apps-its-simple-6bca403b16d4#.nubwfyiog - Jinu

@RahulUpadhyay，你有解决这个问题的办法吗？ - Shubham

@Shubham，还没有。虽然不是使用View Pager的确切方式，但我们可以像Activity Transition一样使用Fragments来实现。请参考https://developer.android.com/training/material/animations.html。 - Rahul Upadhyay

Answer 1

我曾经遇到过同样的问题。在ViewPager页面之间，标准的共享元素转换不起作用。

因此，我编写了一个Shared Element View Pager库。它适用于由onClick()事件（例如viewPager.setCurrentItem(x)）引起的转换和由用户引起的页面滑动。动画绑定到手指移动上。

这不是一个android转换，因此可能会有一些障碍。不过你可以看看。 SharedElementPageTransformer demo

使用方法

1. 将ViewPager中的所有片段按相同顺序添加到列表中。

        ArrayList<Fragment> fragments = new ArrayList<>();
        fragments.add(hello_fragment);
        fragments.add(small_picture_fragment);

2. 在Activity.onCreate()中创建SharedElementPageTransformer。
   this指的是该活动：

        SharedElementPageTransformer transformer =
                new SharedElementPageTransformer(this,  fragments);

3. 通过传递需要连接在一起的视图ID对，添加共享转换

        transformer.addSharedTransition(R.id.smallPic_image_cat, R.id.bigPic_image_cat);

将我们的转换器设置为ViewPager的pageTransformer和onPageChangeListener。

        viewPager.setPageTransformer(false, transformer);
        viewPager.addOnPageChangeListener(transformer);

- Kirill Gerasimov

Answer 2

可能已经过了一段时间，但仍然可能有所帮助。 在两个视图页面之间共享元素转换是完全可能的，因为我已经自己实现过。

我认为你可能缺少的是转换名称必须是唯一的！ 因此，它必须在程序中设置而不是在XML中设置！这在ViewPager中非常重要，因为同一视图可能会被多次填充。

imageView.setTransitionName("unique_name");

这样过渡就知道在哪个元素上播放了;)

- didi.yeah

---

你能详细说明一下你的答案吗？ - Shubham