android - MotionLayout没有动画

Question

我正在尝试通过 MotionLayout 创建折叠 View 动画。我想让 View 在向下滚动时折叠，直到完全向上滚动时才会出现。我的动画现在不起作用 ( video )。另外，我的回收站 View 在第一次单击之前才可见。我究竟做错了什么？谢谢

MainActivity 布局:

<androidx.constraintlayout.motion.widget.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/gray_more_white"

app:layoutDescription="@xml/collapsing_toolbar"
tools:showPaths="true">

<include
    android:id="@+id/include"
    layout="@layout/toolbar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<com.github.florent37.shapeofview.shapes.ArcView
    android:id="@+id/header_view"
    android:layout_width="0dp"
    android:layout_height="100dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/include"
    app:shape_arc_cropDirection="outside"
    app:shape_arc_height="20dp"
    app:shape_arc_position="bottom">

    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimaryDark" />

</com.github.florent37.shapeofview.shapes.ArcView>

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/swipe_view"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/include">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

</androidx.constraintlayout.motion.widget.MotionLayout>

运动场景:

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

<Transition
    app:constraintSetEnd="@id/end"
    app:constraintSetStart="@id/start"
    app:duration="1000">

    <OnSwipe
        app:touchAnchorId="@id/swipe_view"
        app:dragDirection="dragDown"
        app:touchAnchorSide="top"
        app:moveWhenScrollAtTop="true"/>
</Transition>

<ConstraintSet android:id="@+id/start">
    <Constraint
        android:id="@id/header_view"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/include">
    </Constraint>
</ConstraintSet>

<ConstraintSet android:id="@+id/end">
    <Constraint
        android:id="@id/header_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/include">
    </Constraint>
</ConstraintSet>

</MotionScene>

Answer 1

经过多次尝试，我成功修复了这个错误。

1)动画的触发(在我的例子中是RecyclerView)必须与动画的指向相关。并且不一定是直接的(在我的例子中，RecyclerView 和 header 通过 Space 连接)

2) 动画的触发器或链接它们的元素不应与动画所指向的内容重叠。 (在我的例子中，Space应该使用constraintBottom_toBottomOf =“@ id/header”+ marginBottom而不是constraintTop_toBottomOf =“@ id/header”。

所以，这是最终的布局。

<androidx.constraintlayout.motion.widget.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/gray_more_white"
app:layoutDescription="@xml/catalog_motion">

<com.github.florent37.shapeofview.shapes.ArcView
    android:id="@+id/header"
    android:layout_width="0dp"
    android:layout_height="100dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/include"
    app:shape_arc_cropDirection="outside"
    app:shape_arc_height="20dp"
    app:shape_arc_position="bottom">

    <View
        android:id="@+id/header_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimaryDark" />

</com.github.florent37.shapeofview.shapes.ArcView>

<Space
    android:id="@+id/space"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="100dp"
    app:layout_constraintBottom_toBottomOf="@id/header"
    app:layout_constraintStart_toStartOf="@id/header"
    app:layout_constraintEnd_toEndOf="@id/header"/>

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/space" />

<include
    android:id="@+id/include"
    layout="@layout/toolbar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>