ContrstrainLayout的动画之ConstraintSet

Mr_Tony

已于 2022-08-03 14:29:19 修改

阅读量844

点赞数

分类专栏： JetPack 文章标签： android kotlin

于 2022-08-02 16:07:13 首次发布

本文链接：https://blog.csdn.net/Mr_Tony/article/details/126124474

版权

JetPack 专栏收录该内容

85 篇文章 35 订阅

订阅专栏

文章目录

一、前言
二、使用方式
三、参考链接

一、前言

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)
    }