基于维度的动画

Question

我想根据固定值和可组合项的 $width 为可组合项设置动画。如何获得 $width 以将其用于动画功能？这是我的代码

@Composable
fun ExpandingCircle() {
    val (checked, setChecked) = remember { mutableStateOf(false) }
    val radius = if (checked) **$width** else 4.dp
    val radiusAnimated = animate(radius)
    Canvas(
        modifier = Modifier.fillMaxSize()
            .clickable(onClick = { setChecked(!checked) }),
        onDraw = {
            drawCircle(color = Color.Black, radius = radiusAnimated.toPx())
        }
    )
}

Answer 1

我们可以从DrawScope中得到尺寸，从尺寸中我们可以得到Canvas的宽度和高度，所以你可以像这样做动画。

@Composable
fun ExpandingCircle() {
    val (checked, setChecked) = remember { mutableStateOf(false) }
    val unCheckedRadius = 4.dp
    Canvas(
        modifier = Modifier.fillMaxSize()
            .clickable(onClick = { setChecked(!checked) }),
        onDraw = {
            val width = size.width
            drawCircle(color = Color.Black, radius = if (checked) width/2 else unCheckedRadius.toPx())
        }
    )
}

Answer 2

我意识到我不需要动画的宽度，但我可以使用动画/插值浮点数将其用于 DrawScope 中的计算

@Composable
fun ExpandingCircle() {
    val (checked, setChecked) = remember { mutableStateOf(false) }
    val radiusExpandFactor = if (checked) 1f else 0f
    val radiusExpandFactorAnimated = animate(radiusExpandFactor)
    Canvas(
        modifier = Modifier.fillMaxSize()
            .clickable(onClick = { setChecked(!checked) }),
        onDraw = {
            val radius = 4.dp.toPx() + (radiusExpandFactorAnimated * (size.width / 2 - 4.dp.toPx()))
            drawCircle(color = Color.Black, radius = radius)
        }
    )
}

基于维度的动画

Animate based on dimensions

android

kotlin

android-jetpack-compose