使用 Motion Editor 构建动画

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

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

Motion Editor 入门

  1. 创建 ConstraintLayout.
  2. 在布局编辑器中右键点击预览。
  3. 点击转换为 MotionLayout,如下所示。

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

然后 MotionLayout 会成为您的根布局,并显示在 Motion Editor UI 中。该布局已包含一个起始 ConstraintSet、一个结束 ConstraintSet 以及一个从起始到结束的过渡。

您可以使用概览图形选择 ConstraintSetTransition,以及在选择面板上选择组件。

然后,您可以像编辑 ConstraintLayout 一样编辑起始或结束 ConstraintSet 的约束和属性。

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

要添加关键帧,首先点击过渡箭头

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

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

您还可以在属性面板中将 OnClickOnSwipe 处理程序添加到过渡中。

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

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