时间戳

首页 > 解决方案 > MotionLayout 没有动画

android - MotionLayout 没有动画

问题描述

我正在尝试通过 MotionLayout 创建折叠视图动画。我想让视图在向下滚动时折叠，直到完全向上滚动时才会出现。我的动画现在不起作用（视频）。在第一次点击之前，我的回收站视图也是不可见的。我究竟做错了什么？感谢

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>

标签： androidandroid-animationandroid-motionlayout

解决方案

所以，经过多次尝试，我设法修复了这个错误。

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

推荐阅读