From 5cceb09380d436fec812ba1d6d14956e5a07b3b8 Mon Sep 17 00:00:00 2001 From: Pushpal Roy Date: Wed, 16 Mar 2022 15:14:10 +0530 Subject: [PATCH 1/2] Add pacman animation --- .../baseio/composeplayground/MainActivity.kt | 7 +- .../contributors/PushpalRoy.kt | 48 +++++++ .../composeplayground/ui/animations/Pacman.kt | 127 ++++++++++++++++++ app/src/main/res/values/strings.xml | 2 + 4 files changed, 183 insertions(+), 1 deletion(-) create mode 100644 app/src/main/java/dev/baseio/composeplayground/contributors/PushpalRoy.kt create mode 100644 app/src/main/java/dev/baseio/composeplayground/ui/animations/Pacman.kt diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index 1b20171..6a3000b 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -54,7 +54,7 @@ class MainActivity : ComponentActivity() { modifier = Modifier .weight(1f) .fillMaxWidth(), - count = 10, state = pagerState, + count = 11, state = pagerState, ) { page -> // Our page content when (page) { @@ -106,6 +106,11 @@ class MainActivity : ComponentActivity() { BellAnimation(Modifier.align(Alignment.Center)) } } + 10 -> { + Box(modifier = Modifier.fillMaxSize()) { + Pacman(Modifier.align(Alignment.Center)) + } + } } } HorizontalPagerIndicator( diff --git a/app/src/main/java/dev/baseio/composeplayground/contributors/PushpalRoy.kt b/app/src/main/java/dev/baseio/composeplayground/contributors/PushpalRoy.kt new file mode 100644 index 0000000..e42adf6 --- /dev/null +++ b/app/src/main/java/dev/baseio/composeplayground/contributors/PushpalRoy.kt @@ -0,0 +1,48 @@ +package dev.baseio.composeplayground.contributors + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.material.MaterialTheme +import androidx.compose.material.Surface +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import dev.baseio.composeplayground.R +import dev.baseio.composeplayground.ui.theme.Typography + +const val pushpalRoyImageUrl = "https://ca.slack-edge.com/T02TLUWLZ-US7QYGQL9-2bba9d14df28-512" + +@Composable +fun PushpalRoy(modifier: Modifier = Modifier) { + Row(verticalAlignment = Alignment.CenterVertically, modifier = modifier.padding(4.dp)) { + CoilImageBox(Modifier.size(64.dp), pushpalRoyImageUrl) + Column(verticalArrangement = Arrangement.Center, modifier = Modifier.padding(8.dp)) { + Text( + modifier = Modifier.padding(bottom = 6.dp), + text = stringResource(id = R.string.emp_mmh0230), + style = Typography.h6.copy(MaterialTheme.colors.onSurface), + ) + Text( + text = stringResource(id = R.string.emp_mmh0230_email), + style = Typography.body2.copy(MaterialTheme.colors.onSurface), + color = Color(0xFFCACACA) + ) + } + } +} + +@Preview("Pushpal Roy Preview") +@Composable +fun PreviewPushpalRoy() { + Surface { + PushpalRoy() + } +} \ No newline at end of file diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/Pacman.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/Pacman.kt new file mode 100644 index 0000000..937cc99 --- /dev/null +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/Pacman.kt @@ -0,0 +1,127 @@ +package dev.baseio.composeplayground.ui.animations + +import androidx.compose.animation.core.LinearEasing +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.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.material.Surface +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +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.Brush +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.SolidColor +import androidx.compose.ui.graphics.drawscope.Fill +import dev.baseio.composeplayground.contributors.PushpalRoy + +@Composable +fun Pacman(modifier: Modifier) { + + val infiniteTransition = rememberInfiniteTransition() + val upperJawAnim by infiniteTransition.animateFloat( + initialValue = 360f, + targetValue = 300f, + animationSpec = infiniteRepeatable( + animation = tween(300, easing = LinearEasing), + repeatMode = RepeatMode.Reverse + ) + ) + val lowerJawAnim by infiniteTransition.animateFloat( + initialValue = 0f, + targetValue = 30f, + animationSpec = infiniteRepeatable( + animation = tween(300, easing = LinearEasing), + repeatMode = RepeatMode.Reverse + ) + ) + val foodAnim1 by infiniteTransition.animateFloat( + initialValue = 1000f, + targetValue = 690f, + animationSpec = infiniteRepeatable( + animation = tween(1200, easing = LinearEasing), + repeatMode = RepeatMode.Restart + ) + ) + val foodAnim2 by infiniteTransition.animateFloat( + initialValue = 1200f, + targetValue = 890f, + animationSpec = infiniteRepeatable( + animation = tween(durationMillis = 1200, easing = LinearEasing), + repeatMode = RepeatMode.Restart + ) + ) + Surface { + Box( + modifier = Modifier + .fillMaxSize() + .background(offGray) + ) { + Canvas( + modifier = modifier + .fillMaxSize() + .background( + brush = Brush.linearGradient( + colors = listOf( + Color(0xFF0F1A22), + Color(0xFF162631), + Color(0xFF1B2F3D), + Color(0xFF406C9E), + ) + ) + ) + ) { + val canvasWidth = size.width + val canvasHeight = size.height + + // Pacman + drawArc( + brush = SolidColor(Color(0xFFFFD500)), + startAngle = lowerJawAnim, + sweepAngle = upperJawAnim, + useCenter = true, + topLeft = Offset(x = canvasWidth / 4, y = canvasHeight / 3), + size = Size(size.minDimension / 2, size.minDimension / 2), + style = Fill + ) + + // Eye + drawCircle( + color = Color.Black, + radius = 20f, + center = Offset(x = (canvasWidth / 4) + 300, y = (canvasHeight / 3) + 110) + ) + + // Food particle 1 + drawCircle( + color = Color(0xFFFF3D00), + radius = 25f, + center = Offset(x = foodAnim1, y = (canvasHeight / 3) + 270) + ) + + // Food particle 2 + drawCircle( + color = Color(0xFFFF3D00), + radius = 25f, + center = Offset(x = foodAnim2, y = (canvasHeight / 3) + 270) + ) + } + Box( + modifier = Modifier + .align(Alignment.BottomCenter) + .fillMaxWidth() + ) { + PushpalRoy(Modifier.align(Alignment.Center)) + } + } + } +} \ No newline at end of file diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index a144b92..0afd057 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -2,6 +2,8 @@ Compose Playground Anmol Verma anmol.verma@mutualmobile.com\nanmol.verma4@gmail.com + Pushpal Roy + pushpal.roy@mutualmobile.com\npushplaroy2007@gmail.com LOADING \ No newline at end of file From 23225053fef5aea7c966b6e1bfa47a4f2dab6609 Mon Sep 17 00:00:00 2001 From: Pushpal Roy Date: Thu, 17 Mar 2022 03:47:27 +0530 Subject: [PATCH 2/2] Refactor Pacman --- .../baseio/composeplayground/MainActivity.kt | 20 ++++++++++++++----- .../ui/animations/{ => pacman}/Pacman.kt | 3 ++- 2 files changed, 17 insertions(+), 6 deletions(-) rename app/src/main/java/dev/baseio/composeplayground/ui/animations/{ => pacman}/Pacman.kt (97%) diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index 6a3000b..111e6e0 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -7,20 +7,30 @@ import android.view.View import android.view.WindowManager import androidx.activity.ComponentActivity import androidx.activity.compose.setContent -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp -import androidx.core.view.WindowCompat -import com.google.accompanist.insets.* +import com.google.accompanist.insets.ProvideWindowInsets import com.google.accompanist.pager.ExperimentalPagerApi import com.google.accompanist.pager.HorizontalPager import com.google.accompanist.pager.HorizontalPagerIndicator import com.google.accompanist.pager.rememberPagerState -import dev.baseio.composeplayground.ui.animations.* +import dev.baseio.composeplayground.ui.animations.BellAnimation +import dev.baseio.composeplayground.ui.animations.ChatMessageReactions +import dev.baseio.composeplayground.ui.animations.GlowingRingLoader +import dev.baseio.composeplayground.ui.animations.IOSSleepSchedule +import dev.baseio.composeplayground.ui.animations.LikeAnimation +import dev.baseio.composeplayground.ui.animations.MenuToClose +import dev.baseio.composeplayground.ui.animations.ScalingRotatingLoader +import dev.baseio.composeplayground.ui.animations.YahooWeatherAndSun +import dev.baseio.composeplayground.ui.animations.pacman.Pacman import dev.baseio.composeplayground.ui.animations.planetarysystem.PlanetarySystem import dev.baseio.composeplayground.ui.animations.pulltorefresh.PullToRefreshOne import dev.baseio.composeplayground.ui.theme.ComposePlaygroundTheme diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/Pacman.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/pacman/Pacman.kt similarity index 97% rename from app/src/main/java/dev/baseio/composeplayground/ui/animations/Pacman.kt rename to app/src/main/java/dev/baseio/composeplayground/ui/animations/pacman/Pacman.kt index 937cc99..68d59e6 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/Pacman.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/pacman/Pacman.kt @@ -1,4 +1,4 @@ -package dev.baseio.composeplayground.ui.animations +package dev.baseio.composeplayground.ui.animations.pacman import androidx.compose.animation.core.LinearEasing import androidx.compose.animation.core.RepeatMode @@ -23,6 +23,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.drawscope.Fill import dev.baseio.composeplayground.contributors.PushpalRoy +import dev.baseio.composeplayground.ui.animations.offGray @Composable fun Pacman(modifier: Modifier) {