在本教程中，我们将在Android应用程序中实现约束布局动画。

约束布局动画

我们可以使用ConstraintLayout快速创建精美的动画。
为此，我们只需要更改约束即可！

通过创建两个不同的布局来创建约束布局动画的最常见，最简单的方法。
第一个是动画的开始阶段，第二个是动画的结束阶段。

Constraint Set是用于在Constraint Layout的视图上设置约束的类。

约束集

ConstraintSet是用于以编程方式在"约束布局"上定义约束的类。
它也可以使用clone()方法检索约束布局中存在的约束。

clone()方法用于从布局复制约束。

applyTo()用于将约束集应用于约束布局。

与其他任何Java对象一样，创建ConstraintSet：

ConstraintSet constraintSet = new ConstraintSet();

为了以编程方式对视图设置约束，我们需要使用connect()。

connect()在同级视图或者视图与父视图之间建立连接。

要创建ConstraintLayout动画，我们需要：

TransitionManager–管理过渡。
" beginDelayedTransition()" –开始从第一个场景到第二个场景(从第一个布局到第二个布局)的过渡。

applyTo()–在第二个布局上应用最终约束。

这意味着您需要创建重复的XML布局，不同之处在于约束。
第一个布局应在过渡的初始阶段显示约束。
第二个布局应在动画之后显示约束。

这样过渡就发生了！

您无需在重复的XML中设置属性和样式。
它会从第一个开始自动捕获。

要使用ConstraintSet，XML布局中的每个视图都必须具有一个ID。

代码

下面给出了activity_main.xml布局的代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:app="https://schemas.android.com/apk/res-auto"
  xmlns:tools="https://schemas.android.com/tools"
  android:id="@+id/cc1"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <ImageView
      android:id="@+id/backgroundImage"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:scaleType="centerCrop"
      android:src="@drawable/bg"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" 

  <EditText
      android:id="@+id/inPassword"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:hint="Password"
      android:paddingBottom="8dp"
      android:paddingEnd="24dp"
      android:paddingStart="24dp"
      android:paddingTop="8dp"
      android:textColor="#FFFF"
      android:background="@drawable/input_field"
      android:imeOptions="actionNext"
      android:inputType="textPassword"
      android:maxLines="1"
      android:layout_margin="16dp"
      android:textColorHint="#b3ffffff"
      android:textCursorDrawable="@null"
      app:layout_constraintBottom_toBottomOf="@+id/inUsername"
      app:layout_constraintLeft_toRightOf="@+id/backgroundImage" 

  <EditText
      android:id="@+id/inUsername"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginTop="48dp"
      android:hint="Username"
      android:paddingBottom="8dp"
      android:paddingEnd="24dp"
      android:paddingStart="24dp"
      android:paddingTop="8dp"
      android:textColor="#FFFF"
      android:background="@drawable/input_field"
      android:imeOptions="actionNext"
      android:inputType="textEmailAddress"
      android:maxLines="1"
      android:layout_margin="16dp"
      android:textColorHint="#b3ffffff"
      android:textCursorDrawable="@null"
      app:layout_constraintRight_toLeftOf="@+id/backgroundImage"
      app:layout_constraintTop_toTopOf="parent" 

  <TextView
      android:id="@+id/tap"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginBottom="12dp"
      android:layout_marginEnd="8dp"
      android:layout_marginStart="8dp"
      android:text="Tap to animate"
      android:textColor="#ffffff"
      android:textSize="15sp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent" 

  <Button
      android:id="@+id/btnLogin"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="#181818"
      android:gravity="center"
      android:text="LOGIN"
      android:textColor="#FFFF"
      android:textSize="18sp"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/backgroundImage" 

</android.support.constraint.ConstraintLayout>

可绘制input_field.xml的代码可以在本教程结尾处提供的源代码/github存储库中找到。

最终的" activity_main_animated.xml"布局的代码是：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:app="https://schemas.android.com/apk/res-auto"
  xmlns:tools="https://schemas.android.com/tools"
  android:id="@+id/cc2"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <ImageView
      android:id="@+id/backgroundImage"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:scaleType="centerCrop"
      android:src="@drawable/bg"
      app:layout_constraintBottom_toTopOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" 

  <EditText
      android:id="@+id/inUsername"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="16dp"
      android:paddingBottom="8dp"
      android:paddingEnd="24dp"
      android:paddingStart="24dp"
      android:paddingTop="8dp"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintTop_toTopOf="parent" 

  <EditText
      android:id="@+id/inPassword"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="16dp"
      android:paddingBottom="8dp"
      android:paddingEnd="24dp"
      android:paddingStart="24dp"
      android:paddingTop="8dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/inUsername" 

  <TextView
      android:id="@+id/tap"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginBottom="8dp"
      android:layout_marginEnd="8dp"
      android:layout_marginStart="8dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent" 

  <Button
      android:id="@+id/btnLogin"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="16dp"
      android:gravity="center"
      android:textSize="18sp"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/inPassword" 

</android.support.constraint.ConstraintLayout>

MainActivity.java的代码如下：

package com.theitroad.androidconstraintanimation;

import android.support.constraint.ConstraintLayout;
import android.support.constraint.ConstraintSet;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.ChangeBounds;
import android.transition.TransitionManager;
import android.view.View;
import android.view.animation.AnticipateInterpolator;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

  ImageView imageView;
  boolean show = false;
  ConstraintLayout cc1;

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

      cc1 = findViewById(R.id.cc1);

      imageView = findViewById(R.id.backgroundImage);

      imageView.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
              if (show)
                  revertAnimation();
              else
                  showAnimation();
          }
      });

  }

  private void showAnimation() {
      show = true;

      ConstraintSet constraintSet = new ConstraintSet();
      constraintSet.clone(this, R.layout.activity_main_animation);

      ChangeBounds transition = new ChangeBounds();
      transition.setInterpolator(new AnticipateInterpolator(1.0f));
      transition.setDuration(1200);

      TransitionManager.beginDelayedTransition(cc1, transition);
      constraintSet.applyTo(cc1);
  }

  private void revertAnimation() {
      show = false;

      ConstraintSet constraintSet = new ConstraintSet();
      constraintSet.clone(this, R.layout.activity_main);

      ChangeBounds transition = new ChangeBounds();
      transition.setInterpolator(new AnticipateInterpolator(1.0f));
      transition.setDuration(1200);

      TransitionManager.beginDelayedTransition(cc1, transition);
      constraintSet.applyTo(cc1);

  }

}

在TransitionManager内，我们设置了一个插值器类，该类具有预定义的行为。