## 关键帧动画 在`ConstraintLayout`中，您可以使用[ConstraintSet](https://developer.android.google.cn/reference/androidx/constraintlayout/widget/ConstraintSet?hl=zh_cn)和[TransitionManager](https://developer.android.google.cn/reference/android/transition/TransitionManager?hl=zh_cn)为尺寸和位置元素的变化添加动画效果。 >[success]**注意**：`TransitionManager`在 Android 4.0 （API 级别 14）或更高级别的支持库中提供。 `ConstraintSet`是一个轻量型对象，表示`ConstraintLayout`内所有子元素的约束条件、外边距和内边距。当您将`ConstraintSet`应用于显示的`ConstraintLayout`时，布局会更新其所有子级的约束条件。 **要使用 ConstraintSets 制作动画，请指定两个布局文件作为动画的开始和结束关键帧。然后，您可以从第二个关键帧文件加载`ConstraintSet`并将其应用于显示的`ConstraintLayout`中**。 >[warning]**重要提示**：ConstraintSet 动画仅为子元素的尺寸和位置添加动画效果。它们不会为其他属性（例如颜色）添加动画效果。 示例如下：改变3个button按钮的尺寸和位置 代码如下 ``` package com.wsc.constrainlayoutsample; import androidx.appcompat.app.AppCompatActivity; import androidx.constraintlayout.widget.ConstraintLayout; import androidx.constraintlayout.widget.ConstraintSet; import androidx.transition.TransitionManager; import android.os.Bundle; import android.view.View; /** * ConstraintLayout动态布局与动画 * ConstraintSet 动画仅为子元素的尺寸和位置添加动画效果。它们不会为其他属性（例如颜色）添加动画效果。 * TransitionManager的效果是可以添加一个动画的效果，而不会显得那么生硬。 * TransitionManager 在 Android 4.0 （API 级别 14）或更高级别的支持库中提供。 */ public class ConstraintLayoutAnimationActivity extends AppCompatActivity { private ConstraintSet mConstraintSet1; private ConstraintSet mConstraintSet2; private ConstraintLayout mConstraintLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_constraint_layout_animation); mConstraintLayout = (ConstraintLayout) findViewById(R.id.root); mConstraintSet1 = new ConstraintSet(); mConstraintSet2 = new ConstraintSet(); mConstraintSet1.clone(mConstraintLayout); mConstraintSet2.clone(mConstraintLayout); } public void reset(View view) { TransitionManager.beginDelayedTransition(mConstraintLayout); mConstraintSet1.applyTo(mConstraintLayout); } public void change(View view) { TransitionManager.beginDelayedTransition(mConstraintLayout); mConstraintSet2.setMargin(R.id.button11, ConstraintSet.START, 8);//如果清单文件里android:supportsRtl="true // "，关掉或者设为false，这里可以使用left //mConstraintSet2.constrainWidth(R.id.button13, 500); mConstraintSet2.applyTo(mConstraintLayout); } } ``` **activity_constraint_layout_animation.xml**文件如下 ~~~ <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/root" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".ConstraintLayoutAnimationActivity"> <Button android:id="@+id/button11" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="68dp" android:text="Button11" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/button12" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="100dp" android:layout_marginEnd="44dp" android:text="Button12" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.886" app:layout_constraintStart_toEndOf="@+id/button11" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/button13" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="88dp" android:text="Button13" app:layout_constraintStart_toEndOf="@+id/button11" app:layout_constraintTop_toBottomOf="@+id/button12" /> <Button android:id="@+id/button14" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginBottom="8dp" android:onClick="change" android:text="Change" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" /> <Button android:id="@+id/button15" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" android:onClick="reset" android:text="Reset" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> ~~~ 效果如下 :-:  图1：未使用TransitionManager的动画 :-:  图2：使用TransitionManager后的动画 :-:  图3：TransitionManager动画效果改变组件宽度