ConstraintLayout+ConstraintSet实现动画效果

原创已于 2023-08-15 10:29:16 修改 · 3.5k 阅读

CC 4.0 BY-SA版权

文章标签：

#ConstraintLayout ConstraintSet #Android ConstraintLayout实现动画效果 #Android ConstraintSet实现动画效果 #Android ConstraintLayout #Android ConstraintSet

于 2017-05-02 13:49:43 首次发布

Android ConstraintLayout 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何利用Android的ConstraintLayout和ConstraintSet轻松实现复杂动画。通过设置动画的起始和结束关键帧，仅需几行代码即可完成。文章提供了一个示例，展示了如何通过切换两个不同的布局来实现流畅的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.简介

大家都可能已经知道 ConstraintLayout 和 ConstraintSet 在 Android 布局方面的强大功能。其实这些 API 也可以帮助大家轻易的实现复杂的动画。只要为您的动画指定开头和结尾的两个关键帧，就可以用极少量的代码 (仅需四行) 为复杂的场景创建流畅的动画。把适量的动画整合在您的 app 里能更吸引用户并提高他们的参与度。

二.代码实现

布局文件(切换的两个布局)

activity_constraint_layout布局

<?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/activity_main_constraintlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ConstraintLayoutActivity">

    <Button
        android:id="@+id/start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="动画"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.028"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />


    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="横排显示1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintHorizontal_bias="0.261"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.498" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="52dp"
        android:layout_marginBottom="8dp"
        android:text="横排显示2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.498" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="横排显示3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

activity_constraint_layouts布局

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ConstraintLayoutActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="动画"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.028"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />


    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="80dp"
        android:layout_marginEnd="8dp"
        android:text="竖排显示1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="80dp"
        android:layout_marginEnd="8dp"
        android:text="竖排显示2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="竖排显示3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button3"
        app:layout_constraintVertical_bias="0.376" />

</androidx.constraintlayout.widget.ConstraintLayout>

注意:切换的两个布局id要对应的一样才可以

Activity代码

public class ConstraintLayoutActivity extends AppCompatActivity {

    private ConstraintSet mFirstConstraintSet;
    private ConstraintSet mSecondConstraintSet;
    private ConstraintLayout mConstraintLayout;
    private boolean mFlag = true;

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

        mFirstConstraintSet = new ConstraintSet();
        mSecondConstraintSet = new ConstraintSet();

        mConstraintLayout = findViewById(R.id.activity_main_constraintlayout);
        Button button = findViewById(R.id.start);


        mFirstConstraintSet.clone(mConstraintLayout);
        mSecondConstraintSet.clone(this, R.layout.activity_constraint_layouts);
        button.setOnClickListener(view -> {
            if (mFlag) {
                mFlag = false;
                TransitionManager.beginDelayedTransition(mConstraintLayout);// 动画效果
                mSecondConstraintSet.applyTo(mConstraintLayout);
            } else {
                mFlag = true;
                TransitionManager.beginDelayedTransition(mConstraintLayout);
                mFirstConstraintSet.applyTo(mConstraintLayout);
            }
        });
    }
}

效果图