使用 Motion Editor 构建动画

Android Studio 包含一个适用于 MotionLayout 布局类型的视觉设计编辑器,可让您更轻松地创建和预览动画。

Motion Editor 提供了一个简单的界面来操控 MotionLayout 库中的元素,该库是 Android 应用中动画的基础。如果没有 Android Studio,创建和更改这些元素需要手动修改 XML 资源文件中的约束。不过,Motion Editor 支持开始状态和结束状态、关键帧、转换和时间轴,可以为您生成此 XML 文件。

要开始使用 Motion Editor,请执行以下操作:

  1. 创建一个 ConstraintLayout
  2. 右键点击 Layout Editor 中的预览区域。
  3. 点击 Convert to MotionLayout,如下所示。

Android Studio 将 ConstraintLayout 转换为 MotionLayout 后,一个 Motion Scene 文件(在布局文件名中附加了 _scene.xml 文件)添加到包含您的 XML 文件的目录中。

MotionLayout 随后成为您的根布局,并且它会出现在 Motion Editor 界面中。布局已包含开始 ConstraintSet、结束 ConstraintSet 以及从开始到结束的转换。

您可以使用概览图来选择 ConstraintSetTransition 并在选择面板中选择组件。

然后,您可以修改开始或结束 ConstraintSet 的约束条件和属性,修改方式与修改 ConstraintLayout 一样。

如果您要在图中构建更多元素,可以使用创建图标来快速添加 ConstraintSetTransitionOnClick/OnSwipe 手势。

要添加关键帧,请先点击 Transition 箭头:

然后,在 Transition 时间轴窗格中,点击右上角并选择 KeyPosition

此操作会打开一个对话框,您可以从中设置关键帧的属性。

您还可以在属性面板中向转换添加 OnClickOnSwipe 处理程序。

此操作会打开一个对话框,您可以从中设置点击操作的属性,如目标组件和拖动方向。

Motion Editor 支持在设计图面上预览动画。选择动画后,点击时间轴上方的 Play 图标 即可预览动画。