Mehdi Haghgoo

    Mehdi Haghgoo

    1 year ago
    I want to animate a corner size using TargetBasedAnimation and decide which animation value to stop at. I want to trigger the corner size animation on click, but it is automatically executed. Also, what triggers the target based animation?
    Here's the code:
    var cornerSize by remember { mutableStateOf(0f) }
    val tba = remember{TargetBasedAnimation(
        animationSpec = tween(3000, easing = LinearEasing),
        typeConverter = Float.VectorConverter,
        initialValue = cornerSize,
        targetValue = 200f,
        initialVelocity = 10f
    var playTime by remember{ mutableStateOf(0L) }
    var ok by remember{mutableStateOf(false)}
        val startTime = withFrameNanos{it}
            playTime = withFrameNanos { it } - startTime
            val animationValue = tba.getValueFromNanos(playTime)
            cornerSize = animationValue
            Log.d("TargetBasedAnimation", "animationValue: $animationValue")
        } while(animationValue < 100f)
    AnimBox(modifier = Modifier
        .clip(RoundedCornerShape(topStart = cornerSize, bottomEnd = cornerSize))
        .clickable { ok = !ok }

    Lukasz Burcon

    1 year ago
    It looks like you are launching the LaunchedEffect on the initial composition + whenever the
    ’s value changes. Launched effect is being executed automatically and the key you pass to the
    constructor just blocks the execution if the key haven’t changed since the last one. Try changing your code to something like this:
    val coroutineScope = rememberCoroutineScope()
    modifier = Modifier
        .clip(RoundedCornerShape(topStart = cornerSize, bottomEnd = cornerSize))
        .clickable { 
            coroutineScope.launch {
                // the block of code from LaunchedEffect you have above
    Also, get rid of LaunchedEffect