https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
m

mmaillot

06/09/2021, 11:46 AM
I’m trying to make a simple animation when user clicks on a ImageButton. I want to animate the image size. It works with 
pointerInteropFilter
but the 
onClick
method is not called anymore 😞 I tried with 
pointerInput
but the image is not resized, it’s only a circle (ripple effect?) which is resized... Do you have simple code sample to do an animation on user click ? (code in thread)
Works but onClick doesn’t work anymore
Copy code
@Composable
fun PlayButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
) {

    val clicked = remember { mutableStateOf(false) }
    val scale = animateFloatAsState(if (clicked.value) 0.8f else 1f, animationSpec = tween(100)) {
        clicked.value = false
    }

    IconButton(
        onClick = onClick,
        modifier = modifier
            .scale(scale.value)
        .pointerInteropFilter {
            when (it.action) {
                MotionEvent.ACTION_DOWN -> {
                    clicked.value = true
                }

                MotionEvent.ACTION_UP -> {
                    clicked.value = false
                }
            }
            true
        }
        enabled = enabled,
    ) {
        Image(
            painter = painterResource(id = R.drawable.button_play),
            contentDescription = stringResource(id = R.string.course_exercise_start)
        )
    }
}
Doesn’t work:, it’s like only the ripple effect is resized 😞
Copy code
@Composable
fun PlayButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
) {

    val clicked = remember { mutableStateOf(false) }
    val scale = animateFloatAsState(if (clicked.value) 0.8f else 1f, animationSpec = tween(100)) {
        clicked.value = false
    }

    IconButton(
        onClick = onClick,
        modifier = modifier
            .scale(scale.value)
            .pointerInput(clicked) {
                detectTapGestures(onPress = {
                    clicked.value = true
                })
            },
        enabled = enabled,
    ) {
        Image(
            painter = painterResource(id = R.drawable.button_play),
            contentDescription = stringResource(id = R.string.course_exercise_start)
        )
    }
}
a

Albert Chang

06/09/2021, 1:40 PM
You can use the 
interactionSource
parameter.
Copy code
val interactionSource = remember { MutableInteractionSource() }
val pressed = remember { mutableStateOf(false) }
LaunchedEffect(interactionSource, pressed) {
    interactionSource.interactions.collect {
        pressed.value = it is PressInteraction.Press
    }
}
val scale = animateFloatAsState(
    if (pressed.value) 0.8f else 1f,
    animationSpec = tween(100)
)

IconButton(
    onClick = onClick,
    modifier = modifier.scale(scale.value),
    enabled = enabled,
    interactionSource = interactionSource
) {
    Image(
        painter = painterResource(id = R.drawable.button_play),
        contentDescription = stringResource(id = R.string.course_exercise_start)
    )
}
m

mmaillot

06/09/2021, 2:04 PM
Wow, there is a lot of way to do an animation 😮 Thanks @Albert Chang!
4 Views
Powered by