使用 Jetpack Compose 绘制动画线条

Question

我正在按如下方式制作 drawLine 动画

val animateFloat = remember { Animatable(0f) }
LaunchedEffect(animateFloat) {
    animateFloat.animateTo(
        targetValue = 1f,
        animationSpec = tween(durationMillis = 1000, easing = LinearEasing))
}

Canvas(modifier = Modifier.fillMaxSize() ) {
    onDraw = {
        drawLine(
            color = Color.Black,
            Offset(size.width / 4, size.height / 6)
            Offset(size.width / 4, (size.height / 6 + SCAFFOLD_HEIGHT) * animateFloat.value),
            strokeWidth = 2f
        )
    }
}

这绝对没问题。但是当我在条件检查中添加它时，如下所示，

if(lives == 5){
    drawLine(
        color = Color.Black,
        Offset(size.width / 4, size.height / 6)
        Offset(size.width / 4, (size.height / 6 + SCAFFOLD_HEIGHT) * animateFloat.value),
        strokeWidth = 2f
    )
}

线条已绘制，但无法设置动画。请让我知道引擎盖下可能发生的事情。 Compose_version = 1.0.0-beta04

Answer 1

我不确定你想要实现什么......但是假设你想要动画以防万一lives == 5，你只需要用你的条件包装LaunchedEffect。例如：

@Composable
fun LineAnimation(lives: Int) {
    val animVal = remember { Animatable(0f) }
    if (lives > 5) {
        LaunchedEffect(animVal) {
            animVal.animateTo(
                targetValue = 1f,
                animationSpec = tween(durationMillis = 1000, easing = LinearEasing)
            )
        }
    }
    Canvas(modifier = Modifier.size(200.dp, 200.dp)) {
        drawLine(
            color = Color.Black,
            start = Offset(0f, 0f),
            end = Offset(animVal.value * size.width, animVal.value * size.height),
            strokeWidth = 2f
        )
    }
}

在调用此可组合项的位置，您可以执行以下操作：

@Composable
fun AnimationScreen() {
    var count by remember {
        mutableStateOf(0)
    }
    Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
        Button(onClick = { count++ }) {
            Text("Count $count")
        }
        LineAnimation(count)
    }
}

这是结果：

使用 Jetpack Compose 绘制动画线条

Animating drawLine using Jetpack Compose

android

kotlin

android-jetpack-compose