Question

我在FragmentTransition之间使用SharedElementTransition和Fragment。

实际的元素转换和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设置（包括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上测试） - 链接：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>

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

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

<强> 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”的开始/结束颜色相同的drawable。当颜色从完全不透明（“＃FF303F9F”）过渡到完全透明（“＃00303F9F”）时，位于drawable后面的任何视图将变得越来越明显。

片段转换和Alpha问题

1 个答案: