MotionLayout结合MotionScene实现折叠Toolbar无动画问题排查

Let's break down why your collapsing toolbar animation isn't triggering when scrolling the NestedScrollView, and fix it step by step:

Key Issues in Your Current MotionScene #

1. You're using onSwipe to trigger the animation, which is designed for direct touch drag interactions on the anchor view. For NestedScrollView scrolling, we need to bind MotionLayout to the scroll event directly using ScrollTrigger.
2. Missing layout width attribute for the Toolbar in the collapsed constraint set.
3. No defined pivot point for the logo's scale animation, which can cause unexpected positioning during scaling.

Corrected MotionScene Code #

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

    <Transition
        app:constraintSetEnd="@+id/collapsed"
        app:constraintSetStart="@+id/expanded"
        app:duration="300"> <!-- Optional: Add duration for smoother animation -->
        <!-- Replace onSwipe with ScrollTrigger to bind to NestedScrollView scroll -->
        <ScrollTrigger
            app:scrollTargetId="@+id/city_fragment_city_holder"
            app:scrollTriggerFlags="scrollUp|scrollDown"
            app:minimumHeight="84dp" <!-- Match expanded Toolbar height -->
            app:maximumHeight="?attr/actionBarSize" /> <!-- Match collapsed Toolbar height -->
    </Transition>

    <ConstraintSet android:id="@+id/expanded">
        <Constraint
            android:id="@+id/city_list_logo"
            android:layout_width="wrap_content"
            android:layout_height="84dp"
            android:scaleX="1.0"
            android:scaleY="1.0"
            <!-- Set pivot to center for natural scaling -->
            app:transformPivotX="50%"
            app:transformPivotY="50%"
            app:layout_constraintBottom_toBottomOf="@+id/city_list_toolbar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/city_list_toolbar" />

        <Constraint
            android:id="@+id/city_list_toolbar"
            android:layout_width="0dp"
            android:layout_height="84dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/collapsed">
        <Constraint
            android:id="@+id/city_list_logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleX=".35"
            android:scaleY=".35"
            <!-- Keep pivot consistent -->
            app:transformPivotX="50%"
            app:transformPivotY="50%"
            app:layout_constraintBottom_toBottomOf="@+id/city_list_toolbar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/city_list_toolbar" />

        <Constraint
            android:id="@+id/city_list_toolbar"
            android:layout_width="0dp" <!-- Fixed: Missing width attribute -->
            android:layout_height="?attr/actionBarSize"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>
</MotionScene>

What Changed & Why #

• ScrollTrigger instead of onSwipe: This tells MotionLayout to listen to scroll events from your NestedScrollView (city_fragment_city_holder) and drive the transition between expanded/collapsed states automatically as the user scrolls up/down.
• Added transformPivot to logo: Setting the pivot to 50% (center) ensures the logo scales inward from its center, instead of the default top-left corner, which makes the animation look polished.
• Fixed Toolbar width in collapsed state: Without android:layout_width="0dp", the Toolbar's constraint layout would be invalid in the collapsed state, potentially breaking the animation.
• Optional duration: Adding app:duration gives you control over how fast the animation transitions, making it feel more responsive.

Additional Checks #

• Ensure your MotionLayout has the correct app:layoutDescription="@xml/collapsing_toolbar" attribute (you already have this in your layout, which is good).
• Verify your NestedScrollView has enough content to scroll (if it's too short, the animation won't trigger).
• Double-check that all view IDs in the MotionScene match exactly with your layout IDs.

内容的提问来源于stack exchange，提问作者Phil Culver