片段转换和 Alpha 问题

Question

我正在使用FragmentTransition，以及两个Fragments 之间的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 以及当我弹出后台堆栈并反转动画时，所有转换都“工作”。

但是在转换发生时，视图上的所有 alpha 设置（包括CardViewcorners 和View alpha）似乎都不正确。结果显然很难看，而发生过渡时任何 alpha 都出现错误（更多的是相乘效果，而不是叠加）。片段转换似乎不正确支持视图上的 alpha？

我在某些视图中使用的 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>

它在左侧的正常显示方式以及片段过渡动画期间的显示方式的屏幕截图：

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

编辑：

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

Answer 1

我看到您在片段 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")，任何位于可绘制对象后面的视图都将变得越来越明显。