[英]Animating drawLine using Jetpack Compose
我正在为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
我不确定你想要实现什么......但假设你想要动画以防万一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 的地方,您可以执行以下操作:
@Composable
fun AnimationScreen() {
var count by remember {
mutableStateOf(0)
}
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
Button(onClick = { count++ }) {
Text("Count $count")
}
LineAnimation(count)
}
}
这是结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.