https://kotlinlang.org logo
#compose
Title
# compose
m

Mehdi Haghgoo

06/21/2021, 6:26 PM
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:
Copy 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 }
)
l

Lukasz Burcon

06/21/2021, 8:09 PM
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:
Copy code
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
1