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 并反转动画时，所有转换 "work"。

但是 在转换发生时，视图上的所有 alpha 设置（包括 CardView 角和 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 上测试）- link : 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。

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

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>

这是上述更改结束时的样子：

好多了。

作为后续，这是原始的左侧可绘制对象（全屏），start/end 颜色为“#FF303F9F”和“@android:color/transparent”：

这是具有 start/end 颜色“#FF303F9F”和“#00303F9F”的相同绘图。随着颜色从完全不透明（“#FF303F9F”）过渡到完全透明（“#00303F9F”），位于可绘制对象后面的任何视图都将变得越来越明显。

Fragment Transition 和 Alpha 问题

Fragment Transition and Alpha issue

android

android-fragments

android-transitions