更改 MotionLayout 中关键帧的 Alpha

Question

更改 MotionLayout 中关键帧的 Alpha

sn0*_*0ep 5 android android-motionlayout

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

但是我希望有两个视图比其他视图早于 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

kja*_*on2 4

我还没有使用过关键帧，它们可能适用于这个，但我已经用motionStagger搞乱了一点，它绝对可以适用于这个。尽管数学有点棘手，但通过反复试验很容易找到您想要的间隔。

在这篇堆栈溢出帖子中，我询问了motionStagger，并最终尝试解释数学，但这对我来说仍然有点棘手。如果您想深入了解该帖子，请查看该帖子。

我建议设置一个相当适中的 staggerValue 来开始，并在你弄清楚哪个部分做什么时更多地修改它。如果您只有两组不同的视图需要交错，那么将 MotionStagger 设置为什么并不重要，只需知道具有较高值的视图将首先进行动画处理即可。您可能想要更多使用的值位于motion:staggeredTransition 元素上

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

<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>

Run Code Online (Sandbox Code Playgroud)

希望这对你有用！我在代码中标记了上面的行，该行会扰乱交错

归档时间：	6 年前
查看次数：	4439 次
最近记录：	4 年，4 月前