Submission/subir aniations 1

app/src/main/java/dev/baseio/composeplayground/MainActivity.kt

@@ -133,6 +133,21 @@ class MainActivity : ComponentActivity() {
               BellAnimation(Modifier.align(Alignment.Center))
             }
           }
+          15 -> {
+            Box(Modifier.fillMaxSize()) {
+              PlayPauseAnimation(Modifier.align(Alignment.Center))
+            }
+          }
+          16 -> {
+            Box(Modifier.fillMaxSize()) {
+              RunDinoRun(Modifier.align(Alignment.Center))
+            }
+          }
+          17 -> {
+            Box(Modifier.fillMaxSize()) {
+              MultiRingsLoader(Modifier.align(Alignment.Center))
+            }
+          }
         }
       }
       HorizontalPagerIndicator(

app/src/main/java/dev/baseio/composeplayground/contributors/Subir.kt

@@ -0,0 +1,31 @@
+package dev.baseio.composeplayground.contributors
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import dev.baseio.composeplayground.R
+import dev.baseio.composeplayground.ui.theme.Typography
+
+const val subirImageUrl = "https://ca.slack-edge.com/T02TLUWLZ-UKMME8H8U-825b8f468eac-512"
+
+@Composable
+fun Subir(modifier: Modifier = Modifier) {
+  Row(verticalAlignment = Alignment.CenterVertically, modifier = modifier.padding(4.dp)) {
+    CoilImageBox(Modifier.size(64.dp), subirImageUrl)
+    Column(verticalArrangement = Arrangement.Center, modifier = Modifier.padding(8.dp)) {
+      Text(
+        text = stringResource(id = R.string.emp_mmh0209),
+        style = Typography.h6.copy(MaterialTheme.colors.onSurface),
+      )
+      Text(
+        text = stringResource(id = R.string.emp_mmh0209_email),
+        style = Typography.subtitle1.copy(MaterialTheme.colors.onSurface),
+      )
+    }
+  }
+}

app/src/main/java/dev/baseio/composeplayground/ui/animations/MultiRingsLoader.kt

@@ -0,0 +1,124 @@
+package dev.baseio.composeplayground.ui.animations
+
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.StrokeJoin
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import dev.baseio.composeplayground.contributors.Subir
+
+@Composable
+fun MultiRingsLoader(modifier: Modifier) {
+    val infiniteTransition = rememberInfiniteTransition()
+
+    @Composable
+    fun animationState(duration: Int) = infiniteTransition.animateFloat(
+        initialValue = 360f,
+        targetValue = -360f,
+        animationSpec = infiniteRepeatable(
+            tween(
+                durationMillis = duration,
+                easing = LinearEasing
+            )
+        )
+    )
+
+    Surface(modifier.background(MaterialTheme.colors.background)) {
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Box(
+                modifier = Modifier
+                    .size(150.dp)
+                    .padding(16.dp)
+            ) {
+                //1st ring 1st circle
+                Ring(
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(120.dp),
+                    Color(0xFFFF6347),
+                    animationState(duration = 2500)
+                )
+                //2nd ring 1st circle
+                Ring(
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(120.dp),
+                    Color.Blue,
+                    animationState(duration = 2100)
+                )
+                //1st ring 2nd circle
+                Ring(
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(110.dp),
+                    Color.Cyan,
+                    animationState(duration = 1800)
+                )
+                //2nd ring 2nd circle
+                Ring(
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(110.dp),
+                    Color.Green,
+                    animationState(duration = 1700)
+                )
+                //1st ring 3rd circle
+                Ring(
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(100.dp),
+                    Color.Yellow,
+                    animationState(duration = 1600)
+                )
+                //2nd ring 3rd circle
+                Ring(
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(100.dp),
+                    Color.Magenta,
+                    animationState(duration = 1200)
+                )
+            }
+
+            Box(modifier = Modifier.fillMaxWidth()) {
+                Subir(Modifier.align(Alignment.Center))
+            }
+        }
+    }
+}
+
+@Composable
+fun Ring(modifier: Modifier, ringColor: Color, positionState: State<Float>) {
+    Canvas(
+        modifier = modifier,
+        onDraw = {
+            drawArc(
+                color = ringColor,
+                style = Stroke(
+                    width = 5f,
+                    cap = StrokeCap.Round,
+                    join = StrokeJoin.Round,
+                ),
+                startAngle = positionState.value,
+                sweepAngle = 360 / 4f,
+                useCenter = false
+            )
+        })
+}
+
+@Preview
+@Composable
+fun MultiRingsLoaderPreview() {
+    MultiRingsLoader(modifier = Modifier)
+}

