Pacman Animation [#1 Submission by Pushpal Roy]

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
@@ -54,7 +64,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 +116,11 @@ class MainActivity : ComponentActivity() {
                         BellAnimation(Modifier.align(Alignment.Center))
                       }
                     }
+                    10 -> {
+                      Box(modifier = Modifier.fillMaxSize()) {
+                        Pacman(Modifier.align(Alignment.Center))
+                      }
+                    }
                   }
                 }
                 HorizontalPagerIndicator(

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()
+  }
+}

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

@@ -0,0 +1,128 @@
+package dev.baseio.composeplayground.ui.animations.pacman
+
+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
+import dev.baseio.composeplayground.ui.animations.offGray
+
+@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))
+      }
+    }
+  }
+}

app/src/main/res/values/strings.xml

@@ -2,6 +2,8 @@
     <string name="app_name">Compose Playground</string>
     <string name="emp_mmh0158">Anmol Verma</string>
     <string name="emp_mmh0158_email">anmol.verma@mutualmobile.com\nanmol.verma4@gmail.com</string>
+    <string name="emp_mmh0230">Pushpal Roy</string>
+    <string name="emp_mmh0230_email">pushpal.roy@mutualmobile.com\npushplaroy2007@gmail.com</string>
     <string name="loading">LOADING</string>
     <string name="sun_moon"><![CDATA[Sun & Moon]]></string>
 </resources>