如何在 jetpack compose 中使用 MotionLayout、MotionScene、ConstraintSet？

Posted 2023-03-17

【中文标题】如何在 jetpack compose 中使用 MotionLayout、MotionScene、ConstraintSet？

【英文标题】：How to use MotionLayout, MotionScene, ConstraintSet in jetpack compose?

【发布时间】：2021-12-18 17:41:10

【问题描述】：

我正在尝试在 jetpack compose 中实现类似这个动画的东西，从我的眼睛来看，直到这一点让我觉得我应该使用 MotionLayout、ConstraintSet、MotionScene 但 @987654321 @ 很差，我没有得到太多。

谁能给我一些例子或更好的文档？

【参考方案1】：

我们还没有对 ConstraintLayoutCompose（包含 MotionLayout 的库）进行文档推送，因为 ConstrainLayoutCompose 1.0 尚未发布。

ConstrainLayoutCompose 将包含用于 Compose 的 MotionLayouts 功能的有限子集。

语法见here。 可以找到一些工作示例 here

如果您的动画需求很简单，您也可以考虑 Compose“原生”动画。 （谷歌“创作动画”）

明年我们将继续完善所有 MotionLayout 功能。

MotionLayout 基于 ConstraintLayout，因此您也应该熟悉 使用 ConstraintLayout。

MotionLayout 的一般原理是相同的，因此来自经典视图的所有概览信息都适用。 概念如：

ConstraintSet Transitions keyPosition KeyCycle

它正在使用一个新的json5 syntax

【讨论】：

什么时候在官方文档上发布 MotionLayout for Compose？

我们将 MotionLayout 设置为实验性的，因为我们会继续填写 API 和实现。在我们稳定 API 之后，我们将加大力度并努力记录它。我们没有正式的时间表。