Add BladeAnimation

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

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

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>