Compose InfiniteTransition demo

CircleAnimDemo.kt

import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.graphics.drawscope.withTransform
import androidx.compose.ui.unit.dp

// 時計に見立てると9時からスタートして一周回って12時まで進みその後9時まで戻る。を繰り返す
@Composable
fun CircleAnimDemo() {
    val infiniteTransition = rememberInfiniteTransition()
    val ratio1: Float by remember {
        mutableStateOf( 2 / 3f)
    }
    val ratio2: Float by remember {
        mutableStateOf(1 - ratio1)
    }
    val value = infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 450f,
        animationSpec = infiniteRepeatable(
            animation = tween(3000, easing = { t ->
                if (t < ratio1) {
                    LinearOutSlowInEasing.transform(t / ratio1)
                } else {
                    val dt = (t - ratio1) / ratio2
                    1 - LinearOutSlowInEasing.transform(dt) * 0.20f
                }
            }),
            repeatMode = RepeatMode.Restart
        )
    )
    Circle(value.value)
}

private const val circleComposableHeight = 40f
@Composable
fun Circle(degree: Float) {
    Canvas(modifier = Modifier.requiredSize(400.dp, circleComposableHeight.dp)) {
        rotate(degree) {
            withTransform({
                translate(left = 300f)
            }) {
                drawCircle(Color.Red, radius = 20f)
            }

            withTransform({
                translate(left = -300f)
            }) {
                drawCircle(Color.Red, radius = 20f)
            }

            withTransform({
                translate(top = 300f)
            }) {
                drawCircle(Color.Red, radius = 20f)
            }

            withTransform({
                translate(top = -300f)
            }) {
                drawCircle(Color.Red, radius = 20f)
            }
        }
    }
}