【Kotlinプログラム入門】Jetpack composeでアニメーションに挑戦してみよう！

package com.example.animation

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.ui.Modifier
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.animation.core.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.*
import androidx.compose.ui.unit.times
import com.example.animation.ui.theme.AnimationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AnimationTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    AnimatedText()
                }
            }
        }
    }
}

@Composable
fun AnimatedText() {
    val text = "ポンコツ2人組"

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.TopStart
    ) {
        text.forEachIndexed { index, char ->
            AnimatedCharacter(char, index)
        }
    }
}

@Composable
fun AnimatedCharacter(char: Char, index: Int) {
    var offsetY by remember { mutableStateOf(0f) }
    val animatableOffsetY = remember { Animatable(0f) }

    LaunchedEffect(Unit) {
        animatableOffsetY.animateTo(
            targetValue = index * 30f,
            animationSpec = infiniteRepeatable(
                animation = tween(durationMillis = 500, delayMillis = index * 100),
                repeatMode = RepeatMode.Reverse
            )
        )
    }

    LaunchedEffect(animatableOffsetY.value) {
        offsetY = animatableOffsetY.value
    }

    Box(
        modifier = Modifier.offset(y = offsetY.dp, x = index * 30.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = char.toString(),
            style = TextStyle(fontSize = 24.sp),
            textAlign = TextAlign.Center,
            modifier = Modifier.align(Alignment.Center)
        )
    }
}