Jetpack Compose 中的 MotionLayout

Question

这可能有点快，但应该有一个解决方法

长话短说

有没有办法在MotionLayout中使用Jetpack Compose 的可组合组件？ MotionLayout或Compose的路线图中是否有这样的组合？

---

Jetpack compose 中是否有替代方案可以执行相同的操作？

由于任何想要在运动场景中修改的视图，合成功能都不能在运动场景中修改。

问题

我想在 a 的中心对图像进行动画处理Surface，并在特定的持续时间内将其放大或缩小。

使用运动，您可以在每个步骤中定义关键帧。

Ui 是使用 Composable 函数制作的。如何在 Compose 中使用 MotionLayout 做我能做的事情？

---

Jetpack 撰写：v1.0.0-alpha02

Answer 1

您应该使用transitionDefinition，检查下面的示例并根据您的需要采用它。

enum class State {
    A, B
}

private val scale = FloatPropKey()
private val definition = transitionDefinition {
    state(State.A) {
        this[scale] = 1f
    }
    state(State.B) {
        this[scale] = 5f
    }
    transition(fromState = State.A, toState = State.B) {
        scale using tween(
            durationMillis = 3000,
            easing = FastOutSlowInEasing
        )
    }
}

@Composable
fun AnimateComponentScale() {
    var initialState by remember { mutableStateOf(State.A) }
    var toState by remember { mutableStateOf(State.B) }

    val state = transition(
        definition = definition,
        initState = initialState,
        toState = toState
    ) { state ->
        when (state) {
            State.A -> {
                initialState = State.A
                toState = State.B
            }
            State.B -> {
                initialState = State.B
                toState = State.A
            }
        }
    }
    Box(
        modifier = Modifier.fillMaxSize(),
        gravity = ContentGravity.Center,
        backgroundColor = Color.Cyan
    ) {
        Canvas(modifier = Modifier.preferredSize(50.dp)) {
            scale(scaleX = state[scale], scaleY = state[scale]) {
                drawRect(color = Color(255, 138, 128))
            }
        }
    }
}