ContrstrainLayout的动画之ConstraintSet

一、前言

ConstraintLayout有一些自己的动画效果，比如:MotionLayout 、ConstraintSet。这里记录其中之一的ConstraintSet的使用方式。其实这个动画方式是可以用MotionLayout替换掉的，而且会更简单

二、使用方式

1、使用范围

使用ConstraintSet进行动画可以使布局的关键帧进行动画移动，但是该动画之年改变位置和尺寸，无法改变颜色

2、使用xml方式

这种方式需要两份xml文件，将需要进行移动的控件放在两个布局中保持同样的id。

activity_main.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/constraint_layout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">

    <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="标题" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/>

    <Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="点击暴富" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

frame_two.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/constraint_layout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">

    <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="标题" android:layout_marginTop="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity

class MainActivity : AppCompatActivity() {
    
    var constraintLayout: ConstraintLayout ?= null
    override fun onCreate(savedInstanceState: Bundle?) {
    
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        constraintLayout = findViewById(R.id.constraint_layout)
        lifecycleScope.launch {
    
            delay(1000)
            animateToKeyframeTwo()
        }
    }

    private fun animateToKeyframeTwo() {
    
        val constraintSet = ConstraintSet()
        constraintSet.load(this, R.layout.frame_two)
        TransitionManager.beginDelayedTransition(constraintLayout!!)
        constraintSet.applyTo(constraintLayout)
    }
}

3、使用代码方式

如果觉得上述使用两个布局的方式不太好，也可以使用代码进行控制，不过代码会比较冗余

var constraintLayout: ConstraintLayout ?= null
 override fun onCreate(savedInstanceState: Bundle?) {
    
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        constraintLayout = findViewById(R.id.constraint_layout)
        lifecycleScope.launch {
    
            delay(1000)
            animateToKeyframeOne()
        }
    }

    private fun animateToKeyframeOne(){
    
        val constraintSet = ConstraintSet()
        constraintSet.clone(constraintLayout)
// constraintSet.clear(R.id.title) //清除之前的约束
        constraintSet.centerHorizontally(R.id.title, ConstraintSet.PARENT_ID)
        //这个表示了R.id.title距离ConstraintSet.PARENT_ID 的顶部距离为100，后面的margin根据第二个参数来决定是距离那边的边距
        constraintSet.connect(R.id.title,ConstraintSet.TOP,ConstraintSet.PARENT_ID,ConstraintSet.TOP, 100)
        TransitionManager.beginDelayedTransition(constraintLayout!!)
        constraintSet.applyTo(constraintLayout)
    }

三、参考链接

1. 使用 ConstraintLayout 构建自适应界面  |  Android 开发者  |  Android Developers | 关键帧动画

2. [ConstraintSet](ConstraintSet  |  Android Developers)

3. [Android ConstraintLayout ConstraintSet动态布局](Android ConstraintLayout ConstraintSet动态布局_赵彦军的博客-CSDN博客)