I want to animate a corner size using TargetBasedA...

# compose

[Mehdi Haghgoo]

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?

[Mehdi Haghgoo]

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)}


LaunchedEffect(ok){
    val startTime = withFrameNanos{it}
    do{
        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]

It looks like you are launching the LaunchedEffect on the initial composition + whenever the ok ’s value changes. Launched effect is being executed automatically and the key you pass to the LaunchedEffect() 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()
AnimBox(
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