draw-oval-with-canvas.kt

package br.com.luizgadao.mysamplesincompose.test

import android.util.Log
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.StartOffset
import androidx.compose.animation.core.VectorConverter
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.animateValue
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawStyle
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import br.com.luizgadao.mysamplesincompose.ui.theme.MySamplesInComposeTheme
import kotlinx.coroutines.delay

@Composable
fun TestDrawCircle2() {

    BoxWithConstraints(
        modifier = Modifier
            .fillMaxSize()
            .border(width = 2.dp, color = Color.Magenta)
            .background(Color.Black)
    ) {

        val colors = listOf(Color.Magenta, Color.Yellow, Color.Green, Color.Red,
            Color.Green, Color.Cyan, Color.DarkGray, Color.Magenta, Color.Yellow, Color.Green, Color.Red)
        val maxW = maxWidth.toPx()
        val startWidth = 40.dp.toPx()
        val startHeight = 25.dp.toPx()
        val space = 35.dp.toPx()

        colors.forEachIndexed { index, color ->
            val delay = index * 50
            val infiniteTransition = rememberInfiniteTransition(label = "test-$index")
            val animateFloat by infiniteTransition.animateValue(
                initialValue = 30.dp,
                targetValue = 700.dp,
                typeConverter = Dp.VectorConverter,
                animationSpec = infiniteRepeatable(
                    tween(2_000, easing = FastOutSlowInEasing),
//                    animation = keyframes {
//                                durationMillis = 2_000
//                                //delayMillis = delay
//                                30.dp.at( 0).with(FastOutSlowInEasing)
//                                500.dp.at(2000).with(FastOutSlowInEasing)
//                    },
                    initialStartOffset = StartOffset(delay),
                    repeatMode = RepeatMode.Reverse
                ),
                label = "dp"
            )

            val w = startWidth + (index * space)
            val h = startHeight + (index * space)
            Canvas(
                modifier = Modifier
                    .size(200.dp)
                    .zIndex(index * -1f)
                    .offset(0.dp, animateFloat)
                    .align(Alignment.TopCenter)
                    //.background(Color.Yellow)
            ) {
                drawOval(
                    color = color,
                    size = Size(width = w, height = h),
                    style = Stroke(width = 8.dp.toPx()),
                    topLeft = Offset(200.dp.toPx() / 2 - w /2, 0f)
                )
            }
        }
    }

}

@Preview(showSystemUi = true)
@Composable
private fun DrawCirclePreview() {
    MySamplesInComposeTheme {
        TestDrawCircle2()
    }
}