ConstraintLayout 动画

发表于 更新于 评论： 阅读次数：

学习 ContraintLayout 动画的用法。

ConstraintLayout 除了将布局平坦化，提高 UI 性能，还有一个很有用的功能：只用很少的代码就能实现非常酷的动画(要求 API 9 以上)。

代码少到什么程度呢？少到像下面这样，只要 4 行！

1
2
3
4
5
val constraintSet = ConstraintSet()
constraintSet.clone(context, R.layout.second_keyframe)

TransitionManager.beginDelayedTransition(myView)
constraintSet.applyTo(myView)

效果演示

先上几个 demo 看看 ConstraintLayout 实现的动画效果。

主要类

ContraintLayout 动画涉及到的主要类和方法：

基本用法

建议先看看这个视频，如何用四行代码搞定动画。

ConstraintLayout 动画的基本用法如下：

1
2
3
4
5
val constraintSet = ConstraintSet()
constraintSet.clone(context, R.layout.second_keyframe)

TransitionManager.beginDelayedTransition(myView)
constraintSet.applyTo(myView)

当然，也可以指定自定义的过渡效果。(实际上你不指定过度效果的情况下，系统会使用默认的过渡效果 AutoTransition)

1
2
3
4
5
6
7
8
9
val constraintSet = ConstraintSet()
constraintSet.clone(context, R.layout.second_keyframe)

val transition = ChangeBounds()
transition.interpolator = AnticipateOvershootInterpolator(1.0f)

TransitionManager.beginDelayedTransition(myView)
constraintSet.applyTo(myView)

工作原理

ConstraintLayout 动画的本质是这样的：使用 TransitionManager 在 Constrainlayout 中启动了一个延时动画，TransitionManager 在交换两种布局时自动使用动画效果。

ConstraintLayout 动画工作原理 对此有介绍，总结如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
val constraintSetOne = ConstraintSet()
// 使用 clone() 方法从缺省的布局中获取 constraint 并将其映射到 constraintSetOne
constraintSetOne.clone(constraintLayoutId)

val constraintSetTwo = ConstraintSet()
// 使用 clone() 方法从另一个布局中获取 constraint 并将其映射到 constraintSetTwo
constraintSetTwo.clone(R.layout.other)

// 借助 TransitionManager 类的 beginDelayedTransition 方法为 ConstraintLayout 开启一个缺省的 transition 动画

TransitionManager.beginDelayedTransition(constraintView)

// 使用 applyTo() 方法将已设置好的 constraint 应用到 ConstraintLayout
constraintSetTwo.applyTo(constraintView)

常见问题

  • Q: 会有重复代码吗？ A: 不会。会自动重用第一个 layout 中的样式，比如字体大小和颜色

  • Q: 在旧设备上可以运行吗？ A: 支持 API 9 以上的设备，对于不支持的设备直接显示第一个 layout，不会有动画效果

  • Q: 也可以使用 ObjectAnimator 实现相同的动画效果，ConstraintLayout 有什么好处？ A: 代码量少，开发效率高，无需手写各种数学计算

注意：ConstraintLayout 动画只对直接子元素起作用

参考