ConstraintSet of animation of ContrstrainLayout

一、前言

ConstraintLayoutHas some of its own animation effects,比如:MotionLayout 、ConstraintSet.One of them is recorded hereConstraintSet的使用方式.In fact, this animation method can be usedMotionLayout替换掉的,and it will be simpler

二、使用方式

1、使用范围

使用ConstraintSetAnimate the keyframes of the layout to animate the movement,But the year of the animation changes position and size,无法改变颜色

2、使用xml方式

This way requires two servingsxml文件,Keep the controls that need to be moved the same in both layoutsid.

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、使用代码方式

If you think the above way of using two layouts is not good,It can also be controlled using code,But the code will be more redundant

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) //Clear previous constraints
        constraintSet.centerHorizontally(R.id.title, ConstraintSet.PARENT_ID)
        //这个表示了R.id.title距离ConstraintSet.PARENT_ID The top distance is 100,后面的marginAccording to the second parameter, it is the margin from the other side
        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博客)