Jetpack compose alpha 11 : Simple yellow ball running in a red background [Both finite and infinite versions]

Animation.kt

import androidx.compose.animation.core.*
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import android.graphics.Color as LegacyColor

enum class RunStates {
    INITIAL, FINAL
}

@Composable
fun YellowBallOnRedBackground(ballX: Float, modifier: Modifier = Modifier) {
    return Canvas(
        modifier = modifier
            .size(width = 300.dp, height = 50.dp)
            .background(Color(LegacyColor.RED))
    ) {
        drawCircle(
            color = Color(LegacyColor.YELLOW),
            radius = 20.dp.toPx(),
            center = Offset(ballX, 25.dp.toPx())
        )
    }
}

@Composable
fun YellowBallRunning(modifier: Modifier = Modifier) {
    val xState = remember { MutableTransitionState(RunStates.INITIAL) }
    xState.targetState = RunStates.FINAL
    val transition = updateTransition(xState)

    val x by transition.animateFloat(
        transitionSpec = {
            when {
                RunStates.INITIAL isTransitioningTo RunStates.FINAL -> {
                    tween(durationMillis = 1000)
                }
                else -> {
                    snap()
                }
            }
        }
    ) { state ->
        when (state) {
            RunStates.INITIAL -> 60f
            RunStates.FINAL -> 450f
        }

    }

    return YellowBallOnRedBackground(ballX = x)
}

@Composable
fun YellowBallRunningInfinite() {
    val infiniteTransition = rememberInfiniteTransition()
    val x by infiniteTransition.animateFloat(
        initialValue = 60f,
        targetValue = 450f,
        animationSpec = infiniteRepeatable(
            animation = tween(1000),
            repeatMode = RepeatMode.Restart
        )
    )
    
    return YellowBallOnRedBackground(ballX = x)
}

@Preview
@Composable
fun YellowBallRunningPreview() {
    return YellowBallRunning()
}

@Preview
@Composable
fun YellowBallRunningInfinitePreview() {
    return YellowBallRunningInfinite()
}