Android MotionLayout：以最简单的方式创建类似Twitter的“福师大APP”的启动动画

简介✍️

Twitter作为国外流行的交流软件，它的启动画面非常经典。现在，使用Android Jetpack库中的新布局MotionLayout可以比以往更轻松地实现出类似的初始动画。这就是我将在本文中创建的内容：基于Motionlayout实现类似Twitter的福师大图标的启动动画。此外，我还将介绍有关MotionLayout的一些基础知识。

我将在这篇文章中实现如下的动画：

背景✍️

• MotionLayout是Android ConstraintLayout的子类，可让您非常轻松地为应用程序中的任何视图或布局设置动画。
• 虽然仍处于测试阶段，但尚未得到广泛采用，但是我已经可以想象到，稳定发行后人们会想到的独特的交互式动画！

什么是MotionLayout？快速介绍

简而言之，MotionLayout是一个ConstraintLayout允许您轻松在两个ConstraintSet之间进行转换的工具。

ConstraintSet包含每个视图的所有约束和布局属性。

Transition 指定要在其之间进行过渡的起始ConstraintSets。

将所有这些都放入MotionScene文件中，就可以拥有一个MotionLayout！

随着布局和动画变得越来越复杂，MotionScene也变得越来越复杂。

了解有关MotionLayout的更多信息：

MotionLayout上的Android官方开发人员指南

项目设置⚙️

要创建项目，请执行以下操作：

1.打开一个新项目。
2.选择一个空的Activity项目模板。这将创建一个带有操作栏的空白屏幕。
3.输入项目的名称，然后语言选择Kotlin。
4.单击完成。
5.运行项目以查看初始应用程序的外观

运行效果如下：

清理：

要删除工具栏，导航栏，状态栏和文本并向背景添加颜色，请执行以下操作：

1. 打开styles.xml
2. 将基础主题的父级从Theme.AppCompat.Light.DarkActionBar替换为Theme.AppCompat.Light.NoActionBar。（如果您此时运行该应用程序，将会看到操作栏/工具栏消失了）
3. 通过将android：windowFullscreen设置为true（隐藏状态栏）并将android：background设置为默认颜色，为您的应用添加新的自定义设置

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="android:windowFullscreen">true</item>
        <item name="android:background">@color/colorPrimary</item>
    </style>
</resources>

​ 4.打开activity_main.xml并从布局中删除TextView以删除“ Hello World！”文本。

​ 5.现在，在MainActivity.kt中，添加以下行以隐藏系统导航栏（如果复制并粘贴这些行出现 Unresolved reference build errors，请单击未解决的对象，然后按Alt + Enter添加库）：

 override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)
        if (hasFocus) {
            hideSystemUIAndNavigation(this)
        }
    }

    private fun hideSystemUIAndNavigation(activity: Activity) {
        val decorView: View = activity.window.decorView
        decorView.systemUiVisibility =
            (View.SYSTEM_UI_FLAG_IMMERSIVE
                    // Set the content to appear under the system bars so that the
                    // content doesn't resize when the system bars hide and show.
                    or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN // Hide the nav bar and status bar
                    or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                    or View.SYSTEM_UI_FLAG_FULLSCREEN)
    }

​ 6.运行该应用程序。

​ 现在，您基本上会看到一个空屏幕，以默认颜色作为背景：

添加福师大的校徽及设置其背景色：

在开始动画之前，我们只需要设置一些样式即可：红色背景及福师大校徽。

首先开始：

1. 打开colors.xml
2. 将colorPrimary和colorPrimaryDark更改为的红色。
3. 将福师大校徽复制到drawable文件夹下。
4. 打开activity_main.xml，然后将校徽设置为宽度和高度都为128dp的ImageView。

<ImageView
        android:layout_width="128dp"
        android:layout_height="128dp"
        android:src="@drawable/fjnu"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

​ 5.运行该应用程序，然后查看新更改。

添加动作🚴‍♀️

更新ConstraintLayout：

由于MotionLayout是ConstraintLayout的一部分，并且目前仅在v2.0中有效，因此要使用它，我们首先需要更新ConstraintLayout依赖项：

1. 打开build.gradle (Module)
2. 在依赖项部分添加此行，或将您的constraintlayout依赖项替换为：

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta4'

添加动画：

为了最终使动画栩栩如生，您需要执行一些简单的步骤

1. 打开activity_main.xml。
2. 将activity_main.xml的布局设置为MotionLayout。
3. 在xml目录下添加一个新的activity_motion_scene.xml。
4. activity_motion_scene.xml的设置的动画内容如下：
   1. 将校徽缩小，缩小的校徽停留0.5到1秒并逆时针旋转360度。
   2. 最后，将其放大以填满整个屏幕

<?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>
           <KeyAttribute
               motion:motionTarget="@+id/imageView"
               motion:framePosition="0"
               android:scaleX="1.0" />
           <KeyAttribute
               motion:motionTarget="@+id/imageView"
               motion:framePosition="0"
               android:scaleY="1.0" />

           <KeyAttribute
           motion:motionTarget="@+id/imageView"
           motion:framePosition="20"
           android:scaleX="0.7" />
           <KeyAttribute
               motion:motionTarget="@+id/imageView"
               motion:framePosition="20"
               android:scaleY="0.7" />

           <KeyAttribute
               motion:motionTarget="@+id/imageView"
               motion:framePosition="20"
               android:scaleX="0.2" />
           <KeyAttribute
               motion:motionTarget="@+id/imageView"
               motion:framePosition="20"
               android:scaleY="0.2" />

           <KeyAttribute
               motion:motionTarget="@+id/imageView"
               motion:framePosition="40"
               android:scaleX="0.7" />
           <KeyAttribute
               motion:motionTarget="@+id/imageView"
               motion:framePosition="40"
               android:scaleY="0.7" />

           <KeyAttribute
               motion:motionTarget="@+id/imageView"
               motion:framePosition="100"
               android:rotation="-360"
               android:scaleX="10.0" />
           <KeyAttribute
               motion:motionTarget="@+id/imageView"
               motion:framePosition="100"
               android:rotation="-360"
               android:scaleY="10.0" />
       </KeyFrameSet>
        <OnClick />
    </Transition>

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

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

最后，点击运行按钮，得到文章开头呈现的效果

祝大家编码愉快！💻

作者：蔡文贤
原文链接：https://blog.csdn.net/weixin_43528036/article/details/106691915