android 如何在Jetpack Compose中动画化LinearProgressIndicator的进度?

uidvcgyl  于 2023-11-15  发布在  Android
关注(0)|答案(6)|浏览(153)

我有一个正确显示当前进度的LinearProgressIndicator。现在我希望进度是动画的,我认为这将是超级简单的animateFloatAsState。好吧,不知道我没有grokking,但与下面的代码,进度不是动画,但立即显示在正确的地方。

@Composable
fun MyIndicator() {
    val progressAnimDuration = 1500
    val progressAnimation by animateFloatAsState(
        targetValue = 0.35f
        animationSpec = tween(durationMillis = progressAnimDuration, easing = FastOutSlowInEasing)
    )
     LinearProgressIndicator(
        progress = progressAnimation,
        ...
        modifier = Modifier           
           .fillMaxWidth()
           .clip(RoundedCornerShape(20.dp)). // Rounded edges
    )
}

字符串
因此,每当我在屏幕上显示该组件时,我都希望进度以动画方式显示到正确的进度状态,但实际上,进度并没有以动画方式显示,而是立即以正确的进度状态显示。
这里有什么问题吗?:)

ffx8fchx

ffx8fchx1#

我也遇到过类似的问题,在我的例子中,我使用LaunchedEffect将进度从零更新到所需的值

@Composable
fun MyIndicator(indicatorProgress: Float) {
   var progress by remember { mutableStateOf(0f) }
    val progressAnimDuration = 1500
    val progressAnimation by animateFloatAsState(
        targetValue = indicatorProgress, 
        animationSpec = tween(durationMillis = progressAnimDuration, easing = FastOutSlowInEasing)
    )
    LinearProgressIndicator(
        modifier = Modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(20.dp)), // Rounded edges
        progress = progressAnimation
    )
    LaunchedEffect(indicatorProgress) {
        progress = indicatorProgress
    }
}

字符串

pdkcd3nj

pdkcd3nj2#

我在animateFloatAsState中发现了一个非常重要的参数visibilityThreshold,你必须将其设置为0.001f才能使其工作。

t3psigkw

t3psigkw3#

在我的情况下,它是工作-

var animationPlayed by remember {
            mutableStateOf(false)
        }
        val currentPercentage = animateFloatAsState(targetValue =
            if(animationPlayed) percentage else 0f,
            animationSpec = tween( durationMillis = 4000)
        )
        LaunchedEffect(key1 = true){
            animationPlayed=true
        }
    
    LinearProgressIndicator(...progress = currentPercentage)

字符串

yh2wf1be

yh2wf1be4#

您可以使用Animatable,但需要LaunchEffect来触发动画

val percent = remember { Animatable(0f) }

  LaunchedEffect(key1 = Unit, block = {
        percent.animateTo(
            targetValue = yourPercentage ,
            animationSpec = tween(
                durationMillis = (1000 * (1f - percent.value)).toInt(),
                easing = FastOutLinearInEasing
            )
        )
    })

     LinearProgressIndicator(
            progress = percent.value
        )

字符串

bjp0bcyl

bjp0bcyl5#

我是这样做的。我使用进度指示器来模拟加载效果,然后跳转到登录活动。

var currentProgress by remember { mutableFloatStateOf(0f) }
val context = LocalContext.current

// jump to Login Activity after animation
val currentPercentage by animateFloatAsState(
    targetValue = currentProgress,
    animationSpec =  tween( durationMillis = 1000, easing = LinearEasing),
    label = "progress",
    finishedListener = { _ -> context.startActivity(Intent(context, LoginActivity3::class.java)) }
)

LaunchedEffect(key1 = Unit){
    currentProgress = 1f
}

Box(modifier = Modifier.fillMaxSize(),contentAlignment = Alignment.Center)
{
    Column(horizontalAlignment = Alignment.CenterHorizontally)
    {
        LinearProgressIndicator(
            modifier = Modifier.width(220.dp).height(5.dp),
            progress = currentPercentage,
            color = colorResource(R.color.green_500)
        )
    }
}

字符串

ymdaylpp

ymdaylpp6#

我通过在0处设置一个可变状态来解决它,然后在代码结束时将其设置为null以触发重组。

{
var starterProgressValue by remember { mutableStateOf<Float?>(0f) }
val actualProgress = 1f

AnimatedProgressBar(
    progress = starterProgressValue ?: actualProgress,
    duration = 3000,
    modifier = Modifier
        .align(Alignment.CenterStart)
        .height(12.dp)
        .fillMaxWidth()
)

starterProgressValue = null

字符串
}

相关问题