片段之间动画的共享元素 [英] Shared elements animating between fragments

问题描述

我正在尝试将 RecyclerView 中选定项目的 2 个简单视图动画化为新片段.我看过很多将共享元素从一个 Activity 动画化到另一个 Activity 的示例，但很少有将共享元素从一个 Fragment 动画化到同一 Activity 中的另一个 Fragment 的示例.它几乎有效.

I'm trying to animate 2 simple Views from a selected item in a RecyclerView to a new fragment. I've looked at a lot of examples of animating shared elements from one Activity to another Activity, but very few examples of animating a shared element from one Fragment to another Fragment within the same Activity. It almost works.

这是我的结构.

活动

-- 带有 RecyclerView 的全屏 Fragment1

-- Full screen Fragment1 with RecyclerView

-- 带详细信息的全屏 Fragment2

-- Full screen Fragment2 with details

当用户在 Fragment1 的 RecyclerView 中选择一个项目时，我将 Fragment1 替换为 Fragment2，该 Fragment2 具有一个视图，其中包含不同位置和大小的共享元素.

When the user selects an item in the RecyclerView in Fragment1, I replace Fragment1 with Fragment2 that has a View with the shared elements in it in different positions and sizes.

有一个小技巧可以让它工作，你必须确保你的transitionName对于列表中的每个项目都是唯一的，当然transitionName必须与Fragment2中元素的transitionName匹配才能播放动画.我有这部分工作，当我选择一个项目时，2 个共享视图会动画，只是在 2 个活动之间执行时与您期望的不完全相同.

There's a bit of a trick to get it to work, you have to make sure your transitionName is unique for each item in your list, and of course that transitionName must match the transitionName of the element in Fragment2 for the animation to play. I have this part working, when I select an item, the 2 shared Views do animate, just not exactly how you would expect when doing it between 2 Activities.

如果我选择靠近屏幕底部的一个项目，它会为 Fragment2 绘制视图并为 2 个共享视图设置动画，就好像它们在屏幕顶部的项目中一样.难以解释.这是一些图片

If I select an item near the bottom of the screen, it draws the View for Fragment2 and animates the 2 shared Views as if they were in the item at the top of the screen. Hard to explain. Here are some pictures

片段1

片段2

在两个片段中我都设置了以下内容

In both fragments I'm setting the following

        setSharedElementEnterTransition(new ChangeBounds());
        setSharedElementReturnTransition(new ChangeBounds());
        setAllowEnterTransitionOverlap(true);
        setAllowReturnTransitionOverlap(true);

也在他们的父 Activity 中的 onCreate() 中设置

Also in their parent Activity in onCreate() I've set

        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

知道为什么我的共享元素动画从屏幕顶部开始，即使它们从屏幕底部的选定项目开始?

Any idea why my shared element animations are starting at the top of my screen even when the they were starting in the selected item at the bottom of my screen?

推荐答案

终于解决了这个问题！事实证明，因为我在 2 个片段之间共享的视图是第二个片段中另一个视图 (RelativeLayout) 的子视图，所以您需要将 ChangeTransform 过渡添加到 TransitionSet.显然 ChangeTransform 告诉系统在动画到第二个片段中的新位置之前记住第一个片段中的视图原始位置.这是我更新的 transitionSet.我还将稍微清理一下我的测试项目代码，并对 bitbucket 进行最后的推动，以防它对我之后的其他人有所帮助.感谢亚历克斯的所有帮助，感谢@George-mount 回答了类似的问题，为我提供了这个解决方案的提示.

Finally solved this problem! As it turns out because the view I'm sharing between 2 fragments is a child of another view (RelativeLayout) in the 2nd fragment, you need to add the ChangeTransform transition to your TransitionSet. Apparently ChangeTransform tells the system to remember the views original position in the 1st fragment before animating to the new position in the 2nd fragment. Here is my updated transitionSet. I'll also clean up my test project code a bit and make a final push to bitbucket in case it will help others after me. Thanks for all the help with this one Alex and thank you to @George-mount for answering someones similar question that dropped the hint to me for this solution.

<?xml version="1.0" encoding="utf-8"?>

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeTransform/>
    <changeBounds/>
</transitionSet>

https://bitbucket.org/brockoli/fragmentsharedelements

这篇关于片段之间动画的共享元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！