Jetpack compose 如何为多个值设置动画

Question

我的Canvas中有几个Path元素，我想对每条Path线做一些复杂的动画。 我不确定如何处理这个问题。 让我们来看看一个简单的路径。

val line1Path = Path()
line1Path.moveTo(maxTopLeftX, 0f) // top left
line1Path.lineTo(maxBottomLeftX, size.height) // bottom left
line1Path.lineTo(maxBottomLeftX+lineWidth, size.height) // bottom right
line1Path.lineTo(maxTopLeftX+lineWidth, 0f) // top right

目前我正在将updateTransition与animateFloat一起使用，但是如果我必须为这个Path的每个点制作动画，我将不得不为这个 1 object 设置 8 个变量。

此外，我想做的不仅仅是一个值 animation，所以像animateFloatAsState这样有关键帧的东西，我可以订购我的动画似乎更适合这项工作，但问题又是我必须创建 8 个变量来保存每个变量的线位置只是为这个 object 设置动画。

解决这个问题的最佳方法是什么？

Answer 1

几天来我一直有同样的问题。 在我的例子中，我使用数据 class 作为输入数据，所以我只是在我的数据 class 中添加了一个默认初始化的Animatable变量。 然后从协程 scope 启动它以获取每个项目。

不确定这是否是解决此类问题的正确方法，但希望对您有所帮助！

Answer 2

这里有一个同时动画多个值的示例。 过渡用于编排值动画。

val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()

    val transition = updateTransition(targetState = isPressed, label = "")

    val angle by transition.animateFloat(transitionSpec = {
        tween(durationMillis = 180, easing = FastOutSlowInEasing)
    }, label = ""){
        when(it){
            true -> 90f
            false -> 0f
        }
    }

    val x by transition.animateDp(transitionSpec = {
        tween(durationMillis = 180, easing = FastOutSlowInEasing)
    }, label = ""){
        when(it){
            true -> 85.dp
            false -> 0.dp
        }
    }


    Column(modifier = Modifier.fillMaxSize().background(Color(0xFFF0F8FF))
            .padding(80.dp).wrapContentSize(align = Alignment.BottomCenter),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // THIS IS THE ANIMATED BOX
        Box(Modifier.rotate(angle).offset(x = x)
            .background(Color.Red)
            .width(20.dp)
            .height(150.dp)
        )

        Box(modifier = Modifier.clickable(interactionSource = interactionSource, indication = null) {}
            .hoverable(interactionSource)
            .focusable(interactionSource = interactionSource)
            .size(100.dp).background(Color.Blue),
        )
    }