0

Radio Button当我从选中到取消选中和/或反之亦然时，我正在制作一个包装动画的自定义。我正在使用AnimatedVisibilityjetpack compose 的功能，但是我没有得到预期的结果。

请注意，在上面的 gif 中，尽管按钮通常会改变状态（选择到取消选择，反之亦然），但动画没有发生：

目前，尽管调用了动画函数，但此代码不会为按钮设置动画。

AnimatedRadioButton：

@ExperimentalAnimationApi
@Composable
fun AnimatedRadioButton(
    modifier: Modifier = Modifier,
    isSelected: Boolean,
) {
    if (isSelected)
        FadeAnimatedContainer {
            CircleOptionSelected(modifier = modifier)
        }
    else
        FadeAnimatedContainer {
            CircleOptionUnselected(modifier = modifier)
        }
}

@ExperimentalAnimationApi
@Composable
private fun FadeAnimatedContainer(
    content: @Composable AnimatedVisibilityScope.() -> Unit,
) = AnimatedVisibility(
    visible = true,
    enter = fadeIn(),
    exit = fadeOut(),
    content = content
)

CircleOptionSelected：

@Composable
fun CircleOptionSelected(
    modifier: Modifier = Modifier,
    @DimenRes ballSize: Int = R.dimen.ball_size // 24dp
) {
    val size = dimensionResource(id = ballSize)
    Box(
        modifier = modifier
            .size(size)
            .clip(CircleShape)
            .background(color = MyRed),
        contentAlignment = Alignment.Center
    ) {
        CircleOptionUnselected(ballSize = size / 2)
    }
}

CircleOptionUnselected：

private val UnselectedBallColor = Color(0xFFF2F2F2)

@Composable
fun CircleOptionUnselected(
    modifier: Modifier = Modifier,
    ballSize: Dp? = null
) {
    val size = ballSize ?: dimensionResource(id = R.dimen.ball_size)
    Surface(
        modifier = modifier.size(size),
        shape = CircleShape,
        color = UnselectedBallColor
    ) {

    }
}
4

1 回答 1

2

AnimatedVisibilityvisible在以前的和当前的重组之间不同时起作用。在您的代码中它总是true，所以不应该发生动画。

在你的情况下AnimatedContent可以使用。请注意，使用 lambda 参数对于动画函数至关重要，比如这个。

AnimatedContent(targetState = isSelected) { targetIsSelected ->
    if (targetIsSelected)
        CircleOptionSelected(modifier = modifier)
    else
        CircleOptionUnselected(modifier = modifier)
}
于 2022-02-21T13:05:53.100 回答