Compose InfiniteTransition demo

CircleAnimDemo2.kt

package com.example.composecoolcircleanim.ui.demo

import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.animation.core.Easing
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.Stable
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.DrawScope
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 CircleAnimDemo2() {
    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) {
                    LinearOutSlowInEasing1.transform(t / ratio1)
                } else {
                    val dt = (t - ratio1) / ratio2
                    1 - LinearOutSlowInEasing1.transform(dt) * 0.20f
                }
            }),
            repeatMode = RepeatMode.Restart
        )
    )
    val value2 = infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 450f,
        animationSpec = infiniteRepeatable(
            animation = tween(3000, easing = { t ->
                if (t < ratio1) {
                    LinearOutSlowInEasing2.transform(t / ratio1)
                } else {
                    val dt = (t - ratio1) / ratio2
                    1 - LinearOutSlowInEasing2.transform(dt) * 0.20f
                }
            }),
            repeatMode = RepeatMode.Restart
        )
    )
    val value3 = infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 450f,
        animationSpec = infiniteRepeatable(
            animation = tween(3000, easing = { t ->
                if (t < ratio1) {
                    LinearOutSlowInEasing3.transform(t / ratio1)
                } else {
                    val dt = (t - ratio1) / ratio2
                    1 - LinearOutSlowInEasing3.transform(dt) * 0.20f
                }
            }),
            repeatMode = RepeatMode.Restart
        )
    )
    val value4 = infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 450f,
        animationSpec = infiniteRepeatable(
            animation = tween(3000, easing = { t ->
                if (t < ratio1) {
                    LinearOutSlowInEasing4.transform(t / ratio1)
                } else {
                    val dt = (t - ratio1) / ratio2
                    1 - LinearOutSlowInEasing4.transform(dt) * 0.20f
                }
            }),
            repeatMode = RepeatMode.Restart
        )
    )
    Circle2(value.value, value2.value, value3.value, value4.value)
}

private const val circleComposableHeight = 40f
@Composable
fun Circle2(degree: Float, degree2: Float, degree3: Float, degree4: Float) {
    Canvas(modifier = Modifier.requiredSize(400.dp, circleComposableHeight.dp)) {
        rotate(degree) {
            drawFourCircles(Color.Red, 300f)
        }
        rotate(degree2) {
            drawFourCircles(RedAlpha_50, 300f)
        }
        rotate(degree3) {
            drawFourCircles(RedAlpha_30, 300f)
        }
        rotate(degree4) {
            drawFourCircles(RedAlpha_10, 300f)
        }
    }
}

fun DrawScope.drawFourCircles(color: Color, radius: Float) {
    withTransform({
        translate(left = radius)
    }) {
        drawCircle(color, radius = 20f)
    }

    withTransform({
        translate(left = -radius)
    }) {
        drawCircle(color, radius = 20f)
    }

    withTransform({
        translate(top = radius)
    }) {
        drawCircle(color, radius = 20f)
    }

    withTransform({
        translate(top = -radius)
    }) {
        drawCircle(color, radius = 20f)
    }
}

val LinearOutSlowInEasing1: Easing = CubicBezierEasing(0.0f, 0.0f, 0.2f, 1.0f)
val LinearOutSlowInEasing2: Easing = CubicBezierEasing(0.0f, 0.0f, 0.3f, 1.0f)
val LinearOutSlowInEasing3: Easing = CubicBezierEasing(0.0f, 0.0f, 0.4f, 1.0f)
val LinearOutSlowInEasing4: Easing = CubicBezierEasing(0.0f, 0.0f, 0.5f, 1.0f)
val RedAlpha_50 = Color(0xFFFF0000).copy(alpha = 0.5f)
val RedAlpha_30 = Color(0xFFFF0000).copy(alpha = 0.3f)
val RedAlpha_10 = Color(0xFFFF0000).copy(alpha = 0.1f)