mmaillot

    mmaillot

    1 year ago
    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
    @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 😞
    @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)
            )
        }
    }
    Albert Chang

    Albert Chang

    1 year ago
    You can use the
    interactionSource
    parameter.
    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)
        )
    }
    mmaillot

    mmaillot

    1 year ago
    Wow, there is a lot of way to do an animation 😮 Thanks @Albert Chang!