From e67b1f03cab4a189d02e1911a4dc67cec6e338f8 Mon Sep 17 00:00:00 2001
From: Shubham Singh <shubham.singh@mutualmobile.com>
Date: Tue, 25 Oct 2022 11:24:44 +0530
Subject: [PATCH] Add BladeAnimation

---
 .idea/gradle.xml                              |   1 -
 .../baseio/composeplayground/MainActivity.kt  |   5 +-
 .../ui/animations/BladeAnimation.kt           | 243 ++++++++++++++++++
 app/src/main/res/drawable/blade.xml           |   4 +
 4 files changed, 251 insertions(+), 2 deletions(-)
 create mode 100644 app/src/main/java/dev/baseio/composeplayground/ui/animations/BladeAnimation.kt
 create mode 100644 app/src/main/res/drawable/blade.xml

diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index 526b4c2..a2d7c21 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -13,7 +13,6 @@
             <option value="$PROJECT_DIR$/app" />
           </set>
         </option>
-        <option name="resolveModulePerSourceSet" value="false" />
       </GradleProjectSettings>
     </option>
   </component>
diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt
index 7ee3217..f3555d4 100644
--- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt
+++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt
@@ -22,6 +22,7 @@ import com.google.accompanist.pager.HorizontalPager
 import com.google.accompanist.pager.rememberPagerState
 import dev.baseio.composeplayground.contributors.ShubhamSingh
 import dev.baseio.composeplayground.ui.animations.AndroidMadSkills
+import dev.baseio.composeplayground.ui.animations.BladeAnimation
 import dev.baseio.composeplayground.ui.animations.BottleLoadingAnimation
 import dev.baseio.composeplayground.ui.animations.ChatMessageReactions
 import dev.baseio.composeplayground.ui.animations.Github404
@@ -81,7 +82,8 @@ class MainActivity : ComponentActivity() {
         ) {
             HorizontalPager(
                 modifier = Modifier.fillMaxSize(),
-                count = 15, state = pagerState,
+                count = 21,
+                state = pagerState
             ) { page ->
                 // Our page content
                 when (page) {
@@ -183,6 +185,7 @@ class MainActivity : ComponentActivity() {
                             ShubhamSingh(modifier = Modifier.align(Alignment.BottomCenter))
                         }
                     }
+                    20 -> { BladeAnimation() }
                 }
             }
         }
diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/BladeAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/BladeAnimation.kt
new file mode 100644
index 0000000..55f724f
--- /dev/null
+++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/BladeAnimation.kt
@@ -0,0 +1,243 @@
+package dev.baseio.composeplayground.ui.animations
+
+import android.graphics.Matrix
+import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.keyframes
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Outline
+import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.asAndroidPath
+import androidx.compose.ui.graphics.asComposePath
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import dev.baseio.composeplayground.R
+import dev.baseio.composeplayground.contributors.ShubhamSingh
+
+@Composable
+fun BladeAnimation() {
+    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+        Surface(
+            modifier = Modifier.fillMaxSize(),
+            color = Color.Black
+        ) {
+            val density = LocalDensity.current
+            val animDuration = remember { 4000 }
+            val infiniteTransition = rememberInfiniteTransition()
+            val animatedScale by infiniteTransition.animateFloat(
+                initialValue = 1f,
+                targetValue = 0.8f,
+                animationSpec = infiniteRepeatable(
+                    animation = keyframes {
+                        durationMillis = animDuration
+                        1f at durationMillis.times(0) with FastOutSlowInEasing
+                        0.8f at durationMillis.times(0.5f).toInt() with FastOutSlowInEasing
+                        1f at durationMillis
+                    }
+                )
+            )
+            val animatedBladeScale by infiniteTransition.animateFloat(
+                initialValue = 0f,
+                targetValue = 1f,
+                animationSpec = infiniteRepeatable(
+                    animation = keyframes {
+                        durationMillis = animDuration
+                        0f at durationMillis.times(0)
+                        0f at durationMillis.times(0.6f).toInt() with FastOutSlowInEasing
+                        1f at durationMillis.times(0.8f).toInt()
+                        1f at durationMillis
+                    },
+                    repeatMode = RepeatMode.Reverse
+                )
+            )
+            val animatedRotation by infiniteTransition.animateFloat(
+                initialValue = 360f,
+                targetValue = 0f,
+                animationSpec = infiniteRepeatable(
+                    animation = keyframes {
+                        durationMillis = animDuration
+                        360f at durationMillis.times(0) with FastOutSlowInEasing
+                        0f at durationMillis.times(0.5f).toInt() with FastOutSlowInEasing
+                        360f.times(2) at durationMillis
+                    }
+                )
+            )
+            val baseOrange = remember { Color(0xFFCD453F) }
+            val bgDarkOrange = remember { Color(0xFF170C0A) }
+            val screenHeightDp = LocalConfiguration.current.screenHeightDp.dp
+            Box(
+                modifier = Modifier.graphicsLayer {
+                    rotationZ = animatedRotation
+                    scaleX = animatedScale
+                    scaleY = animatedScale
+                },
+                contentAlignment = Alignment.Center
+            ) {
+                Canvas(modifier = Modifier, onDraw = {
+                    drawCircle(
+                        color = bgDarkOrange,
+                        center = center,
+                        radius = screenHeightDp.toPx().times(animatedBladeScale)
+                    )
+                    drawIntoCanvas {
+                        it.drawCircle(
+                            center = center,
+                            radius = 100.dp.toPx(),
+                            paint = Paint().apply {
+                                asFrameworkPaint().setShadowLayer(
+                                    60f,
+                                    0f,
+                                    0f,
+                                    Color.White
+                                        .copy(alpha = 0.3f)
+                                        .toArgb()
+                                )
+                            }
+                        )
+                    }
+                    drawCircle(
+                        color = baseOrange,
+                        radius = 90.dp.toPx()
+                    )
+                    drawCircle(
+                        color = Color.Black,
+                        radius = 64.dp.toPx(),
+                        style = Stroke(
+                            width = 3.dp.toPx()
+                        )
+                    )
+                    drawCircle(
+                        color = Color.Black,
+                        radius = 16.dp.toPx()
+                    )
+                })
+                SmallBlade(
+                    modifier = Modifier
+                        .graphicsLayer {
+                            with(density) {
+                                translationY = -70.dp.toPx()
+                                alpha = 1 - animatedBladeScale
+                            }
+                        }
+                )
+                SmallBlade(
+                    modifier = Modifier.graphicsLayer {
+                        with(density) {
+                            translationX = 64.dp.toPx()
+                            translationY = 32.dp.toPx()
+                            rotationZ = 120f
+                            alpha = 1 - animatedBladeScale
+                        }
+                    }
+                )
+                SmallBlade(
+                    modifier = Modifier.graphicsLayer {
+                        with(density) {
+                            translationX = -64.dp.toPx()
+                            translationY = 32.dp.toPx()
+                            rotationZ = 240f
+                            alpha = 1 - animatedBladeScale
+                        }
+                    }
+                )
+                Image(
+                    modifier = Modifier.size(154.dp).graphicsLayer {
+                        translationX = -4.dp.toPx()
+                        translationY = 12.dp.toPx()
+                        rotationZ = 60f
+                        scaleX = animatedBladeScale
+                        scaleY = animatedBladeScale
+                        alpha = animatedBladeScale
+                    },
+                    painter = androidx.compose.ui.res.painterResource(id = R.drawable.blade),
+                    contentDescription = null
+                )
+                Canvas(
+                    modifier = Modifier,
+                    onDraw = {
+                        drawCircle(
+                            color = baseOrange,
+                            radius = 17.dp.toPx().times(animatedBladeScale)
+                        )
+                    }
+                )
+            }
+        }
+        ShubhamSingh(modifier = Modifier.align(Alignment.BottomCenter))
+    }
+}
+
+@Composable
+private fun SmallBlade(
+    modifier: Modifier = Modifier
+) {
+    Surface(
+        modifier = Modifier
+            .size(24.dp)
+            .aspectRatio(2 / 3f)
+            .then(modifier),
+        shape = SmallBladeShape,
+        color = Color.Black
+    ) {}
+}
+
+val SmallBladeShape: Shape = object : Shape {
+    override fun createOutline(
+        size: Size,
+        layoutDirection: LayoutDirection,
+        density: Density
+    ): Outline {
+        val baseWidth = 20f
+        val baseHeight = 29f
+
+        val path = Path()
+
+        path.moveTo(10.5f, 9f)
+        path.cubicTo(11.5f, 5.5f, 13f, 3f, 17.5f, 0f)
+        path.cubicTo(10.8174f, 2.1578f, 4.3327f, 7.1003f, 1.1606f, 14.3197f)
+        path.cubicTo(0.4197f, 15.7161f, 0f, 17.309f, 0f, 19f)
+        path.cubicTo(0f, 24.5228f, 4.4772f, 29f, 10f, 29f)
+        path.cubicTo(15.5228f, 29f, 20f, 24.5228f, 20f, 19f)
+        path.cubicTo(20f, 13.6393f, 15.7819f, 9.2638f, 10.4837f, 9.0115f)
+        path.lineTo(10.5f, 9f)
+        path.close()
+
+        return Outline.Generic(
+            path
+                .asAndroidPath()
+                .apply {
+                    transform(
+                        Matrix().apply {
+                            setScale(size.width / baseWidth, size.height / baseHeight)
+                        }
+                    )
+                }
+                .asComposePath()
+        )
+    }
+}
diff --git a/app/src/main/res/drawable/blade.xml b/app/src/main/res/drawable/blade.xml
new file mode 100644
index 0000000..636290d
--- /dev/null
+++ b/app/src/main/res/drawable/blade.xml
@@ -0,0 +1,4 @@
+<vector android:height="192.88026dp" android:viewportHeight="298"
+    android:viewportWidth="309" android:width="200dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#000000" android:fillType="evenOdd" android:pathData="M18.16,2.93C18.54,4.81 18.98,7.62 19,9.5C19.62,11.24 20.01,14 20.48,15.91C21,18 21.5,19.5 22.09,21.07C22.15,24.96 29.46,40.59 35.76,50.28C40.73,57.93 58.02,74.93 60.83,74.93C61.26,74.93 63.18,76.12 65.09,77.58C67.01,79.03 69.93,80.56 71.59,80.98C73.25,81.39 74.87,82.17 75.2,82.7C75.53,83.23 76.64,83.67 77.65,83.68C78.67,83.68 80.91,84.42 82.63,85.32C84.35,86.22 86.81,86.96 88.1,86.96C89.38,86.97 92.84,87.71 95.8,88.6C102.72,90.7 116.71,90.69 122.67,88.59C125.23,87.69 128.28,86.95 129.45,86.95C130.63,86.95 135.85,84.8 141.06,82.18C153.88,75.72 154.59,75.31 165.84,67.93C186.04,54.67 185.64,54.91 199.54,48.04C201.24,47.2 203.31,46.51 204.14,46.51C204.98,46.51 207.27,45.83 209.25,45C221.2,39.96 247.22,38.11 257.1,41.59C259.65,42.5 262.87,43.23 264.25,43.23C265.63,43.23 268.15,43.93 269.85,44.78C271.55,45.63 274.91,47.23 277.32,48.33C288.38,53.41 305.18,69.66 305.18,75.27C305.18,76.14 305.87,77.41 306.7,78.11C310.79,81.49 308.83,88.24 304.66,85.19C303.52,84.35 301.68,83.67 300.59,83.67C299.49,83.67 297.74,83.24 296.7,82.71C273.79,71.16 231.81,76.67 207.92,94.36C196.5,102.81 182.78,117.99 182.78,122.17C182.78,123 182.21,124.25 181.5,124.95C174.57,131.88 171.72,157.74 174.6,187.68C175.85,200.69 175.96,206.59 175.1,212.27C174.47,216.38 173.66,222.69 173.3,226.29C172.95,229.9 172.28,233.34 171.83,233.95C171.38,234.55 170.65,236.74 170.2,238.83C169.75,240.91 168.99,243.37 168.51,244.29C168.03,245.21 166.09,249.27 164.2,253.31C155.53,271.88 131.46,294.6 120.46,294.6C119.42,294.6 116.8,295.34 114.64,296.24C110.01,298.18 88.25,298.57 87.12,296.74C86.73,296.11 89.04,293.28 92.25,290.45C125.99,260.72 137.92,226.18 127.45,188.59C126.53,185.28 125.08,181.19 124.23,179.49C123.37,177.78 122.67,175.95 122.67,175.4C122.67,170.86 102.21,147.54 94.65,143.47C91.67,141.86 72.96,132.08 60.92,125.83C27.85,108.66 12.25,91.18 2.02,59.84C-0.65,51.64 -0.68,27.97 1.97,21.86C3,19.49 4.37,16.32 5,14.82C10.53,1.73 16.79,-3.92 18.16,2.93Z"/>
+</vector>