0

Animation is not at all smooth enough, it is just like lagging

Here I am using a simple box, I am expanding its width using animateFloatAsState. Without any animation of its inside element, it is not at all smooth enough. Where I am doing wrong?

Code:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.*
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

class TestClassTwo : ComponentActivity() {

    private var isExpandedSavingCard by mutableStateOf(true)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {

            val savingCardWeight = remember {
                mutableStateOf(0.50f)
            }
            val animation = animateFloatAsState(
                targetValue = savingCardWeight.value,
                animationSpec = tween(
                    durationMillis = 400,
                    easing = LinearEasing
                )
            )

            Box(modifier = Modifier
                .fillMaxWidth(animation.value)
                .fillMaxHeight(0.5f)
                .clickable {
                    isExpandedSavingCard = !isExpandedSavingCard
                    savingCardWeight.value = if (isExpandedSavingCard) 0.50f else 1f
                }
                .background(color = Color.Blue))
            {


            }


        }
    }
}
Purnendu Samanta
  • 3
  • 3

1 Answers1

0

This is the problem in jetpack compose till now but you can reduce lagging effect by changing two line of code

from

durationMillis = 400, easing = LinearEasing

To

durationMillis = 2000, easing = LinearOutSlowInEasing

Note -> durationMillis = 2000 just for increase time of animation you can use any time above 1000 ms

Rahnuma Sharib
  • 11
  • 1
  • 2