Jetpack Compose中的MotionLayout

问题描述

这可能会很快，但是应该有一个解决方法

TL; DR

是否可以在 MotionLayout 中使用Jetpack Compose的 Composable 组件？
这样的组合是否在MotionLayout或Compose的路线图中？

---

Jetpack compose中有没有其他替代品可以做到相同？

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

问题

我想为Surface中心的图像设置动画，并在特定的持续时间内放大和缩小图像。

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

Ui是使用Composable函数制作的。 如何使用Compose中的MotionLayout来做些什么？

---

Jetpack撰写：v1.0.0-alpha02

解决方法

您应该使用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))
            }
        }
    }
}