From 7630ba3a8247ec51c9a364c2bd8959821557043e Mon Sep 17 00:00:00 2001 From: subirMM Date: Mon, 14 Mar 2022 00:30:06 +0530 Subject: [PATCH 1/4] added play pause animation added contributor subir --- .../composeplayground/contributors/Subir.kt | 31 ++++ .../ui/animations/PlayPauseAnimation.kt | 163 ++++++++++++++++++ 2 files changed, 194 insertions(+) create mode 100644 app/src/main/java/dev/baseio/composeplayground/contributors/Subir.kt create mode 100644 app/src/main/java/dev/baseio/composeplayground/ui/animations/PlayPauseAnimation.kt diff --git a/app/src/main/java/dev/baseio/composeplayground/contributors/Subir.kt b/app/src/main/java/dev/baseio/composeplayground/contributors/Subir.kt new file mode 100644 index 0000000..9fbb6b8 --- /dev/null +++ b/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), + ) + } + } +} \ No newline at end of file diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/PlayPauseAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/PlayPauseAnimation.kt new file mode 100644 index 0000000..1ff5b3e --- /dev/null +++ b/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) +} \ No newline at end of file From e24acec862d1b1c2d69f41667cace7227decb714 Mon Sep 17 00:00:00 2001 From: subirMM Date: Mon, 14 Mar 2022 00:35:34 +0530 Subject: [PATCH 2/4] added run dino run animation --- .idea/misc.xml | 3 + .../baseio/composeplayground/MainActivity.kt | 12 +- .../ui/animations/RunDinoRun.kt | 146 ++++++++++++++++++ app/src/main/res/drawable/dino_idle.webp | Bin 0 -> 14550 bytes app/src/main/res/drawable/run_1.webp | Bin 0 -> 17670 bytes app/src/main/res/drawable/run_2.webp | Bin 0 -> 19034 bytes app/src/main/res/drawable/run_3.webp | Bin 0 -> 17640 bytes app/src/main/res/drawable/run_4.webp | Bin 0 -> 15346 bytes app/src/main/res/drawable/run_5.webp | Bin 0 -> 18178 bytes app/src/main/res/drawable/run_6.webp | Bin 0 -> 18798 bytes app/src/main/res/drawable/run_7.webp | Bin 0 -> 17986 bytes app/src/main/res/values/strings.xml | 2 + 12 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 app/src/main/java/dev/baseio/composeplayground/ui/animations/RunDinoRun.kt create mode 100644 app/src/main/res/drawable/dino_idle.webp create mode 100644 app/src/main/res/drawable/run_1.webp create mode 100644 app/src/main/res/drawable/run_2.webp create mode 100644 app/src/main/res/drawable/run_3.webp create mode 100644 app/src/main/res/drawable/run_4.webp create mode 100644 app/src/main/res/drawable/run_5.webp create mode 100644 app/src/main/res/drawable/run_6.webp create mode 100644 app/src/main/res/drawable/run_7.webp diff --git a/.idea/misc.xml b/.idea/misc.xml index 36a2c55..a66b5e0 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -3,6 +3,9 @@