Who doesn't love building beautiful animations? They make our apps polished improve engagement, and more importantly, they're fun to build. With ConstraintSets and ConstraintLayout, building fluid animations is easier than ever on Android. By specifying layouts for start and end of an animation as keyframes, you can create complex animations with four lines of code.

For this animation, our first layout file pushes the TextViews offscreen and expands the image to cover the entire screen. All Views are styled in the first layout, with text sizes, fonts, and colors set to their final values.

A second XML file holds the final element positions. The title, credits, and description are onscreen in this keyframe. After loading it, the constraints in this layout apply to the view hierarchy.

Next, TransitionManager calculates the paths between the old keyframe and the new one, building a fluid animation.All that in four lines of code, and no custom map? How does it work?

First, create a ConstraintSet and load it from our second layout, which will serve as the second keyframe. A ConstraintSet contains the constraints, sizes, and margins from the layout and is much cheaper to build than inflating a full layout. Since only the position information is loaded, you don't need to keep all of the other styling in sync between the layouts. The colors and text sizes from the first layout will be used.

Next, apply the ConstraintSet to the displayed view. ConstraintLayout immediately calculates the new position for every child element. To make it animate, let TransitionManager start a delayed transition. And that's it.

You're ready to apply ConstraintSet animations to your code. Of course, to use ConstraintSets, you'll need to use ConstraintLayout. Check out our earlier DevByte on ConstraintLayout and the code lab which covers new features in ConstraintLayout 1.1.

ConstraintLayout and ConstraintSet support API 9, so they'll work on all your supported devices. TransitionManager is available at API 14 in the support library. If you support older devices, your UI isn't affected. Users just won't get the animations. Now you don't need to duplicate the layout file. And for simple animations, you may want to build them in code. If you just want to change the bounds of a single view, ConstraintLayout will adjust the other views, according to the constraints. In this example, we're changing the height of the title, and the credits position animates smoothly as the title grows and shrinks.

This shows another feature of ConstraintLayout animations. You get reverse animations without having to do reverse math. By default, TransitionManager will move and resize along a straight path with linear acceleration. To make your animations pop even more, specify custom transitions.

Here's an example using a different interpolator to add a bold effect to the animation. You customize the animation by passing a custom transition to TransitionManager.

It's very easy to build fluid animations using ConstraintLayout and ConstraintSets. I can't wait to see what you build.Send me a GIF of your on Twitter. Thanks for Watching. See you next time.

谁不爱制作漂亮的动画？他们让我们的应用程序更加完善，更重要的是，它们构建起来非常有趣。使用ConstraintSets和ConstraintLayout，构建流畅的动画在Android上比以往更容易。通过指定动画开始和结束的布局作为关键帧，可以用四行代码创建复杂的动画。

对于这个动画，我们的第一个布局文件将TextViews推到屏幕外，并扩展图像以覆盖整个屏幕。所有视图的样式都是在第一个布局中，文本大小，字体和颜色设置为最终值。

第二个XML文件包含最终的元素位置。标题，信用和说明在屏幕上显示在这个关键帧中。加载后，此布局中的约束适用于视图层次结构。

接下来，TransitionManager计算旧关键帧和新关键帧之间的路径，构建一个流畅的动画。所有这些都在四行代码中，而且没有自定义映射？它是如何工作的？

首先，创建一个ConstraintSet并从我们的第二个布局加载它，这将作为第二个关键帧。约束集包含布局的约束，大小和边距，比构建完整的布局要便宜得多。由于只有位置信息被加载，因此不需要在布局之间保持所有其他样式的同步。将使用第一个布局的颜色和文本大小。

接下来，将ConstraintSet应用于显示的视图。 ConstraintLayout立即计算每个子元素的新位置。为了使其具有动画效果，让TransitionManager启动延迟转换。就是这样。

您已准备好将ConstraintSet动画应用于您的代码。当然，要使用ConstraintSets，你需要使用ConstraintLayout。查看我们之前在ConstraintLayout上的DevByte以及包含ConstraintLayout 1.1中新增功能的代码实验。

ConstraintLayout和ConstraintSet支持API 9，所以它们将在所有支持的设备上工作。支持库中的API 14提供了TransitionManager。如果您支持较旧的设备，则您的用户界面不受影响。用户只是不会得到动画。现在你不需要复制布局文件。而对于简单的动画，你可能想要在代码中构建它们。如果你只是想改变一个视图的边界，ConstraintLayout将根据约束来调整其他视图。在这个例子中，我们正在改变标题的高度，随着标题的增长和缩小，信用点位置也会顺畅地动画。

这显示了ConstraintLayout动画的另一个特征。你得到反向动画，而不必倒转数学。默认情况下，TransitionManager将以线性加速度沿直线路径移动和调整大小。为了让您的动画更加流行，请指定自定义转场。

以下是使用不同插补器为动画添加大胆效果的示例。您可以通过自定义转换到TransitionManager来自定义动画。

使用ConstraintLayout和ConstraintSets构建流体动画非常简单。我迫不及待地想知道你在建什么。在Twitter上给我发一个GIF。感谢您的关注。下次再见