片段转换和Alpha问题

Question

片段转换和Alpha问题

androidandroid-fragmentsandroid-transitions

4

我正在使用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 的透明度）均不正确。结果显然很丑陋，因为在过渡发生时，任何透明度都会显示不正确（更像是乘法效应，而不是覆盖）。似乎 Fragment 过渡中不正确地支持了视图的 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>

左边是vignette正常显示的截图，右边是在Fragment Transition动画期间显示的样子：

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

编辑：

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

- Mark

你能在Github上发布一个具有该行为的简单项目吗？ - azizbekian

@azizbekian 你好，我添加了一个链接到一个小的测试项目，演示了在弹出回退栈时出现的这种行为。 - Mark

我已经检查了这个项目，目前看到的行为与API相匹配。您能告诉我当您执行转换时期望发生什么吗？ - azizbekian

@azizbekian 从动画的角度来看，过渡效果是可以的。然而，当从 Fragment B 返回（按下返回键）时，屏幕左右两侧的暗角/视图中的一个会立即消失，另一个则透明度会立即改变。 - Mark

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cheticamp · Accepted Answer

我在您提供的示例应用中发现了两个问题，当在 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”）时，位于可绘制对象后面的任何视图都会变得越来越可见。