片段之间动画的共享元素

Posted 2023-04-18

【中文标题】片段之间动画的共享元素

【英文标题】：Shared elements animating between fragments

【发布时间】：2015-01-13 01:44:53

【问题描述】：

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

这是我的结构。

活动

-- 带有 RecyclerView 的全屏 Fragment1

-- 带有细节的全屏 Fragment2

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

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

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

片段1

片段2

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

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

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

        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

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

【问题讨论】：

我不确定我是否理解您想要实现的目标。我认为奇怪的黄色/蓝色条是您所指的视图？因此，在您的第一个屏幕截图中，您单击该项目，并且您希望两个相应的黄色/蓝色条动画到第二个片段中黄色/蓝色条的位置......但是会发生什么？你是什​​么意思“......它为 Fragment2 绘制视图并为 2 个共享视图设置动画，就好像它们位于屏幕顶部的项目中一样”？另外，第二张截图中的箭头代表什么？

顺便说一句，如果您使用 android Studio，您可以很容易地截取您的应用程序的屏幕截图（请参阅 these instructions）并将其上传到 YouTube（我知道解释问题一定很困难）。

最后一个问题：这种行为是否仅在您选择屏幕底部的项目时发生？例如，对于顶部的项目，它会按预期工作吗？

是的，如果我在列表底部选择一个项目，我希望蓝色和黄色条从屏幕底部开始动画。蓝色将向上平移 y 轴并按比例缩小 y 轴以及按比例放大 x 轴以最终落在屏幕顶部的最终水平位置。黄色条也一样，除了它不会平移很远，因为它已经在屏幕底部，它通常只是缩小 x 轴并放大 y 轴以水平填充屏幕底部。我现在正在将视频上传到 youtube，完成后会发布

用坐标系来解释可能会更清楚。由于 Fragment 1 是一个带有一堆项目的全屏 RecyclerView。当我单击一个项目并加载我的 Fragment 2 时，它的动画效果就好像它使用项目视图的本地坐标而不是父视图 (ReclyclerView) 一样。因此，如果我选择最后一项，黄色条可能从其本地坐标系的 750,0 开始，但是，在父视图中，它实际上类似于 750,1000，因为它位于列表的底部。

【参考方案1】：

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

<?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

【讨论】：

嗯...哇。很高兴你终于弄明白了。绝对没想到这是解决方案。 :)

非常感谢！片段是否需要一个 frameLayout？我一直对“事实证明，因为我在 2 个片段之间共享的视图是第二个片段中另一个视图 (RelativeLayout) 的子视图”感到困惑，

@brockoli，我正在尝试同样的事情——只是这两个片段处于不同的活动中。在这种情况下，您的代码不起作用。你知道在这种情况下该怎么办吗？

***.com/questions/53179476/…