如何在Android Studio中实现运动布局动画

DebugUsery
110 阅读4分钟

如何在Android Studio中实现运动布局动画

动画是任何应用程序中的一个基本功能。它有助于改善软件的外观和感觉。动画促进了用户的互动。例如，当用户点击一个按钮时，一些动画可能表明执行了一个动作。MotionLayout将是本教程的重点，它是一个允许你在Android应用中快速实现动画的布局。

MotionLayout简介

MotionLayout可以被描述为一个布局，它可以帮助你在你的应用程序中纳入和管理动画。这个布局是ConstraintLayout的一个子类。这意味着它继承了ConstraintLayout的丰富功能。ConstraintLayout允许MotionLayout支持使用API级别14的旧设备。

MotionLayout可以实现的一些动画风格是关键帧和可寻的过渡。关键帧使你能够自定义过渡以适应你的需要。另一方面，可寻的过渡允许你在动画中的某个特定点跳转。MotionLayout的一个巨大优势是它是完全宣告式的。这个因素是相当关键的，尤其是在构建复杂的应用程序时。

目标

使用MotionLayout在Android应用程序中实现动画。

前提条件

要继续学习，你需要具备一些Kotlin编程语言的知识。你的电脑上还应该安装有Android Studio 4.0。

第1步 - 创建项目

打开Android studio并创建一个新项目。选择Empty Activity 模板，因为我们将从头开始建立我们的布局。点击next ，并选择API 14 作为你的最小SDK。记得将你的首选编程语言设置为Kotlin 。完成这些设置后，点击finish ，让项目被初始化。请注意，这个过程可能需要一些相当长的时间，这取决于你的电脑速度和互联网连接。

第2步 - 安装依赖性

我们项目中需要的一个关键依赖是ConstraintLayout。幸运的是，它被默认包含在所有的Android项目中。因此，打开应用级build.gradle 文件。在依赖关系部分，确保你使用的ConstraintLayout的版本不低于2.0.0 。这一点在下面演示。

implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

第3步 - 切换到MotionLayout

在这个阶段，我们要将我们的默认布局从ConstraintLayout转向MotionLayout。这将使我们能够获得额外的功能，如转换。打开 activity_main.xml 文件，从代码视图切换到设计标签，如下图所示。

DESIGN

接下来，导航到component tree 部分，right ，点击ConstraintLayout。一个新的窗口将弹出，有几个选项。选择Convert to MotionLayout 菜单项。

CONVERT

当你点击上面演示的Convert to MotionLayout 按钮时，会产生一个activity_main_scene.xml 。让我们更好地了解这个文件的内容。

第一个部分是Transition 。

<Transition
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@id/start"
    motion:duration="1000">
    <KeyFrameSet>
    </KeyFrameSet>
</Transition>

这一部分定义了我们的小部件将如何在屏幕上移动。例如，一个按钮可以从屏幕的上角移到底部。我们用motion:constraintSetStart 来设置过渡开始的位置。motion:constraintSetEnd 声明过渡停止的位置。

我们还可以用motion:duration 来设置过渡或动画的时间。约束条件帮助我们在动画过程中定位UI部件。例如，下面的代码片段决定了我们的小部件在不同的过渡阶段将被放置在哪里。

<ConstraintSet android:id="@+id/start">
</ConstraintSet>

<ConstraintSet android:id="@+id/end">
</ConstraintSet>

这里是 activity_main_scene.xml 文件的完整布局。

<?xml version="1.0" encoding="utf-8"?>
<MotionScene
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
       <KeyFrameSet>
       </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
    </ConstraintSet>
</MotionScene>

第4步 - 添加UI组件

我们需要在我们的应用程序中包含一些UI组件来利用MotionLayout。在本教程中，我们将为Button和ImageView添加动画。在activity_main.xml 文件中复制并粘贴以下代码片断，以便在应用程序中包含这些部件。

<?xml version="1.0" encoding="utf-8"?>
<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"
    app:layoutDescription="@xml/activity_main_scene"
    android:background="@color/colorPrimary"
    tools:context=".MainActivity">


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_launcher_foreground"
        tools:layout_editor_absoluteX="119dp"
        tools:layout_editor_absoluteY="290dp" />

    <Button
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome"
        android:backgroundTint="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        tools:layout_editor_absoluteX="192dp" />
</androidx.constraintlayout.motion.widget.MotionLayout>

第5步 - 视图的动画化

在过去，我们需要在activity_main_scene.xml 文件中手动输入过渡值。这是很麻烦和费时的。Android Studio 4.0中引入的Motion Editor有助于解决这些难题。

好吧，让我们使用MotionEditor 。

打开activity_main.xml ，并切换到design 视图，然后按照下面视频中的说明来制作视图的动画。

测试

你可以通过创建一个APK并安装在你的手机上来测试这个应用程序。如果ImageView 缩小，并且按钮从屏幕底部转移到中心，你就成功完成了本教程。

demo

结论

动画是任何应用程序的一个关键部分。MotionLayout使得在Android应用程序中加入这一功能变得很容易。因此，你可以利用这些知识来开发更有吸引力的应用程序。

avatar
文章
阅读
粉丝