作者 / Scott Swarthout
在同 Android 开发者社区交换之中，咱们深知动画成果的退出对于 UI 来说至关重要，它能够让 UI 看起来更加直观，同时还利于用户了解其所要表白的用意。然而，开发者们在 Android 利用中增加简单的动画成果却有着较大的工作量。为了解决这一问题，咱们应用 Motion Layout 构建了一组功能强大的 API，并为之提供了 Motion Editor 工具，组合应用时能够轻松构建出像素级别完满的动画成果。
本文会带您疾速理解新的 Motion Editor 工具，以及如何在开发过程中应用其最新性能。此外，咱们还专门制作了一系列 视频 来领导您对于蕴含 Motion Layout 在内的一系列 API 的常识。
Motion Editor 是一款专门针对 MotionLayout 布局类型所构建的可视化编辑器，通过它能够轻松地创立和预览动画成果。自 Android Studio 4.0 版本开始，咱们公布了稳固版本的 Motion Editor，许多开发者曾经在应用它创立动画成果。
Motion Editor 中运行的动画
Motion Editor 是 Android Studio Layout Editor (布局编辑器) 的一个扩大，当您在一个蕴含 MotionLayout 的 XML 文件中抉择 Design 或 Split 视图 时，会主动关上 Motion Editor。您能够应用已在布局编辑器中所熟知的交互方式来编辑布局和 Motion Scene 文件，并能够间接在 Android Studio 预览界面中对动画成果进行预览。
Motion Editor
Motion Editor 的界面由几个操作面板形成，咱们将会在本文进行一一介绍。最次要的几块区域有: Overview (概览) 面板，Selection (抉择) 面板，Attribute (属性) 面板 和 Preview (预览) 面板。
Motion Editor 蕴含四大面板
Overview 面板
MotionLayout 能够对布局的变动做动画解决，在编辑器中该动画可被指定为 ConstraintSets 中的 Transition 成果。Motion Editor 能够通过 Overview 面板将这些状态的转变可视化。要编辑 ConstraintSet 中的束缚，点击 Overview 面板中相应的选项即可。
图中的 MotionLayout Scene 中有 start 和 end 两个 ConstraintSet，它们之间有一个 Transition 成果
Selection 面板
Selection 面板会依据 Overview 面板中的状态显示相应的控件信息，它有三种显示模式:
- 选中 Overview 面板中 Motion Layout 时的模式
- 选中 Overview 面板中 ConstraintSet 时的模式
- 选中 Overview 面板中 Transition 时的模式
Selection 面板依据 Overview 面板的状态有三种模式
选中 Overview 面板中 Motion Layout 时的模式
Motion Editor 反对编辑根本的 Motion Layout。当在 Overview 面板中选中 Motion Layout 之后，您能够抉择相应的组件来查看它的束缚是否配置正确。
通过 Selection 面板查看组件的束缚是否配置正确
选中 Overview 面板中 ConstraintSet 时的模式
当在 Overview 面板中选中 ConstraintSet 时，Selection 面板会以列表的模式列出所有组件，组件旁边的选中图标意味着该组件被以后的 ConstraintSet 所束缚。
抉择蕴含在 ConstraintSet 中的组件
选中 Overview 面板中 Transition 时的模式
当在 Overview 面板中抉择 transition 时，您能够通过动画工具栏来管制动画的播放。入选中某个动画后，点击时间轴上的 Play ▶️ 按钮，能够预览动画成果。
在 Motion Editor 时间轴上预览动画成果
关键帧
有时您须要批改某视图在动画过程中的门路，此时便能够借助 MotionLayout 的关键帧来达到目标。咱们在编辑器中集成了关键帧编辑性能，让您能够轻松对动画进行调整。您能够点击 Selection 面板右上角的图标创立一个新的关键帧，而后会关上一个对话框，在该对话框中能够为关键帧设置各种属性。若要编辑某个关键帧，您能够点击菱形 ◆ 图标来关上属性面板进行编辑。
在 Selection 面板中创立关键帧
Attribute 面板
在 MotionLayout 中创立动画须要编辑泛滥视图参数，因而咱们在 Motion Editor 中引入了同 Layout Editor 相似的 Attribute (属性) 面板。在 Attribute 面板中不仅能够不便对 Constraint 的可视化成果进行预览，还能够预览 Motion Scene 文件中视图的所有属性成果。
在 Attribute 面板中预览 Constraint 可视化成果
当您想对某个视图属性上增加动画成果时，而该属性却不属于 ConstraintLayout 或者 MotionLayout API (比方背景色) 时，能够在 Attribute 面板中创立自定义属性。咱们还为自定义视图属性增加了主动填充和输出验证的性能，不便您的操作。
Preview 面板
Preview 面板的退出使得在解决动画成果时，可能实现疾速编辑并立刻获取反馈，当您对动画进行轻微调整之后，不必再去从新编译和部署，也能间接预览最终的动画成果。
咱们还为 Preview 面板中增加了一些新的个性，让开发者们更容易了解所创立的动画是如何工作的。您能够应用 Design 视图和 Blueprint 视图预览动画，在没有很多视觉烦扰的状况下更清晰地理解视图是如何挪动的。
咱们还为视图在屏幕上的门路增加了可视化的性能，包含关键帧的标记。咱们心愿这些性能可能让编译器更容易解析简单的过渡成果，并简化创立体验。
Motion Editor 已在 Android Studio 4.0 中推出，欢送大家应用并给予咱们反馈。咱们十分渴望看到社区应用 MotionLayout 和 Motion Editor 来构建产品。Android Studio 团队也会一直地收集反馈以改善其应用体验。有任何想法或遇到任何问题，欢送 提交反馈。
如果您想理解更多本文中应用的代码以及其余几个 MotionLayout 的示例，如果您想理解更多对于 MotionLayout 的内容，请查阅以下资源:
- 应用 MotionLayout 治理 motion 和 widget 的动画
- 应用 MotionLayout 在 Android 利用中增加动画 (codelab)
- MotionLayout 示例
- MotionLayout / ConstraintLayout 示例代码 (Github)