android - Fragment Transition 和 Alpha 问题

Question

我正在使用 FragmentTransition，以及 2 个 Fragment 之间的 SharedElementTransition。

实际的元素转换和 Fragment 转换由一组不同的转换组成，以创建所需的动画，我对动画没有任何问题，但为了清楚起见，包括了所有使用的转换:

    val moveElementTransition: Transition  by lazy { TransitionInflater.from(context).inflateTransition(android.R.transition.move) }
    val noElementTransition:Transition by lazy { TransitionSet().addTransition(TransitionInflater.from(context).inflateTransition(android.R.transition.no_transition)) }
    val exitTransition: Transition by lazy { TransitionSet().addTransition(TransitionInflater.from(context).inflateTransition(android.R.transition.slide_left)).setDuration(200L).setStartDelay(0L) }
    val reenterTransition: Transition by lazy { TransitionSet().addTransition(TransitionInflater.from(context).inflateTransition(android.R.transition.slide_left)).setDuration(200L).setStartDelay(450L) }
    val enterTransition: Transition by lazy { TransitionSet().addTransition(TransitionInflater.from(context).inflateTransition(android.R.transition.slide_bottom)).setDuration(200L).setStartDelay(400L) }

问题

澄清一下，当从 FragmentA 到 FragmentB 时，以及当我弹出 backstack 并反转动画时，所有转换都“有效”。

然而，在转换发生时， View 上的所有 alpha 设置(包括 CardView 角和 View alpha)似乎都是不正确的。结果显然是丑陋的，而过渡发生时任何 alpha 显示不正确(更多的是乘数效果，而不是叠加)。 Fragment Transitions 似乎不正确支持 View 的 alpha？

我在某些 View 中使用的 alpha 插图示例是:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <gradient
        android:angle="0"
        android:endColor="@android:color/transparent"
        android:startColor="@color/colorWindowBackgroundTint"
        android:type="linear"/>
</shape>

左侧小插图的正常外观截图，以及 fragment 过渡动画期间的截图:

有没有其他人遇到过这个问题，如果遇到过，他们有解决办法吗？

编辑:

根据要求，我创建了一个小型测试应用程序来复制此行为(在模拟器 api 23/24/25 上测试)- 链接:https://github.com/TreeFrogApps/FragmentTransitionTest

Answer 1

我发现当在 fragment B 上按下后退时您显示的示例应用存在两个问题。第一个是右侧的渐变没有优雅地向下滑动，而是消失了。第二个问题是左边的渐变在向下滑动之前以一种相当奇怪的方式变化。这是我在示例应用程序中看到的内容:

我真的不能说为什么我们会看到这个，但我可以告诉你一个解决它的方法。这是否适用于您的真实应用，您必须自行决定。

首先，让我们修复左侧小插图的奇怪行为。这个问题不知何故涉及从纯色到透明色的过渡。要解决此问题，请将结束颜色更改为开始颜色的透明版本。视觉外观不会改变。

shape_vignette_left.xml

<shape 
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:startColor="#FF303F9F"
        android:endColor="#00303F9F"
        android:type="linear" />
</shape>

为了简单起见，我使用了颜色常量而不是 id。

现在，让我们修复正确的小插图。这(再次以某种方式)与可绘制形状的旋转有关。要解决此问题，请通过反转上述形状的开始/结束颜色并从布局中删除旋转来创建一个内置旋转的新形状可绘制对象，如下所示:

shape_vignette_right.xml

<shape 
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:startColor="#00303F9F"
        android:endColor="#FF303F9F"
        android:type="linear" />
</shape>

这是新布局:

fragment_b_layout.xml

<FrameLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:layout_width="64dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@drawable/shape_vignette_left" />

    <View
        android:layout_width="64dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="@drawable/shape_vignette_right" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Fragment B"
        android:textColor="@android:color/white" />

</FrameLayout>

这是上述更改结束后的样子:

好多了。

---

作为后续，这是原始的左侧可绘制对象(全屏)，其开始/结束颜色为“#FF303F9F”和“@android:color/transparent”:

这是同一个绘图，其开始/结束颜色为“#FF303F9F”和“#00303F9F”。随着颜色从完全不透明(“#FF303F9F”)过渡到完全透明(“#00303F9F”)，位于可绘制对象后面的任何 View 都将变得越来越明显。