Android Studio 中的 Motion Editor 用法详解

做者 / 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 面板中的状态显示相应的控件信息，它有三种显示模式:

1. 选中 Overview 面板中 Motion Layout 时的模式
2. 选中 Overview 面板中 ConstraintSet 时的模式
3. 选中 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)