Android 使用motion 动画如何使用

MotionLayout 是 Android 中的一个强大的布局容器，它可以用来创建复杂的动画和过渡效果，允许你在布局中定义多个状态，并在这些状态之间进行平滑的动画过渡。以下是使用 MotionLayout 创建动画的基本步骤：

1. 添加依赖：

首先，确保在你的 app 模块的 build.gradle 文件中添加以下依赖：

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.1.0'
}
1
2
3

2. 在布局文件中使用 MotionLayout：

创建一个 XML 布局文件，并在根布局中使用 MotionLayout 作为容器。你可以在 MotionLayout 中定义多个状态（ConstraintSet）和转换（Transition）来实现动画。

例如，以下是一个简单的布局文件，其中定义了两个状态，通过点击按钮来实现状态之间的切换：

<androidx.constraintlayout.motion.widget.MotionLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/motion_scene">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

androidx.constraintlayout.motion.widget.MotionLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 创建 MotionScene 文件：

创建一个 XML 文件来定义 MotionLayout 中的状态和转换。在 res/xml 目录下创建一个名为 motion_scene.xml 的文件，并在其中定义你的状态和转换。以下是一个示例：

<MotionScene xmlns:motion="http://schemas.android.com/apk/res-auto">
    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="300">
        <OnClick motion:targetId="@id/button" />
    Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginTop="16dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    ConstraintSet>
MotionScene>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这个示例中，我们定义了两个状态 start 和 end，以及一个点击按钮的转换。点击按钮时，将从 start 状态过渡到 end 状态，实现按钮从左侧移到右侧的动画。

4. 在代码中关联 MotionLayout：

在你的 Activity 或 Fragment 中，找到 MotionLayout 控件，并设置它的点击事件监听器，以触发动画过渡：

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import androidx.constraintlayout.motion.widget.MotionLayout;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MotionLayout motionLayout = findViewById(R.id.motionLayout);

        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (motionLayout.getCurrentState() == R.id.start) {
                    motionLayout.transitionToEnd();
                } else {
                    motionLayout.transitionToStart();
                }
            }
        });
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这个示例中，我们使用 motionLayout.getCurrentState() 来检查当前状态，并根据当前状态触发相应的动画过渡。

这是一个简单的示例，展示了如何使用 MotionLayout 创建一个基本的动画。你可以根据你的需求和设计进一步扩展和定制 MotionLayout 动画。 MotionLayout 支持更复杂的动画和过渡，包括属性动画和键帧动画，因此你可以创建丰富多彩的交互式界面。