Animation Preview for ProgressBar

Animation Preview for ProgressBar.txt

import android.content.res.Configuration.UI_MODE_NIGHT_NO
import android.content.res.Configuration.UI_MODE_NIGHT_YES
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.github.kiolk.bouncingprogress.ui.theme.BouncingProgressTheme
import kotlinx.coroutines.delay

@Composable
fun BouncingProgress(
    progress: Float,
    modifier: Modifier = Modifier,
    height: Dp = 8.dp,
    trackColor: Color = Color(0xFFE0E0E0),
    progressColor: Color = Color(0xFF6200EE),
) {
    val animatedProgress by animateFloatAsState(
        targetValue = progress.coerceIn(0f, 1f),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = 0.001f,
        ),
        label = "bouncingProgressFill",
    )

    Box(
        modifier = modifier
            .fillMaxWidth()
            .height(height)
            .clip(RoundedCornerShape(50))
            .background(trackColor)
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth(animatedProgress)
                .fillMaxHeight()
                .clip(RoundedCornerShape(50))
                .background(progressColor)
        )
    }
}

private class ProgressPreviewProvider : PreviewParameterProvider<Float> {
    override val values = (0..100 step 10).map { it / 100f }.asSequence()
}

@Preview(showBackground = true, uiMode = UI_MODE_NIGHT_NO, name = "Light")
@Preview(showBackground = true, uiMode = UI_MODE_NIGHT_YES, name = "Dark")
@Composable
private fun BouncingProgressPreview(
    @PreviewParameter(ProgressPreviewProvider::class) progress: Float,
) {
    BouncingProgressTheme {
        Box(
            modifier = Modifier
                .background(MaterialTheme.colorScheme.background)
                .padding(horizontal = 24.dp, vertical = 12.dp)
        ) {
            BouncingProgress(progress = progress)
        }
    }
}

@Preview(showBackground = true, name = "Animation Step 10")
@Composable
private fun BouncingProgressStepAnimationPreview() {
    var progress by remember { mutableIntStateOf(0) }

    LaunchedEffect(Unit) {
        while (true) {
            for (step in 0..100 step 10) {
                progress = step
                delay(800)
            }
        }
    }

    BouncingProgressTheme {
        Box(
            modifier = Modifier
                .background(MaterialTheme.colorScheme.background)
                .padding(horizontal = 24.dp, vertical = 12.dp)
        ) {
            BouncingProgress(progress = progress / 100f)
        }
    }
}

@Preview(showBackground = true, name = "Animation")
@Composable
private fun BouncingProgressAnimationPreview() {
    var progress by remember { mutableIntStateOf(0) }

    LaunchedEffect(Unit) {
        while (true) {
            progress = 0
            delay(600)
            progress = 60
            delay(1200)
            progress = 80
            delay(2000)
        }
    }

    BouncingProgressTheme {
        Box(
            modifier = Modifier
                .background(MaterialTheme.colorScheme.background)
                .padding(horizontal = 24.dp, vertical = 12.dp)
        ) {
            BouncingProgress(progress = progress / 100f)
        }
    }
}