android - 在 MotionLayout 中更改关键帧中的 alpha

Question

我有一个运动场景，可以将一些 View 转换到新位置并更改一些 alpha 值。到目前为止，MotionScene 基本上是线性的，这意味着它有一个开始状态和一个结束状态。

但是，我希望有两个 View 比其他 View 早于 alpha 0。假设在过渡的 10% 处，标题和副标题应该完全淡出。据我了解，这可以通过 KeyFrameSet 来完成。 .我在 MotionScene 上做了一些工作但我没有看到行为有任何变化。任何帮助将不胜感激!

这是我的动态场景

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <Transition
        app:constraintSetEnd="@+id/end"
        app:constraintSetStart="@+id/start"
        app:duration="300">
        <OnSwipe
            app:dragDirection="dragDown"
            app:touchAnchorId="@+id/thumbnail" />


        <KeyFrameSet>
            <KeyAttribute
                android:alpha="1"
                app:motionProgress="0"
                app:motionTarget="@+id/title" />

            <KeyAttribute
                android:alpha="0"
                app:motionProgress="10"
                app:motionTarget="@+id/title" />

        </KeyFrameSet>

    </Transition>


    <ConstraintSet android:id="@+id/start">

        <Constraint
            android:id="@+id/background_card"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                app:attributeName="cornerRadiusDp"
                app:customFloatValue="0.0" />

        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">

        <Constraint
            android:id="@+id/background_card"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent">
            <CustomAttribute
                app:attributeName="cornerRadiusDp"
                app:customFloatValue="16.0" />

        </Constraint>

        <Constraint
            android:id="@+id/thumbnail"
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:layout_constraintBottom_toBottomOf="@+id/background_card"
            app:layout_constraintLeft_toLeftOf="@+id/background_card"
            app:layout_constraintRight_toRightOf="@+id/background_card"
            app:layout_constraintTop_toTopOf="@+id/background_card" />
        <Constraint
            android:id="@+id/background"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="0" />
        <Constraint
            android:id="@+id/toolbar"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:alpha="0"
            app:layout_constraintLeft_toLeftOf="@+id/background_card"
            app:layout_constraintRight_toRightOf="@+id/background_card"
            app:layout_constraintTop_toTopOf="@+id/background_card" />

        <Constraint
            android:id="@+id/controls_container"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:alpha="0"
            app:layout_constraintBottom_toBottomOf="@+id/background_card"
            app:layout_constraintLeft_toLeftOf="@+id/background_card"
            app:layout_constraintRight_toRightOf="@+id/background_card" />

        <Constraint
            android:id="@+id/title"
            app:layout_constraintBottom_toTopOf="@+id/subtitle"
            app:layout_constraintLeft_toLeftOf="@+id/background_card"
            app:layout_constraintRight_toRightOf="@+id/background_card" />

        <Constraint
            android:id="@+id/subtitle"
            app:layout_constraintBottom_toTopOf="@+id/controls_container"
            app:layout_constraintLeft_toLeftOf="@+id/background_card"
            app:layout_constraintRight_toRightOf="@+id/background_card" />


    </ConstraintSet>


</MotionScene>

Answer 1

我还没有玩过 KeyFrames，它们可能适用于此，但我对motionStagger 有点搞砸了，它绝对可以适用于此。虽然数学有点棘手，但很容易通过反复试验来找到你想要的间隔。

在 this stack overflow post我询问了motionStagger并最终试图解释数学，但这对我来说仍然有点棘手。如果您想深入了解，请查看该帖子。

我建议设置一个相当适中的 staggerValue 开始并在你弄清楚哪个部分做什么时更多地弄乱它。如果您只有两组不同的 View 要交错，那么您将 motionStagger 设置为什么并不重要，只需知 Prop 有较高值的​​ View 将首先进行动画处理。您可能想玩更多的值(value)是motion:staggered在过渡元素上

试试这段代码，看看它是否符合您的要求:

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">


<Transition
    app:constraintSetEnd="@+id/end"
    app:constraintSetStart="@+id/start"
    app:duration="300"
    motion:staggered="0.6>  <--- mess around with this value
    <OnSwipe
        app:dragDirection="dragDown"
        app:touchAnchorId="@+id/thumbnail" />
</Transition>

<ConstraintSet android:id="@+id/start">
    <Constraint
        android:id="@+id/background_card"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <CustomAttribute
            app:attributeName="cornerRadiusDp"
            app:customFloatValue="0.0" />
        <Motion motion:motionStagger="1" />
    </Constraint>
    <Constraint
        android:id="@+id/title"
        app:layout_constraintBottom_toTopOf="@+id/subtitle"
        app:layout_constraintLeft_toLeftOf="@+id/background_card"
        app:layout_constraintRight_toRightOf="@+id/background_card" >
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="1.0" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint
        android:id="@+id/subtitle"
        app:layout_constraintBottom_toTopOf="@+id/controls_container"
        app:layout_constraintLeft_toLeftOf="@+id/background_card"
        app:layout_constraintRight_toRightOf="@+id/background_card" >
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="1.0" />
        <Motion motion:motionStagger="2" />
    </Constraint>
</ConstraintSet>

<ConstraintSet android:id="@+id/end">
    <Constraint
        android:id="@+id/background_card"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent">
        <CustomAttribute
            app:attributeName="cornerRadiusDp"
            app:customFloatValue="16.0" />
    </Constraint>

    <Constraint
        android:id="@+id/thumbnail"
        android:layout_width="40dp"
        android:layout_height="40dp"
        app:layout_constraintBottom_toBottomOf="@+id/background_card"
        app:layout_constraintLeft_toLeftOf="@+id/background_card"
        app:layout_constraintRight_toRightOf="@+id/background_card"
        app:layout_constraintTop_toTopOf="@+id/background_card" />

    <Constraint
        android:id="@+id/background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha="0" />

    <Constraint
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="56dp"
        android:alpha="0"
        app:layout_constraintLeft_toLeftOf="@+id/background_card"
        app:layout_constraintRight_toRightOf="@+id/background_card"
        app:layout_constraintTop_toTopOf="@+id/background_card" />

    <Constraint
        android:id="@+id/controls_container"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:alpha="0"
        app:layout_constraintBottom_toBottomOf="@+id/background_card"
        app:layout_constraintLeft_toLeftOf="@+id/background_card"
        app:layout_constraintRight_toRightOf="@+id/background_card" />

    <Constraint
        android:id="@+id/title"
        app:layout_constraintBottom_toTopOf="@+id/subtitle"
        app:layout_constraintLeft_toLeftOf="@+id/background_card"
        app:layout_constraintRight_toRightOf="@+id/background_card" >
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="0.0" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint
        android:id="@+id/subtitle"
        app:layout_constraintBottom_toTopOf="@+id/controls_container"
        app:layout_constraintLeft_toLeftOf="@+id/background_card"
        app:layout_constraintRight_toRightOf="@+id/background_card" >
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="0.0" />
        <Motion motion:motionStagger="2" />
    </Constraint>
</ConstraintSet>

希望对你有用!我在代码中标记了上面会弄乱交错的行