app/src/main/java/dev/baseio/composeplayground/ui/animations/PlayPauseAnimation.kt

@@ -0,0 +1,163 @@
+package dev.baseio.composeplayground.ui.animations
+
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.*
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.graphics.drawscope.clipPath
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import dev.baseio.composeplayground.contributors.Subir
+import kotlinx.coroutines.launch
+
+@Composable
+fun PlayPauseAnimation(modifier: Modifier) {
+    Surface(
+        modifier
+            .background(MaterialTheme.colors.background)
+    ) {
+        val coroutineScope = rememberCoroutineScope()
+        // Initially the value will be 360f to make a full circle
+        val animationTargetState = remember { mutableStateOf(360f) }
+        var paused by remember { mutableStateOf(false) }
+
+        val animatedFloatState = animateFloatAsState(
+            targetValue = animationTargetState.value,
+            animationSpec = tween(1200, easing = LinearEasing)
+        )
+
+        val sweepAngle by animateFloatAsState(
+            targetValue = animationTargetState.value,
+            animationSpec = tween(1500)
+        )
+
+        val playAnim by animateFloatAsState(
+            targetValue = if (paused) 0f else 1f,
+            animationSpec = tween(600)
+        )
+
+        val pauseAnim by animateFloatAsState(
+            targetValue = if (paused) 1f else 0f,
+            animationSpec = tween(800)
+        )
+
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Box(
+                Modifier
+                    .size(180.dp)
+                    .padding(24.dp)
+            ) {
+                Canvas(modifier = Modifier
+                    .align(Alignment.Center)
+                    .size(150.dp)
+                    .clickable(enabled = true, onClickLabel = null, role = null, onClick = {
+                        coroutineScope.launch {
+                            paused = !paused
+                            animationTargetState.value = if (animationTargetState.value != 360f) {
+                                360f
+                            } else {
+                                -360f
+                            }
+                        }
+                    }), onDraw = {
+                    drawArc(
+                        color =
+                        Color(0xFFFF6347),
+                        style = Stroke(
+                            width = 15f,
+                            cap = StrokeCap.Round,
+                            join = StrokeJoin.Round,
+                        ),
+                        startAngle = animatedFloatState.value,
+                        sweepAngle = sweepAngle,
+                        useCenter = false
+                    )
+                })
+                Play(modifier = Modifier
+                    .align(Alignment.Center)
+                    .size(width = 60.dp, height = 60.dp)
+                    .alpha(playAnim)
+                    .graphicsLayer {
+                        scaleX = playAnim
+                    })
+                Row(modifier = Modifier.align(Alignment.Center)) {
+                    PauseRect(modifier = Modifier
+                        .size(width = 20.dp, height = 60.dp)
+                        .alpha(pauseAnim)
+                        .graphicsLayer {
+                            scaleX = pauseAnim
+                        })
+                    Spacer(modifier = Modifier.width(20.dp))
+                    PauseRect(modifier = Modifier
+                        .size(width = 20.dp, height = 60.dp)
+                        .alpha(pauseAnim)
+                        .graphicsLayer {
+                            scaleX = pauseAnim
+                        })
+                }
+            }
+            Box(modifier = Modifier.fillMaxWidth().height(200.dp)) {
+                Subir(Modifier.align(Alignment.Center))
+            }
+        }
+    }
+}
+
+@Composable
+fun Play(modifier: Modifier) {
+    Canvas(modifier = modifier,
+        onDraw = {
+            val trianglePath = Path()
+            trianglePath.moveTo(30f, 0f)
+            trianglePath.lineTo(30f, size.height)
+            trianglePath.lineTo(size.width, size.height / 2)
+            clipPath(
+                path = trianglePath,
+                clipOp = ClipOp.Intersect
+            ) {
+                drawPath(
+                    path = trianglePath,
+                    brush = SolidColor(Color(0xFFFF6347))
+                )
+            }
+        }
+    )
+}
+
+@Composable
+fun PauseRect(modifier: Modifier) {
+    Canvas(modifier = modifier,
+        onDraw = {
+            val rectPath = Path()
+            rectPath.moveTo(0f, 0f)
+            rectPath.lineTo(0f, size.height)
+            rectPath.lineTo(size.width, size.height)
+            rectPath.lineTo(size.width, 0f)
+            rectPath.close()
+            clipPath(
+                path = rectPath,
+                clipOp = ClipOp.Intersect
+            ) {
+                drawPath(
+                    path = rectPath,
+                    brush = SolidColor(Color(0xFFFF6347))
+                )
+            }
+        }
+    )
+}
+
+@Preview
+@Composable
+fun PlayPauseAnimationPreview() {
+    PlayPauseAnimation(Modifier)
+}