From fb962c4d28e25a9d4326066979fed03ab78a0c54 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Fri, 18 Mar 2022 16:41:27 +0530 Subject: [PATCH 01/20] Added Contributor card --- .../contributors/AdityaBhawsar.kt | 31 +++++++++++++++++++ app/src/main/res/values/strings.xml | 2 ++ 2 files changed, 33 insertions(+) create mode 100644 app/src/main/java/dev/baseio/composeplayground/contributors/AdityaBhawsar.kt diff --git a/app/src/main/java/dev/baseio/composeplayground/contributors/AdityaBhawsar.kt b/app/src/main/java/dev/baseio/composeplayground/contributors/AdityaBhawsar.kt new file mode 100644 index 0000000..bafb289 --- /dev/null +++ b/app/src/main/java/dev/baseio/composeplayground/contributors/AdityaBhawsar.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 adityaImageUrl = "https://ca.slack-edge.com/T02TLUWLZ-U02CDNRLMSA-4aa8ad906c93-72" + +@Composable +fun AdityaBhawsar(modifier: Modifier = Modifier) { + Row(verticalAlignment = Alignment.CenterVertically, modifier = modifier.padding(4.dp)) { + CoilImageBox(Modifier.size(64.dp), adityaImageUrl) + Column(verticalArrangement = Arrangement.Center, modifier = Modifier.padding(8.dp)) { + Text( + text = stringResource(id = R.string.emp_mmh0329), + style = Typography.h6.copy(MaterialTheme.colors.onSurface), + ) + Text( + text = stringResource(id = R.string.emp_mmh0329_email), + style = Typography.subtitle1.copy(MaterialTheme.colors.onSurface), + ) + } + } +} \ 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..4857007 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 + Aditya Bhawsar + aditya.bhawsar@mutualmobile.com\naditya.bhawsar.work@gmail.com LOADING \ No newline at end of file From 57138ea6f506f054861559bd641f8ec31e8e4a17 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Fri, 18 Mar 2022 16:48:44 +0530 Subject: [PATCH 02/20] fixed import --- .../baseio/composeplayground/contributors/AdityaBhawsar.kt | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/src/main/java/dev/baseio/composeplayground/contributors/AdityaBhawsar.kt b/app/src/main/java/dev/baseio/composeplayground/contributors/AdityaBhawsar.kt index bafb289..234ac13 100644 --- a/app/src/main/java/dev/baseio/composeplayground/contributors/AdityaBhawsar.kt +++ b/app/src/main/java/dev/baseio/composeplayground/contributors/AdityaBhawsar.kt @@ -1,6 +1,10 @@ package dev.baseio.composeplayground.contributors -import androidx.compose.foundation.layout.* +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.Text import androidx.compose.runtime.Composable From 6ef93e820249b19b6a5e3117278c10ab99eac6ad Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 2 Apr 2022 00:51:45 +0530 Subject: [PATCH 03/20] Added Mic Animation --- .../baseio/composeplayground/MainActivity.kt | 5 +- .../ui/animations/MicAnimation.kt | 144 ++++++++++++++++++ app/src/main/res/drawable/ic_mic_white_40.xml | 5 + 3 files changed, 153 insertions(+), 1 deletion(-) create mode 100644 app/src/main/java/dev/baseio/composeplayground/ui/animations/MicAnimation.kt create mode 100644 app/src/main/res/drawable/ic_mic_white_40.xml diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index 512a952..2e7ffba 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -55,10 +55,13 @@ class MainActivity : ComponentActivity() { modifier = Modifier .weight(1f) .fillMaxWidth(), - count = 12, state = pagerState, + count = 13, state = pagerState, ) { page -> // Our page content when (page) { + 12 -> { + MicAnimation() + } 4 -> { PullToRefreshOne() } diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/MicAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/MicAnimation.kt new file mode 100644 index 0000000..315c70c --- /dev/null +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/MicAnimation.kt @@ -0,0 +1,144 @@ +package dev.baseio.composeplayground.ui.animations + +import dev.baseio.composeplayground.contributors.AdityaBhawsar +import androidx.compose.animation.core.* +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.Canvas +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material.* +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.alpha +import androidx.compose.ui.draw.scale +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import dev.baseio.composeplayground.R + +@Composable +fun MicAnimation(modifier: Modifier = Modifier) { + + val alphaCircle = remember { Animatable(0f) } + val scaleFactorLightGreyBg = remember { Animatable(1f) } + val scaleFactorGreyBg = remember { Animatable(1f) } + val scaleFactorRedBg = remember { Animatable(1f) } + + LaunchedEffect(alphaCircle){ + alphaCircle.animateTo( + targetValue = 1f, + animationSpec = infiniteRepeatable( + tween(1500, easing = LinearEasing), + repeatMode = RepeatMode.Reverse + ) + ) + } + + LaunchedEffect(scaleFactorLightGreyBg){ + scaleFactorLightGreyBg.animateTo( + targetValue = 3f, + animationSpec = infiniteRepeatable( + tween(700, easing = FastOutLinearInEasing), + repeatMode = RepeatMode.Reverse + ) + ) + } + + LaunchedEffect(scaleFactorGreyBg){ + scaleFactorGreyBg.animateTo( + targetValue = 2f, + animationSpec = infiniteRepeatable( + tween(1000, easing = LinearOutSlowInEasing), + repeatMode = RepeatMode.Reverse + ) + ) + } + + LaunchedEffect(scaleFactorRedBg){ + scaleFactorRedBg.animateTo( + targetValue = 1.2f, + animationSpec = infiniteRepeatable( + tween(500, easing = FastOutSlowInEasing), + repeatMode = RepeatMode.Reverse + ) + ) + } + + Box( + modifier + .fillMaxSize() + .background(Color.Black) + ) { + + Surface( + shape = CircleShape, + color = Color.Black, + border = BorderStroke(3.dp, Color.LightGray), + modifier = Modifier + .size(210.dp) + .alpha(alphaCircle.value) + .align(Alignment.Center) + ) {} + + Canvas( + modifier = Modifier + .size(70.dp) + .align(Alignment.Center) + .scale(scaleFactorLightGreyBg.value) + .alpha(0.3f), + onDraw = { + drawCircle(color = Color.LightGray) + } + ) + + Canvas( + modifier = Modifier + .size(70.dp) + .align(Alignment.Center) + .scale(scaleFactorGreyBg.value), + onDraw = { + drawCircle(color = Color.Gray) + } + ) + + Canvas( + modifier = Modifier + .size(70.dp) + .align(Alignment.Center) + .scale(scaleFactorRedBg.value), + onDraw = { + drawCircle(color = Color.Red) + } + ) + + FloatingActionButton( + onClick = {}, + content = { + Icon( + painter = androidx.compose.ui.res.painterResource(id = R.drawable.ic_mic_white_40), + contentDescription = "Mic" + ) + }, + elevation = FloatingActionButtonDefaults.elevation(0.dp), + backgroundColor = Color.Red, + contentColor = Color.White, + modifier = Modifier + .size(70.dp) + .align(Alignment.Center) + .scale(1f) + ) + + Box( + modifier = Modifier + .fillMaxWidth() + .padding(12.dp) + .align(Alignment.BottomEnd) + ) { + AdityaBhawsar( + Modifier + .align(Alignment.Center) + .background(Color.LightGray)) + } + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/ic_mic_white_40.xml b/app/src/main/res/drawable/ic_mic_white_40.xml new file mode 100644 index 0000000..b152428 --- /dev/null +++ b/app/src/main/res/drawable/ic_mic_white_40.xml @@ -0,0 +1,5 @@ + + + From 313a0d09671c0d81aa9a91bba5ff2a202d8c3308 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 2 Apr 2022 08:56:37 +0530 Subject: [PATCH 04/20] Added background --- .../baseio/composeplayground/MainActivity.kt | 7 ++- .../ui/animations/BreatheAnimation.kt | 51 +++++++++++++++++++ 2 files changed, 56 insertions(+), 2 deletions(-) create mode 100644 app/src/main/java/dev/baseio/composeplayground/ui/animations/BreatheAnimation.kt diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index 2e7ffba..388a426 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -55,10 +55,13 @@ class MainActivity : ComponentActivity() { modifier = Modifier .weight(1f) .fillMaxWidth(), - count = 13, state = pagerState, + count = 14, state = pagerState, ) { page -> // Our page content when (page) { + 0 -> { + BreatheAnimation() + } 12 -> { MicAnimation() } @@ -80,7 +83,7 @@ class MainActivity : ComponentActivity() { IOSSleepSchedule() } } - 0 -> { + 13 -> { TwitterSplashAnimation() } 11 -> { diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/BreatheAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/BreatheAnimation.kt new file mode 100644 index 0000000..73aaba4 --- /dev/null +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/BreatheAnimation.kt @@ -0,0 +1,51 @@ +package dev.baseio.composeplayground.ui.animations + +import dev.baseio.composeplayground.contributors.AdityaBhawsar +import androidx.compose.animation.core.* +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.Canvas +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material.* +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.alpha +import androidx.compose.ui.draw.scale +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import dev.baseio.composeplayground.R + +@Composable +fun BreatheAnimation(modifier: Modifier = Modifier) { + + Box( + modifier + .fillMaxSize() + .background(Color.Black) + ) { + + Box( + modifier = Modifier + .fillMaxSize() + .background(Color.Black) + ) { + + + + } + + Box( + modifier = Modifier + .fillMaxWidth() + .padding(12.dp) + .align(Alignment.BottomEnd) + ) { + AdityaBhawsar( + Modifier + .align(Alignment.Center) + .background(Color.LightGray)) + } + } +} \ No newline at end of file From 57ba1231f567982573a162e5ab34dc5eeb9e0756 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 2 Apr 2022 17:06:23 +0530 Subject: [PATCH 05/20] Basic Circle Animation --- .../ui/animations/BreatheAnimation.kt | 88 +++++++++++++++++-- 1 file changed, 80 insertions(+), 8 deletions(-) diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/BreatheAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/BreatheAnimation.kt index 73aaba4..200e4da 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/BreatheAnimation.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/BreatheAnimation.kt @@ -12,8 +12,10 @@ import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha +import androidx.compose.ui.draw.rotate import androidx.compose.ui.draw.scale import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.dp import dev.baseio.composeplayground.R @@ -26,14 +28,15 @@ fun BreatheAnimation(modifier: Modifier = Modifier) { .background(Color.Black) ) { - Box( - modifier = Modifier - .fillMaxSize() - .background(Color.Black) + Column(modifier = Modifier + .fillMaxWidth() + .align(Alignment.Center), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally ) { - - - + AnimatedCircles(6) + Spacer(modifier = Modifier.padding(24.dp)) + AnimatedText() } Box( @@ -48,4 +51,73 @@ fun BreatheAnimation(modifier: Modifier = Modifier) { .background(Color.LightGray)) } } -} \ No newline at end of file +} + +@Composable +fun AnimatedCircles(numCircles :Int){ + Box(modifier = Modifier.fillMaxWidth()) { + for (circleNumber in 0 until numCircles){ + AnimatedCircle( + modifier = Modifier + .padding(16.dp) + .align(Alignment.Center), + rotationQuota = 360f/numCircles, + circleNumber = circleNumber + ) + } + } +} + +@Composable +fun AnimatedCircle( + modifier: Modifier, + rotationQuota : Float, + circleNumber : Int +){ + + val circleRotation = remember { Animatable(0f) } + val circleScale = remember { Animatable(0.1f) } + + LaunchedEffect(circleRotation){ + circleRotation.animateTo( + targetValue = rotationQuota * circleNumber, + animationSpec = infiniteRepeatable( + tween(5000, easing = LinearEasing), + repeatMode = RepeatMode.Reverse + ) + ) + } + + LaunchedEffect(circleScale){ + circleScale.animateTo( + targetValue = 1f, + animationSpec = infiniteRepeatable( + tween(5000, easing = LinearEasing), + repeatMode = RepeatMode.Reverse + ) + ) + } + + Column(modifier = modifier + .rotate(circleRotation.value) + .scale(circleScale.value), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally + ) { + Canvas(modifier = Modifier + .size(120.dp) + .alpha(0.3f)){ + drawCircle(color = Color.Cyan) + } + Canvas(modifier = Modifier + .size(125.dp) + .alpha(0f)){ + drawRect(color = Color.Red) + } + } +} + +@Composable +fun AnimatedText() { + Text(text = "Breathe In...", style = TextStyle(color = Color.LightGray)) +} From ae4af406e371f6bc718b71194d8962a9033dc289 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 2 Apr 2022 19:18:58 +0530 Subject: [PATCH 06/20] Added CircleSquareAnimation.kt --- .../baseio/composeplayground/MainActivity.kt | 5 +- .../ui/animations/CircleSquareAnimation.kt | 159 ++++++++++++++++++ 2 files changed, 163 insertions(+), 1 deletion(-) create mode 100644 app/src/main/java/dev/baseio/composeplayground/ui/animations/CircleSquareAnimation.kt diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index 2e7ffba..aa88516 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -55,7 +55,7 @@ class MainActivity : ComponentActivity() { modifier = Modifier .weight(1f) .fillMaxWidth(), - count = 13, state = pagerState, + count = 14, state = pagerState, ) { page -> // Our page content when (page) { @@ -81,6 +81,9 @@ class MainActivity : ComponentActivity() { } } 0 -> { + CircleSquareAnimation() + } + 13 -> { TwitterSplashAnimation() } 11 -> { diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/CircleSquareAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/CircleSquareAnimation.kt new file mode 100644 index 0000000..28840a1 --- /dev/null +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/CircleSquareAnimation.kt @@ -0,0 +1,159 @@ +package dev.baseio.composeplayground.ui.animations + +import androidx.compose.animation.core.Animatable +import androidx.compose.animation.core.AnimationVector1D +import androidx.compose.animation.core.FastOutSlowInEasing +import androidx.compose.animation.core.tween +import androidx.compose.foundation.Canvas +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.rotate +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.geometry.Size +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import dev.baseio.composeplayground.contributors.AdityaBhawsar +import kotlinx.coroutines.CoroutineScope +import kotlinx.coroutines.delay +import kotlinx.coroutines.launch + +@Composable +fun CircleSquareAnimation(modifier: Modifier = Modifier) { + + val rotationBox = remember { + Animatable(0f) + } + val rotationCircle = remember { + Animatable(0f) + } + + LaunchedEffect(key1 = true){ + runAnimation( + coroutineScope = this, + rotationBox = rotationBox, + rotationCircle = rotationCircle + ) + } + + Box( + modifier + .fillMaxSize() + .background(Color.Black) + ) { + + Row(modifier = Modifier + .size(300.dp) + .rotate(rotationBox.value) + .align(Alignment.Center)) { + Column(modifier = Modifier + .fillMaxHeight() + .fillMaxWidth(0.5f)) { + Canvas(modifier = Modifier + .fillMaxHeight(0.5f) + .fillMaxWidth() + .rotate(rotationCircle.value) + .padding(12.dp), onDraw = { + drawCircle(Color.White) + drawRect( + color = Color.Black, + topLeft = Offset(size.width/2, size.height/2), + size = Size(size.width/2, size.height/2) + ) + }) + Canvas(modifier = Modifier + .fillMaxHeight() + .fillMaxWidth() + .rotate(rotationCircle.value) + .padding(12.dp), onDraw = { + drawCircle(Color.White) + drawRect( + color = Color.Black, + topLeft = Offset(size.width/2, 0f), + size = Size(size.width/2, size.height/2) + ) + }) + } + Column(modifier = Modifier + .fillMaxHeight() + .fillMaxWidth()) { + Canvas(modifier = Modifier + .fillMaxHeight(0.5f) + .fillMaxWidth() + .rotate(rotationCircle.value) + .padding(12.dp), onDraw = { + drawCircle(Color.White) + drawRect( + color = Color.Black, + topLeft = Offset(0f, size.height/2), + size = Size(size.width/2, size.height/2) + ) + }) + Canvas(modifier = Modifier + .fillMaxHeight() + .fillMaxWidth() + .rotate(rotationCircle.value) + .padding(12.dp), onDraw = { + drawCircle(Color.White) + drawRect( + color = Color.Black, + topLeft = Offset(0f, 0f), + size = Size(size.width/2, size.height/2) + ) + }) + } + } + + Box( + modifier = Modifier + .fillMaxWidth() + .padding(12.dp) + .align(Alignment.BottomEnd) + ) { + AdityaBhawsar( + Modifier + .align(Alignment.Center) + .background(Color.LightGray)) + } + } +} + +fun runAnimation( + coroutineScope: CoroutineScope, + rotationBox: Animatable, + rotationCircle: Animatable +){ + coroutineScope.launch { + + delay(1000) + + rotationBox.animateTo( + 90f, + tween(easing = FastOutSlowInEasing, durationMillis = 1000) + ) + + delay(500) + + coroutineScope.launch { + rotationBox.animateTo( + 0f, + tween(easing = FastOutSlowInEasing, durationMillis = 1000) + ) + } + + rotationCircle.animateTo( + 360f, + tween(easing = FastOutSlowInEasing, durationMillis = 1000) + ) + + rotationCircle.snapTo(0f) + + runAnimation( + coroutineScope = this, + rotationBox = rotationBox, + rotationCircle = rotationCircle + ) + } +} \ No newline at end of file From 81469d6b6e0f0b077bd6f52571b86166915a4183 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 2 Apr 2022 19:19:45 +0530 Subject: [PATCH 07/20] Rearranged Animations --- .../main/java/dev/baseio/composeplayground/MainActivity.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index aa88516..10a392a 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -80,10 +80,10 @@ class MainActivity : ComponentActivity() { IOSSleepSchedule() } } - 0 -> { + 13-> { CircleSquareAnimation() } - 13 -> { + 0 -> { TwitterSplashAnimation() } 11 -> { From 71e858e6e354e87354f559f18c4e62563c7f5cc5 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 2 Apr 2022 21:40:10 +0530 Subject: [PATCH 08/20] Added breathe animation --- .../baseio/composeplayground/MainActivity.kt | 8 +- .../ui/animations/BreatheAnimation.kt | 123 --------- .../adityabhawsar/BreatheAnimation.kt | 238 ++++++++++++++++++ .../{ => adityabhawsar}/MicAnimation.kt | 0 4 files changed, 245 insertions(+), 124 deletions(-) delete mode 100644 app/src/main/java/dev/baseio/composeplayground/ui/animations/BreatheAnimation.kt create mode 100644 app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheAnimation.kt rename app/src/main/java/dev/baseio/composeplayground/ui/animations/{ => adityabhawsar}/MicAnimation.kt (100%) diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index c2a990e..02331f8 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -64,7 +64,7 @@ class MainActivity : ComponentActivity() { ) { HorizontalPager( modifier = Modifier.fillMaxSize(), - count = 15, state = pagerState, + count = 17, state = pagerState, ) { page -> // Our page content when (page) { @@ -95,6 +95,12 @@ class MainActivity : ComponentActivity() { 14 -> { ShootingStarsAnimation() } + 15 -> { + BreatheAnimation() + } + 16 -> { + MicAnimation() + } 0 -> { NetflixIntroAnimation() } diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/BreatheAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/BreatheAnimation.kt deleted file mode 100644 index 200e4da..0000000 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/BreatheAnimation.kt +++ /dev/null @@ -1,123 +0,0 @@ -package dev.baseio.composeplayground.ui.animations - -import dev.baseio.composeplayground.contributors.AdityaBhawsar -import androidx.compose.animation.core.* -import androidx.compose.foundation.BorderStroke -import androidx.compose.foundation.Canvas -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* -import androidx.compose.foundation.shape.CircleShape -import androidx.compose.material.* -import androidx.compose.runtime.* -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.alpha -import androidx.compose.ui.draw.rotate -import androidx.compose.ui.draw.scale -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.unit.dp -import dev.baseio.composeplayground.R - -@Composable -fun BreatheAnimation(modifier: Modifier = Modifier) { - - Box( - modifier - .fillMaxSize() - .background(Color.Black) - ) { - - Column(modifier = Modifier - .fillMaxWidth() - .align(Alignment.Center), - verticalArrangement = Arrangement.Center, - horizontalAlignment = Alignment.CenterHorizontally - ) { - AnimatedCircles(6) - Spacer(modifier = Modifier.padding(24.dp)) - AnimatedText() - } - - Box( - modifier = Modifier - .fillMaxWidth() - .padding(12.dp) - .align(Alignment.BottomEnd) - ) { - AdityaBhawsar( - Modifier - .align(Alignment.Center) - .background(Color.LightGray)) - } - } -} - -@Composable -fun AnimatedCircles(numCircles :Int){ - Box(modifier = Modifier.fillMaxWidth()) { - for (circleNumber in 0 until numCircles){ - AnimatedCircle( - modifier = Modifier - .padding(16.dp) - .align(Alignment.Center), - rotationQuota = 360f/numCircles, - circleNumber = circleNumber - ) - } - } -} - -@Composable -fun AnimatedCircle( - modifier: Modifier, - rotationQuota : Float, - circleNumber : Int -){ - - val circleRotation = remember { Animatable(0f) } - val circleScale = remember { Animatable(0.1f) } - - LaunchedEffect(circleRotation){ - circleRotation.animateTo( - targetValue = rotationQuota * circleNumber, - animationSpec = infiniteRepeatable( - tween(5000, easing = LinearEasing), - repeatMode = RepeatMode.Reverse - ) - ) - } - - LaunchedEffect(circleScale){ - circleScale.animateTo( - targetValue = 1f, - animationSpec = infiniteRepeatable( - tween(5000, easing = LinearEasing), - repeatMode = RepeatMode.Reverse - ) - ) - } - - Column(modifier = modifier - .rotate(circleRotation.value) - .scale(circleScale.value), - verticalArrangement = Arrangement.Center, - horizontalAlignment = Alignment.CenterHorizontally - ) { - Canvas(modifier = Modifier - .size(120.dp) - .alpha(0.3f)){ - drawCircle(color = Color.Cyan) - } - Canvas(modifier = Modifier - .size(125.dp) - .alpha(0f)){ - drawRect(color = Color.Red) - } - } -} - -@Composable -fun AnimatedText() { - Text(text = "Breathe In...", style = TextStyle(color = Color.LightGray)) -} diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheAnimation.kt new file mode 100644 index 0000000..0707e72 --- /dev/null +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheAnimation.kt @@ -0,0 +1,238 @@ +package dev.baseio.composeplayground.ui.animations + +import dev.baseio.composeplayground.contributors.AdityaBhawsar +import androidx.compose.animation.core.* +import androidx.compose.foundation.Canvas +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.material.* +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.alpha +import androidx.compose.ui.draw.rotate +import androidx.compose.ui.draw.scale +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import kotlinx.coroutines.CoroutineScope +import kotlinx.coroutines.delay +import kotlinx.coroutines.launch + +@Composable +fun BreatheAnimation(modifier: Modifier = Modifier) { + + Box( + modifier + .fillMaxSize() + .background(Color.Black) + ) { + + Column( + modifier = Modifier + .fillMaxWidth() + .align(Alignment.Center), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally + ) { + AnimatedCircles(6) + Spacer(modifier = Modifier.padding(24.dp)) + AnimatedText() + } + + Box( + modifier = Modifier + .fillMaxWidth() + .padding(12.dp) + .align(Alignment.BottomEnd) + ) { + AdityaBhawsar( + Modifier + .align(Alignment.Center) + .background(Color.LightGray) + ) + } + } +} + +@Composable +fun AnimatedCircles(numCircles: Int) { + Box(modifier = Modifier.fillMaxWidth()) { + for (circleNumber in 0 until numCircles) { + AnimatedCircle( + modifier = Modifier + .padding(16.dp) + .align(Alignment.Center), + rotationQuota = 360f / numCircles, + circleNumber = circleNumber + ) + } + } +} + +@Composable +fun AnimatedCircle( + modifier: Modifier, + rotationQuota: Float, + circleNumber: Int +) { + + val circleRotation = remember { Animatable(0f) } + val circleScale = remember { Animatable(0.1f) } + + LaunchedEffect(key1 = true) { + runAnimatedCircleScale( + coroutineScope = this, + scaleFactor = circleScale + ) + } + + LaunchedEffect(key1 = true) { + runAnimatedCircleRotation( + coroutineScope = this, + rotationFactor = circleRotation, + rotationTarget = rotationQuota * circleNumber, + ) + } + + Column( + modifier = modifier + .rotate(circleRotation.value) + .scale(circleScale.value), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally + ) { + Canvas( + modifier = Modifier + .size(120.dp) + .alpha(0.3f) + ) { + drawCircle(color = Color.Cyan) + } + Canvas( + modifier = Modifier + .size(125.dp) + .alpha(0f) + ) { + drawRect(color = Color.Red) + } + } +} + +fun runAnimatedCircleRotation( + coroutineScope: CoroutineScope, + rotationFactor: Animatable, + rotationTarget: Float +) { + coroutineScope.launch { + + rotationFactor.animateTo( + targetValue = rotationTarget, + animationSpec = tween(5000, easing = LinearEasing) + ) + + delay(500) + + rotationFactor.animateTo( + targetValue = 0f, + animationSpec = tween(5000, easing = LinearEasing) + ) + + delay(500) + + runAnimatedCircleRotation( + coroutineScope = coroutineScope, + rotationFactor = rotationFactor, + rotationTarget = rotationTarget + ) + } + +} + +fun runAnimatedCircleScale( + coroutineScope: CoroutineScope, + scaleFactor: Animatable +) { + coroutineScope.launch { + + scaleFactor.animateTo( + targetValue = 1f, + animationSpec = tween(5000, easing = LinearEasing) + ) + + delay(500) + + scaleFactor.animateTo( + targetValue = 0.1f, + animationSpec = tween(5000, easing = LinearEasing) + ) + + delay(500) + + runAnimatedCircleScale(coroutineScope = coroutineScope, scaleFactor = scaleFactor) + } +} + +@Composable +fun AnimatedText() { + + val animatedValue = remember { Animatable(1f)} + + LaunchedEffect(key1 = true) { + runAnimationText( + coroutineScope = this, + scaleFactor = animatedValue + ) + } + + Box(modifier = Modifier.fillMaxWidth()) { + Text( + text = "Breathe Out", + textAlign = TextAlign.Center, + style = TextStyle(color = Color.LightGray, fontSize = 20.sp), + modifier = Modifier + .fillMaxWidth() + .padding(12.dp) + .align(Alignment.Center) + .alpha(if(animatedValue.value == 0.1f) 0f else animatedValue.value) + ) + Text( + text = "Breathe In", + textAlign = TextAlign.Center, + style = TextStyle(color = Color.LightGray, fontSize = 20.sp), + modifier = Modifier + .fillMaxWidth() + .padding(12.dp) + .align(Alignment.Center) + .alpha(if(animatedValue.value >= 0.7f) 0f else 1f) + .scale((1-animatedValue.value)) + ) + } + +} + +fun runAnimationText( + coroutineScope: CoroutineScope, + scaleFactor: Animatable +) { + coroutineScope.launch { + + scaleFactor.animateTo( + targetValue = 0.1f, + animationSpec = tween(5000, easing = LinearEasing) + ) + + delay(500) + + scaleFactor.animateTo( + targetValue = 1f, + animationSpec = tween(5000, easing = LinearEasing) + ) + + delay(500) + + runAnimationText(coroutineScope = coroutineScope, scaleFactor = scaleFactor) + } +} diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/MicAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/MicAnimation.kt similarity index 100% rename from app/src/main/java/dev/baseio/composeplayground/ui/animations/MicAnimation.kt rename to app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/MicAnimation.kt From e28dd64f2d896e9c59ecf21e364fcd88e49add33 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 2 Apr 2022 21:43:14 +0530 Subject: [PATCH 09/20] Added circle animation to main activity --- .../main/java/dev/baseio/composeplayground/MainActivity.kt | 6 +++++- .../animations/{ => adityabhawsar}/CircleSquareAnimation.kt | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) rename app/src/main/java/dev/baseio/composeplayground/ui/animations/{ => adityabhawsar}/CircleSquareAnimation.kt (98%) diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index 02331f8..090cdd1 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -20,6 +20,7 @@ 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.adityabhawsar.CircleSquareAnimation import dev.baseio.composeplayground.ui.animations.anmolverma.BellAnimation import dev.baseio.composeplayground.ui.animations.anmolverma.ShootingStarsAnimation import dev.baseio.composeplayground.ui.animations.anmolverma.planetarysystem.PlanetarySystem @@ -64,7 +65,7 @@ class MainActivity : ComponentActivity() { ) { HorizontalPager( modifier = Modifier.fillMaxSize(), - count = 17, state = pagerState, + count = 18, state = pagerState, ) { page -> // Our page content when (page) { @@ -101,6 +102,9 @@ class MainActivity : ComponentActivity() { 16 -> { MicAnimation() } + 17 -> { + CircleSquareAnimation() + } 0 -> { NetflixIntroAnimation() } diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/CircleSquareAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/CircleSquareAnimation.kt similarity index 98% rename from app/src/main/java/dev/baseio/composeplayground/ui/animations/CircleSquareAnimation.kt rename to app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/CircleSquareAnimation.kt index 28840a1..b186376 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/CircleSquareAnimation.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/CircleSquareAnimation.kt @@ -1,4 +1,4 @@ -package dev.baseio.composeplayground.ui.animations +package dev.baseio.composeplayground.ui.animations.adityabhawsar import androidx.compose.animation.core.Animatable import androidx.compose.animation.core.AnimationVector1D From 089c7bc677f1807e1df4c9c2d1c23dca93088479 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 2 Apr 2022 21:46:04 +0530 Subject: [PATCH 10/20] Corrected package name --- app/src/main/java/dev/baseio/composeplayground/MainActivity.kt | 2 ++ .../ui/animations/adityabhawsar/BreatheAnimation.kt | 2 +- .../ui/animations/adityabhawsar/MicAnimation.kt | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index 090cdd1..55cd2eb 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -20,7 +20,9 @@ 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.adityabhawsar.BreatheAnimation import dev.baseio.composeplayground.ui.animations.adityabhawsar.CircleSquareAnimation +import dev.baseio.composeplayground.ui.animations.adityabhawsar.MicAnimation import dev.baseio.composeplayground.ui.animations.anmolverma.BellAnimation import dev.baseio.composeplayground.ui.animations.anmolverma.ShootingStarsAnimation import dev.baseio.composeplayground.ui.animations.anmolverma.planetarysystem.PlanetarySystem diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheAnimation.kt index 0707e72..49ddf90 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheAnimation.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheAnimation.kt @@ -1,4 +1,4 @@ -package dev.baseio.composeplayground.ui.animations +package dev.baseio.composeplayground.ui.animations.adityabhawsar import dev.baseio.composeplayground.contributors.AdityaBhawsar import androidx.compose.animation.core.* diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/MicAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/MicAnimation.kt index 315c70c..05ae07d 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/MicAnimation.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/MicAnimation.kt @@ -1,4 +1,4 @@ -package dev.baseio.composeplayground.ui.animations +package dev.baseio.composeplayground.ui.animations.adityabhawsar import dev.baseio.composeplayground.contributors.AdityaBhawsar import androidx.compose.animation.core.* From ebafa7500187e89fce1b3ffcf9e632b7fe861b1a Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 9 Apr 2022 08:36:06 +0530 Subject: [PATCH 11/20] Added alarm slider animation --- .../baseio/composeplayground/MainActivity.kt | 8 +++- .../adityabhawsar/AlarmSliderAnimation.kt | 42 +++++++++++++++++++ 2 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index 55cd2eb..5cfa56a 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -20,6 +20,7 @@ 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.adityabhawsar.AlarmSliderAnimation import dev.baseio.composeplayground.ui.animations.adityabhawsar.BreatheAnimation import dev.baseio.composeplayground.ui.animations.adityabhawsar.CircleSquareAnimation import dev.baseio.composeplayground.ui.animations.adityabhawsar.MicAnimation @@ -67,7 +68,7 @@ class MainActivity : ComponentActivity() { ) { HorizontalPager( modifier = Modifier.fillMaxSize(), - count = 18, state = pagerState, + count = 19, state = pagerState, ) { page -> // Our page content when (page) { @@ -107,9 +108,12 @@ class MainActivity : ComponentActivity() { 17 -> { CircleSquareAnimation() } - 0 -> { + 18 -> { NetflixIntroAnimation() } + 0 -> { + AlarmSliderAnimation() + } 11 -> { Box(modifier = Modifier.fillMaxSize()) { Github404(Modifier) diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt new file mode 100644 index 0000000..fda6c6b --- /dev/null +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt @@ -0,0 +1,42 @@ +package dev.baseio.composeplayground.ui.animations.adityabhawsar + +import androidx.compose.foundation.Image +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.foundation.layout.padding +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.unit.dp +import dev.baseio.composeplayground.contributors.AdityaBhawsar + +@Composable +fun AlarmSliderAnimation() { + + Box(modifier = Modifier + .fillMaxSize() + .background(Color.Black)){ + + Box(modifier = Modifier + .fillMaxWidth() + .align(Alignment.Center)){ + + } + + Box( + modifier = Modifier + .fillMaxWidth() + .padding(12.dp) + .align(Alignment.BottomEnd) + ) { + AdityaBhawsar( + Modifier + .align(Alignment.Center) + .background(Color.LightGray)) + } + } + +} \ No newline at end of file From 2a3233f44f0a6e486cd686913a1fa397c98747f4 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 9 Apr 2022 08:52:16 +0530 Subject: [PATCH 12/20] Added fi splash screen --- .../baseio/composeplayground/MainActivity.kt | 8 +++-- .../adityabhawsar/BreatheAnimation.kt | 2 +- .../adityabhawsar/CircleSquareAnimation.kt | 2 +- .../adityabhawsar/FiSplashAnimation.kt | 36 +++++++++++++++++++ .../animations/adityabhawsar/MicAnimation.kt | 2 +- 5 files changed, 45 insertions(+), 5 deletions(-) create mode 100644 app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/FiSplashAnimation.kt diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index 55cd2eb..95ca644 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.rememberPagerState import dev.baseio.composeplayground.ui.animations.* import dev.baseio.composeplayground.ui.animations.adityabhawsar.BreatheAnimation import dev.baseio.composeplayground.ui.animations.adityabhawsar.CircleSquareAnimation +import dev.baseio.composeplayground.ui.animations.adityabhawsar.FiSplashAnimation import dev.baseio.composeplayground.ui.animations.adityabhawsar.MicAnimation import dev.baseio.composeplayground.ui.animations.anmolverma.BellAnimation import dev.baseio.composeplayground.ui.animations.anmolverma.ShootingStarsAnimation @@ -67,7 +68,7 @@ class MainActivity : ComponentActivity() { ) { HorizontalPager( modifier = Modifier.fillMaxSize(), - count = 18, state = pagerState, + count = 19, state = pagerState, ) { page -> // Our page content when (page) { @@ -107,9 +108,12 @@ class MainActivity : ComponentActivity() { 17 -> { CircleSquareAnimation() } - 0 -> { + 18 -> { NetflixIntroAnimation() } + 0 -> { + FiSplashAnimation() + } 11 -> { Box(modifier = Modifier.fillMaxSize()) { Github404(Modifier) diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheAnimation.kt index 49ddf90..73c4b2d 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheAnimation.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheAnimation.kt @@ -46,7 +46,7 @@ fun BreatheAnimation(modifier: Modifier = Modifier) { modifier = Modifier .fillMaxWidth() .padding(12.dp) - .align(Alignment.BottomEnd) + .align(Alignment.BottomCenter) ) { AdityaBhawsar( Modifier diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/CircleSquareAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/CircleSquareAnimation.kt index b186376..968c19a 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/CircleSquareAnimation.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/CircleSquareAnimation.kt @@ -110,7 +110,7 @@ fun CircleSquareAnimation(modifier: Modifier = Modifier) { modifier = Modifier .fillMaxWidth() .padding(12.dp) - .align(Alignment.BottomEnd) + .align(Alignment.BottomCenter) ) { AdityaBhawsar( Modifier diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/FiSplashAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/FiSplashAnimation.kt new file mode 100644 index 0000000..db185cb --- /dev/null +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/FiSplashAnimation.kt @@ -0,0 +1,36 @@ +package dev.baseio.composeplayground.ui.animations.adityabhawsar + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +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.unit.dp +import dev.baseio.composeplayground.contributors.AdityaBhawsar + +@Composable +fun FiSplashAnimation() { + + Box( + Modifier + .fillMaxSize() + .background(Color.White) + ) { + + + + Box( + modifier = Modifier + .fillMaxWidth() + .padding(12.dp) + .align(Alignment.TopCenter) + ) { + AdityaBhawsar( + Modifier + .align(Alignment.Center) + .background(Color.LightGray) + ) + } + } +} \ No newline at end of file diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/MicAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/MicAnimation.kt index 05ae07d..1e8ac05 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/MicAnimation.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/MicAnimation.kt @@ -133,7 +133,7 @@ fun MicAnimation(modifier: Modifier = Modifier) { modifier = Modifier .fillMaxWidth() .padding(12.dp) - .align(Alignment.BottomEnd) + .align(Alignment.BottomCenter) ) { AdityaBhawsar( Modifier From 6747c96542ffe1a7103db56e6fbaf7246368056c Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 9 Apr 2022 09:42:26 +0530 Subject: [PATCH 13/20] Added circle --- .../ui/animations/adityabhawsar/FiSplashAnimation.kt | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/FiSplashAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/FiSplashAnimation.kt index db185cb..24c8b38 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/FiSplashAnimation.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/FiSplashAnimation.kt @@ -1,10 +1,12 @@ package dev.baseio.composeplayground.ui.animations.adityabhawsar +import androidx.compose.foundation.Canvas import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.alpha import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp import dev.baseio.composeplayground.contributors.AdityaBhawsar @@ -18,7 +20,15 @@ fun FiSplashAnimation() { .background(Color.White) ) { - + Canvas( + modifier = Modifier + .alpha(1f) + .size(16.dp) + .align(Alignment.Center), + onDraw = { + drawCircle(color = Color(0xFF00B899)) + } + ) Box( modifier = Modifier From 4854a0fd834d4d51e5be822e76a4192685ec5709 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 9 Apr 2022 10:33:56 +0530 Subject: [PATCH 14/20] Created a swipeable slider --- .../adityabhawsar/AlarmSliderAnimation.kt | 76 +++++++++++++++++-- 1 file changed, 70 insertions(+), 6 deletions(-) diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt index fda6c6b..4b77413 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt @@ -1,17 +1,22 @@ package dev.baseio.composeplayground.ui.animations.adityabhawsar -import androidx.compose.foundation.Image 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.foundation.layout.padding +import androidx.compose.foundation.gestures.Orientation +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.* import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.draw.shadow import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.dp +import dev.baseio.composeplayground.R import dev.baseio.composeplayground.contributors.AdityaBhawsar +import kotlin.math.roundToInt @Composable fun AlarmSliderAnimation() { @@ -23,6 +28,7 @@ fun AlarmSliderAnimation() { Box(modifier = Modifier .fillMaxWidth() .align(Alignment.Center)){ + AlarmSlider() } @@ -39,4 +45,62 @@ fun AlarmSliderAnimation() { } } -} \ No newline at end of file +} + +@OptIn(ExperimentalMaterialApi::class) +@Composable +fun AlarmSlider() { + var lastState = 0f + + BoxWithConstraints(modifier = Modifier.fillMaxWidth().height(50.dp)) { + val swipeableState = rememberSwipeableState(0f){ state -> + if (state == 1f) { + //Todo on Swipe End + } else { + //Todo on Swipe Start + } + + lastState = state + true + } + + val swipeEnd: Float = constraints.maxWidth - (constraints.maxHeight * 1.5f) + val anchors = mapOf( + 0f to 0f, + swipeEnd to 1f + ) + + Box( + modifier = Modifier + .fillMaxWidth() + .clip(RoundedCornerShape(8.dp)) + .background(Color.White) + .swipeable( + state = swipeableState, + anchors = anchors, + thresholds = { _, _ -> FractionalThreshold(0.5f) }, + orientation = Orientation.Horizontal + ) + ){ + + Box( + modifier = Modifier + .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) } + .fillMaxHeight() + .aspectRatio(1.5f, true) + .padding(2.dp) + .shadow(6.dp) + .background(Color.Yellow) + .align(Alignment.CenterStart) + .clip(RoundedCornerShape(8.dp)) + ){ + Icon( + painter = painterResource(id = R.drawable.ic_mic_white_40), + modifier = Modifier.size(28.dp).align(Alignment.Center), + contentDescription = "" + ) + } + + } + } +} From 3a17d8eca0c20bbd0ca82b680a5dc83ebbf1f0de Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Thu, 14 Apr 2022 23:07:59 +0530 Subject: [PATCH 15/20] Created a swipeable slider --- .../adityabhawsar/AlarmSliderAnimation.kt | 103 +++++++++++++----- 1 file changed, 73 insertions(+), 30 deletions(-) diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt index 4b77413..e067463 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt @@ -9,11 +9,12 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip -import androidx.compose.ui.draw.shadow import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import dev.baseio.composeplayground.R import dev.baseio.composeplayground.contributors.AdityaBhawsar import kotlin.math.roundToInt @@ -21,15 +22,20 @@ import kotlin.math.roundToInt @Composable fun AlarmSliderAnimation() { - Box(modifier = Modifier - .fillMaxSize() - .background(Color.Black)){ + Box( + modifier = Modifier + .fillMaxSize() + .background(Color(0xff1f231f)) + ) { - Box(modifier = Modifier - .fillMaxWidth() - .align(Alignment.Center)){ + Box( + modifier = Modifier + .fillMaxWidth() + .padding(16.dp) + .align(Alignment.Center) + ) + { AlarmSlider() - } Box( @@ -41,7 +47,8 @@ fun AlarmSliderAnimation() { AdityaBhawsar( Modifier .align(Alignment.Center) - .background(Color.LightGray)) + .background(Color.LightGray) + ) } } @@ -52,10 +59,14 @@ fun AlarmSliderAnimation() { fun AlarmSlider() { var lastState = 0f - BoxWithConstraints(modifier = Modifier.fillMaxWidth().height(50.dp)) { - val swipeableState = rememberSwipeableState(0f){ state -> + BoxWithConstraints( + modifier = Modifier + .fillMaxWidth() + .height(80.dp) + ) { + val swipeableState = rememberSwipeableState(0.5f) { state -> if (state == 1f) { - //Todo on Swipe End + //Todo on Swipe End } else { //Todo on Swipe Start } @@ -64,43 +75,75 @@ fun AlarmSlider() { true } - val swipeEnd: Float = constraints.maxWidth - (constraints.maxHeight * 1.5f) + val swipeCenter: Float = (constraints.maxWidth / 2).toFloat() - ((constraints.maxHeight * 1.35f) / 2) + val swipeRight: Float = constraints.maxWidth - (constraints.maxHeight * 1.35f) + val swipeLeft = 0f + val anchors = mapOf( - 0f to 0f, - swipeEnd to 1f + swipeLeft to 0f, + swipeCenter to 0.5f, + swipeRight to 1f ) Box( modifier = Modifier .fillMaxWidth() - .clip(RoundedCornerShape(8.dp)) - .background(Color.White) + .clip(RoundedCornerShape(40.dp)) + .background(Color(0xff353a3d)) .swipeable( state = swipeableState, anchors = anchors, - thresholds = { _, _ -> FractionalThreshold(0.5f) }, + thresholds = { _, _ -> FractionalThreshold(0.7f) }, orientation = Orientation.Horizontal ) - ){ + ) { + + Text( + modifier = Modifier.align(Alignment.CenterStart).padding(16.dp), + text = "Snooze", + style = TextStyle( + color = Color.White, + fontSize = 18.sp + ) + ) + + Text( + modifier = Modifier.align(Alignment.CenterEnd).padding(16.dp), + text = "Stop", + style = TextStyle( + color = Color.White, + fontSize = 18.sp + ) + ) + + Box( + modifier = Modifier + .fillMaxHeight() + .aspectRatio(1.35f, true) + .padding(8.dp) + .clip(RoundedCornerShape(40.dp)) + .background(Color(0xff626972)) + .align(Alignment.Center) + ) Box( modifier = Modifier .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) } .fillMaxHeight() - .aspectRatio(1.5f, true) - .padding(2.dp) - .shadow(6.dp) - .background(Color.Yellow) - .align(Alignment.CenterStart) - .clip(RoundedCornerShape(8.dp)) - ){ + .aspectRatio(1.35f, true) + .padding(8.dp) + .clip(RoundedCornerShape(40.dp)) + .background(Color(0xffd6e8fb)) + ) { Icon( - painter = painterResource(id = R.drawable.ic_mic_white_40), - modifier = Modifier.size(28.dp).align(Alignment.Center), - contentDescription = "" + painter = painterResource(id = R.drawable.ic_alarm), + modifier = Modifier + .size(24.dp) + .align(Alignment.Center), + contentDescription = "", + tint = Color.Black ) } - } } } From b0e7add7286dd70fad283d46f22ecb7578b24da8 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Fri, 15 Apr 2022 00:19:12 +0530 Subject: [PATCH 16/20] Added background animation --- .../adityabhawsar/AlarmSliderAnimation.kt | 158 +++++++++++++++--- 1 file changed, 135 insertions(+), 23 deletions(-) diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt index e067463..59a0b97 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt @@ -1,14 +1,22 @@ package dev.baseio.composeplayground.ui.animations.adityabhawsar +import androidx.compose.animation.core.Animatable +import androidx.compose.animation.core.AnimationVector1D +import androidx.compose.animation.core.LinearEasing +import androidx.compose.animation.core.tween import androidx.compose.foundation.background import androidx.compose.foundation.gestures.Orientation import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.* import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.alpha import androidx.compose.ui.draw.clip +import androidx.compose.ui.draw.rotate import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.TextStyle @@ -17,6 +25,9 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import dev.baseio.composeplayground.R import dev.baseio.composeplayground.contributors.AdityaBhawsar +import kotlinx.coroutines.CoroutineScope +import kotlinx.coroutines.delay +import kotlinx.coroutines.launch import kotlin.math.roundToInt @Composable @@ -57,23 +68,13 @@ fun AlarmSliderAnimation() { @OptIn(ExperimentalMaterialApi::class) @Composable fun AlarmSlider() { - var lastState = 0f BoxWithConstraints( modifier = Modifier .fillMaxWidth() .height(80.dp) ) { - val swipeableState = rememberSwipeableState(0.5f) { state -> - if (state == 1f) { - //Todo on Swipe End - } else { - //Todo on Swipe Start - } - - lastState = state - true - } + val swipeableState = rememberSwipeableState(0.5f) { true } val swipeCenter: Float = (constraints.maxWidth / 2).toFloat() - ((constraints.maxHeight * 1.35f) / 2) val swipeRight: Float = constraints.maxWidth - (constraints.maxHeight * 1.35f) @@ -85,6 +86,21 @@ fun AlarmSlider() { swipeRight to 1f ) + val boxAlpha = remember { Animatable(1f) } + val leftWeight = remember { Animatable(0.45f) } + val rightWeight = remember { Animatable(0.45f) } + val clockRotation = remember { Animatable(0f) } + + LaunchedEffect(key1 = swipeableState.currentValue == 0.5f) { + runInactiveAnimation( + this, + boxAlpha, + leftWeight, + rightWeight, + clockRotation + ) + } + Box( modifier = Modifier .fillMaxWidth() @@ -98,8 +114,28 @@ fun AlarmSlider() { ) ) { + Row(modifier = Modifier + .fillMaxSize() + .align(Alignment.Center)) { + + Box(modifier = Modifier.weight(leftWeight.value)) + Box( + modifier = Modifier + .fillMaxHeight() + .alpha(boxAlpha.value) + .weight(1 - (leftWeight.value + rightWeight.value)) + .padding(8.dp) + .clip(RoundedCornerShape(40.dp)) + .background(Color(0xff626972)) + ) + Box(modifier = Modifier.weight(rightWeight.value)) + } + + Text( - modifier = Modifier.align(Alignment.CenterStart).padding(16.dp), + modifier = Modifier + .align(Alignment.CenterStart) + .padding(16.dp), text = "Snooze", style = TextStyle( color = Color.White, @@ -108,7 +144,9 @@ fun AlarmSlider() { ) Text( - modifier = Modifier.align(Alignment.CenterEnd).padding(16.dp), + modifier = Modifier + .align(Alignment.CenterEnd) + .padding(16.dp), text = "Stop", style = TextStyle( color = Color.White, @@ -116,16 +154,6 @@ fun AlarmSlider() { ) ) - Box( - modifier = Modifier - .fillMaxHeight() - .aspectRatio(1.35f, true) - .padding(8.dp) - .clip(RoundedCornerShape(40.dp)) - .background(Color(0xff626972)) - .align(Alignment.Center) - ) - Box( modifier = Modifier .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) } @@ -138,6 +166,7 @@ fun AlarmSlider() { Icon( painter = painterResource(id = R.drawable.ic_alarm), modifier = Modifier + .rotate(clockRotation.value) .size(24.dp) .align(Alignment.Center), contentDescription = "", @@ -147,3 +176,86 @@ fun AlarmSlider() { } } } + +fun runInactiveAnimation( + coroutineScope: CoroutineScope, + boxAlpha: Animatable, + leftWeight: Animatable, + rightWeight: Animatable, + clockRotation: Animatable +) { + coroutineScope.launch{ + + leftWeight.animateTo( + targetValue = 0.01f, + animationSpec = tween(750, easing = LinearEasing) + ) + + delay(50) + + coroutineScope.launch { + clockRotation.animateTo( + targetValue = 30f, + animationSpec = tween(50, easing = LinearEasing) + ) + + clockRotation.animateTo( + targetValue = -30f, + animationSpec = tween(100, easing = LinearEasing) + ) + + clockRotation.animateTo( + targetValue = 0f, + animationSpec = tween(50, easing = LinearEasing) + ) + } + + boxAlpha.animateTo( + targetValue = 0f, + animationSpec = tween(200, easing = LinearEasing) + ) + + leftWeight.snapTo(0.45f) + boxAlpha.snapTo(1f) + + rightWeight.animateTo( + targetValue = 0.01f, + animationSpec = tween(750, easing = LinearEasing) + ) + + delay(50) + + coroutineScope.launch { + clockRotation.animateTo( + targetValue = 30f, + animationSpec = tween(50, easing = LinearEasing) + ) + + clockRotation.animateTo( + targetValue = -30f, + animationSpec = tween(100, easing = LinearEasing) + ) + + clockRotation.animateTo( + targetValue = 0f, + animationSpec = tween(50, easing = LinearEasing) + ) + } + + boxAlpha.animateTo( + targetValue = 0f, + animationSpec = tween(200, easing = LinearEasing) + ) + + rightWeight.snapTo(0.45f) + boxAlpha.snapTo(1f) + + runInactiveAnimation( + coroutineScope, + boxAlpha, + leftWeight, + rightWeight, + clockRotation + ) + } +} From ef464aed8cdc9ca1ac5685deca54f257767feed8 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Fri, 15 Apr 2022 14:12:19 +0530 Subject: [PATCH 17/20] Added animation --- .idea/misc.xml | 2 + .../adityabhawsar/AlarmSliderAnimation.kt | 316 +++++++++++++++--- app/src/main/res/drawable/ic_check.xml | 10 + 3 files changed, 290 insertions(+), 38 deletions(-) create mode 100644 app/src/main/res/drawable/ic_check.xml diff --git a/.idea/misc.xml b/.idea/misc.xml index 0fc7958..46cbcc9 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -6,7 +6,9 @@ + + diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt index 59a0b97..de32900 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/AlarmSliderAnimation.kt @@ -1,22 +1,24 @@ package dev.baseio.composeplayground.ui.animations.adityabhawsar +import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.core.Animatable import androidx.compose.animation.core.AnimationVector1D import androidx.compose.animation.core.LinearEasing import androidx.compose.animation.core.tween +import androidx.compose.animation.fadeIn +import androidx.compose.animation.fadeOut import androidx.compose.foundation.background import androidx.compose.foundation.gestures.Orientation import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.* -import androidx.compose.runtime.Composable -import androidx.compose.runtime.LaunchedEffect -import androidx.compose.runtime.remember +import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.rotate +import androidx.compose.ui.draw.scale import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.TextStyle @@ -25,9 +27,7 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import dev.baseio.composeplayground.R import dev.baseio.composeplayground.contributors.AdityaBhawsar -import kotlinx.coroutines.CoroutineScope -import kotlinx.coroutines.delay -import kotlinx.coroutines.launch +import kotlinx.coroutines.* import kotlin.math.roundToInt @Composable @@ -74,33 +74,46 @@ fun AlarmSlider() { .fillMaxWidth() .height(80.dp) ) { - val swipeableState = rememberSwipeableState(0.5f) { true } + + val boxAlpha = remember { Animatable(0f) } + val leftWeight = remember { Animatable(0.45f) } + val rightWeight = remember { Animatable(0.45f) } + val clockRotation = remember { Animatable(0f) } + + val swipeableState = rememberSwipeableState(0.5f) { state -> true } val swipeCenter: Float = (constraints.maxWidth / 2).toFloat() - ((constraints.maxHeight * 1.35f) / 2) val swipeRight: Float = constraints.maxWidth - (constraints.maxHeight * 1.35f) val swipeLeft = 0f + LaunchedEffect(swipeableState.offset) { + if(swipeableState.offset.value == swipeCenter) { + boxAlpha.snapTo(0f) + leftWeight.snapTo(0.45f) + rightWeight.snapTo(0.45f) + clockRotation.snapTo(0f) + + runInactiveAnimation( + this, + boxAlpha, + leftWeight, + rightWeight, + clockRotation + ) + } else { + boxAlpha.snapTo(0f) + leftWeight.snapTo(0.45f) + rightWeight.snapTo(0.45f) + clockRotation.snapTo(0f) + } + } + val anchors = mapOf( swipeLeft to 0f, swipeCenter to 0.5f, swipeRight to 1f ) - val boxAlpha = remember { Animatable(1f) } - val leftWeight = remember { Animatable(0.45f) } - val rightWeight = remember { Animatable(0.45f) } - val clockRotation = remember { Animatable(0f) } - - LaunchedEffect(key1 = swipeableState.currentValue == 0.5f) { - runInactiveAnimation( - this, - boxAlpha, - leftWeight, - rightWeight, - clockRotation - ) - } - Box( modifier = Modifier .fillMaxWidth() @@ -114,24 +127,29 @@ fun AlarmSlider() { ) ) { - Row(modifier = Modifier - .fillMaxSize() - .align(Alignment.Center)) { - - Box(modifier = Modifier.weight(leftWeight.value)) - Box( - modifier = Modifier - .fillMaxHeight() - .alpha(boxAlpha.value) - .weight(1 - (leftWeight.value + rightWeight.value)) - .padding(8.dp) - .clip(RoundedCornerShape(40.dp)) - .background(Color(0xff626972)) - ) - Box(modifier = Modifier.weight(rightWeight.value)) + AnimatedVisibility( + visible = (swipeableState.offset.value == swipeCenter), + enter = fadeIn(), + exit = fadeOut() + ) { + Row(modifier = Modifier + .fillMaxSize() + .align(Alignment.Center)) { + + Box(modifier = Modifier.weight(leftWeight.value)) + Box( + modifier = Modifier + .fillMaxHeight() + .alpha(boxAlpha.value) + .weight(1 - (leftWeight.value + rightWeight.value)) + .padding(8.dp) + .clip(RoundedCornerShape(40.dp)) + .background(Color(0xff626972)) + ) + Box(modifier = Modifier.weight(rightWeight.value)) + } } - Text( modifier = Modifier .align(Alignment.CenterStart) @@ -167,6 +185,53 @@ fun AlarmSlider() { painter = painterResource(id = R.drawable.ic_alarm), modifier = Modifier .rotate(clockRotation.value) + .alpha(if (swipeableState.offset.value == swipeCenter) 1f else 0f) + .size(24.dp) + .align(Alignment.Center), + contentDescription = "", + tint = Color.Black + ) + + Icon( + painter = painterResource(id = R.drawable.ic_alarm), + modifier = Modifier + .rotate(rotationClock( + swipeableState.offset.value, + swipeCenter, + swipeLeft, + swipeRight + )) + .alpha(alphaClock( + swipeableState.offset.value, + swipeCenter, + swipeLeft, + swipeRight + )) + .size(24.dp) + .align(Alignment.Center), + contentDescription = "", + tint = Color.Black + ) + + Icon( + painter = painterResource(id = R.drawable.ic_check), + modifier = Modifier + .rotate(rotationCheck( + swipeableState.offset.value, + swipeCenter, + swipeLeft, + swipeRight + )) + .scale(scaleCheck( + swipeableState.offset.value, + swipeCenter, + swipeLeft, + swipeRight + )) + .alpha(alphaCheck( + swipeableState.offset.value, + swipeCenter + )) .size(24.dp) .align(Alignment.Center), contentDescription = "", @@ -177,6 +242,179 @@ fun AlarmSlider() { } } +fun rotationClock( + currentPos: Float, + center: Float, + left: Float, + right: Float +): Float { + when { + currentPos == center -> { + return 0f + } + currentPos > center -> { + // to right + val progressMade = currentPos - center + val total = right - center + + val per = (progressMade/total) * 100 + + return if(per > 25) { + 270f + } else { + (per * 10.8f) + } + } + currentPos < center -> { + //to left + + val progressMade = center - currentPos + val total = center - left + + val per = (progressMade/total) * 100 + + return if(per > 25) { + -270f + } else { + (per * 10.8f)*-1 + } + } + else -> { + return 0f + } + } +} + +fun alphaClock( + currentPos: Float, + center: Float, + left: Float, + right: Float +): Float { + when { + currentPos == center -> { + return 0f + } + currentPos > center -> { + // to right + val progressMade = currentPos - center + val total = right - center + val per = (progressMade/total) * 100 + + return if(per > 25) { + 0f + } else { + 1 - (per * .04f) + } + } + currentPos < center -> { + //to left + val progressMade = center - currentPos + val total = center - left + val per = (progressMade/total) * 100 + + return if(per > 25) { + 0f + } else { + 1 - (per * 0.04f) + } + } + else -> { + return 0f + } + } +} + +fun rotationCheck( + currentPos: Float, + center: Float, + left: Float, + right: Float +): Float { + when { + currentPos == center -> { + return 90f + } + currentPos > center -> { + val progressMade = currentPos - center + val total = right - center + val per = (progressMade/total) * 100 + + return if(per <= 16.5){ + 90f + (per * 10.9f) + } else if(per > 16.5 && per <= 50) { + (270f + (90f * (per - 16.5f)/33.5f)) + } else { + 0f + } + } + currentPos < center -> { + val progressMade = center - currentPos + val total = center - left + val per = (progressMade/total) * 100 + + return if(per <= 16.5){ + 90f + ((per * 10.9f)* -1) + } else if(per > 16.5 && per <= 50) { + (-90f + (270f * ((per - 16.5f)/33.5f)*-1)) + } else { + 0f + } + } + else -> { return 0f} + } +} + +fun alphaCheck( + currentPos: Float, + center: Float, +): Float { + if(currentPos == center){ + return 0f + } + return 1f +} + +fun scaleCheck( + currentPos: Float, + center: Float, + left: Float, + right: Float +): Float { + when { + currentPos == center -> { + return 0.4f + } + currentPos > center -> { + val progressMade = currentPos - center + val total = right - center + val per = (progressMade/total) * 100 + + return if(per <= 25){ + 0.4f + } else if(per > 25 && per <= 50) { + (0.4f + (0.6f * (per - 25)/25)) + } else { + 1f + } + } + currentPos < center -> { + val progressMade = center - currentPos + val total = center - left + val per = (progressMade/total) * 100 + return if(per <= 25){ + 0.4f + } else if(per > 25 && per <= 50) { + (0.4f + (0.6f * (per - 25)/25)) + } else { + 1f + } + } + else -> { return 1f } + } +} + + fun runInactiveAnimation( coroutineScope: CoroutineScope, boxAlpha: Animatable, @@ -186,6 +424,8 @@ fun runInactiveAnimation( ) { coroutineScope.launch{ + boxAlpha.snapTo(1f) + leftWeight.animateTo( targetValue = 0.01f, animationSpec = tween(750, easing = LinearEasing) diff --git a/app/src/main/res/drawable/ic_check.xml b/app/src/main/res/drawable/ic_check.xml new file mode 100644 index 0000000..a49bea7 --- /dev/null +++ b/app/src/main/res/drawable/ic_check.xml @@ -0,0 +1,10 @@ + + + From 958b75ed5ba51dfbd3ad0145fcef4da293337802 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Fri, 15 Apr 2022 14:14:10 +0530 Subject: [PATCH 18/20] Replaced position --- .../main/java/dev/baseio/composeplayground/MainActivity.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index 5cfa56a..f3d6d4e 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -108,10 +108,10 @@ class MainActivity : ComponentActivity() { 17 -> { CircleSquareAnimation() } - 18 -> { + 0 -> { NetflixIntroAnimation() } - 0 -> { + 18 -> { AlarmSliderAnimation() } 11 -> { From c0f40aa87e52bd88b0bd3afec439530b0b038b7d Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 16 Apr 2022 01:00:22 +0530 Subject: [PATCH 19/20] Added animation --- .../baseio/composeplayground/MainActivity.kt | 4 +- .../adityabhawsar/FiSplashAnimation.kt | 256 +++++++++++++++++- 2 files changed, 255 insertions(+), 5 deletions(-) diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index 95ca644..603cc34 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -108,10 +108,10 @@ class MainActivity : ComponentActivity() { 17 -> { CircleSquareAnimation() } - 18 -> { + 0 -> { NetflixIntroAnimation() } - 0 -> { + 18 -> { FiSplashAnimation() } 11 -> { diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/FiSplashAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/FiSplashAnimation.kt index 24c8b38..3e15772 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/FiSplashAnimation.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/FiSplashAnimation.kt @@ -1,19 +1,57 @@ package dev.baseio.composeplayground.ui.animations.adityabhawsar +import android.graphics.Paint +import androidx.compose.animation.core.* import androidx.compose.foundation.Canvas import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha +import androidx.compose.ui.draw.scale +import androidx.compose.ui.geometry.CornerRadius +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.geometry.Size import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Path +import androidx.compose.ui.graphics.drawscope.rotate +import androidx.compose.ui.graphics.nativeCanvas +import androidx.compose.ui.graphics.toArgb import androidx.compose.ui.unit.dp import dev.baseio.composeplayground.contributors.AdityaBhawsar +import kotlinx.coroutines.CoroutineScope +import kotlinx.coroutines.delay +import kotlinx.coroutines.launch @Composable fun FiSplashAnimation() { + val ballOffset = remember { Animatable(-280f) } + val ballScale = remember { Animatable(0f) } + val textAlpha = remember { Animatable(0f) } + val textScale = remember { Animatable(1.35f) } + val circleAlpha = remember { Animatable(1f) } + val squareAlpha = remember { Animatable(0f) } + val squareRotation = remember { Animatable(45f) } + val heightRatio = remember { Animatable(.27f) } + + LaunchedEffect(key1 = true){ + runFiAnimation( + this, + ballOffset, + ballScale, + textScale, + textAlpha, + circleAlpha, + squareAlpha, + squareRotation, + heightRatio + ) + } + Box( Modifier .fillMaxSize() @@ -22,14 +60,97 @@ fun FiSplashAnimation() { Canvas( modifier = Modifier - .alpha(1f) .size(16.dp) - .align(Alignment.Center), + .scale(ballScale.value) + .align(Alignment.Center) + .offset(y = ballOffset.value.dp), onDraw = { drawCircle(color = Color(0xFF00B899)) } ) + Canvas( + modifier = Modifier + .size(100.dp) + .alpha(textAlpha.value) + .scale(textScale.value) + .align(Alignment.Center) + ){ + + val fPath = Path().let { + it.moveTo( x= this.size.width.times(.50f) , y= this.size.height.times(.25f)) + it.lineTo(x = this.size.width.times(0.30f), y = this.size.height.times(.25f)) + it.quadraticBezierTo( + x1 = this.size.width.times(0.07f), y1 = this.size.height.times(.25f), + x2 = this.size.width.times(0.07f), y2 = this.size.height.times(.45f) + ) + it.lineTo(x = this.size.width.times(0.07f), y = this.size.height.times(.95f)) + it.lineTo(x = this.size.width.times(0.25f), y = this.size.height.times(.95f)) + it.lineTo(x = this.size.width.times(0.25f), y = this.size.height.times(.85f)) + it.quadraticBezierTo( + x1 = this.size.width.times(0.25f), y1 = this.size.height.times(0.70f), + x2 = this.size.width.times(0.35f), y2 = this.size.height.times(0.70f) + ) + it.lineTo(x = this.size.width.times(0.5f), y = this.size.height.times(.70f)) + it.lineTo(x = this.size.width.times(0.5f), y = this.size.height.times(.55f)) + it.lineTo(x = this.size.width.times(0.25f), y = this.size.height.times(.55f)) + it.lineTo(x = this.size.width.times(0.25f), y = this.size.height.times(.47f)) + it.quadraticBezierTo( + x1 = this.size.width.times(0.25f), y1 = this.size.height.times(0.4f), + x2 = this.size.width.times(0.4f), y2 = this.size.height.times(0.4f) + ) + it.lineTo(x = this.size.width.times(0.5f), y = this.size.height.times(.4f)) + it.close() + it + } + + val iPath = Path().let { + it.moveTo(x = this.size.width.times(0.6f), y = this.size.height.times(.57f)) + it.lineTo(x = this.size.width.times(0.8f), y = this.size.height.times(.57f)) + it.lineTo(x = this.size.width.times(0.8f), y = this.size.height.times(.7f)) + it.quadraticBezierTo( + x1 = this.size.width.times(0.8f), y1 = this.size.height.times(0.77f), + x2 = this.size.width.times(0.9f), y2 = this.size.height.times(0.77f) + ) + it.lineTo(x = this.size.width.times(0.9f), y = this.size.height.times(.95f)) + it.lineTo(x = this.size.width.times(0.77f), y = this.size.height.times(.95f)) + it.quadraticBezierTo( + x1 = this.size.width.times(0.6f), y1 = this.size.height.times(0.95f), + x2 = this.size.width.times(0.6f), y2 = this.size.height.times(0.75f) + ) + it.close() + it + } + + drawPath(path = fPath, color = Color.White) + + drawPath(path = iPath, color = Color.White) + + drawCircle( + alpha = circleAlpha.value, + color = Color.White, + radius = 27f, + center = Offset(x = this.size.width.times(.7f), y = this.size.height.times(0.10f + heightRatio.value)) + ) + + rotate( + degrees = squareRotation.value, + pivot = Offset(this.size.width.times(.7f), this.size.height.times(0.10f + heightRatio.value)) + ) { + drawRoundRect( + alpha = squareAlpha.value, + cornerRadius = CornerRadius( + x= 4.dp.toPx(), + y= 4.dp.toPx(), + ), + color = Color.White, + topLeft = Offset(this.size.width.times(.6f), this.size.height.times(heightRatio.value)), + size = Size(54f, 54f) + ) + } + + } + Box( modifier = Modifier .fillMaxWidth() @@ -43,4 +164,133 @@ fun FiSplashAnimation() { ) } } -} \ No newline at end of file +} + +fun runFiAnimation( + coroutineScope: CoroutineScope, + ballOffset: Animatable, + ballScale: Animatable, + textScale: Animatable, + textAlpha: Animatable, + circleAlpha: Animatable, + squareAlpha: Animatable, + squareRotation: Animatable, + heightRatio: Animatable +) { + coroutineScope.launch { + + ballScale.snapTo(.2f) + + coroutineScope.launch { + ballScale.animateTo( + targetValue = 1f, + animationSpec = tween(300, easing = FastOutSlowInEasing) + ) + } + + ballOffset.animateTo( + targetValue = -300f, + animationSpec = tween(300, easing = FastOutSlowInEasing) + ) + + coroutineScope.launch { + ballScale.animateTo( + targetValue = 1.75f, + animationSpec = tween(600, easing = FastOutSlowInEasing) + ) + } + + ballOffset.animateTo( + targetValue = 0f, + animationSpec = tween(600, easing = FastOutSlowInEasing) + ) + + textAlpha.snapTo(1f) + + coroutineScope.launch { + textScale.animateTo( + targetValue = 1f, + animationSpec = tween(600, easing = LinearEasing) + ) + } + + coroutineScope.launch { + ballScale.animateTo( + targetValue = 75f, + animationSpec = tween( 400, easing = FastOutSlowInEasing ) + ) + } + + bounceAnimation( + coroutineScope, + circleAlpha, + squareAlpha, + heightRatio, + squareRotation + ) + } +} + +fun bounceAnimation( + coroutineScope: CoroutineScope, + circleAlpha: Animatable, + squareAlpha: Animatable, + heightRatio: Animatable, + squareRotation: Animatable +) { + coroutineScope.launch { + + heightRatio.animateTo( + targetValue = 0f, + animationSpec = tween(300, easing = FastOutSlowInEasing) + ) + + delay(50) + + heightRatio.animateTo( + targetValue = .27f, + animationSpec = tween(300, easing = FastOutLinearInEasing) + ) + + circleAlpha.snapTo(0f) + squareAlpha.snapTo(1f) + + coroutineScope.launch { + squareRotation.animateTo( + targetValue = 135f, + animationSpec = tween(300, easing = FastOutSlowInEasing) + ) + } + + heightRatio.animateTo( + targetValue = 0f, + animationSpec = tween(300, easing = FastOutSlowInEasing) + ) + + delay(50) + + coroutineScope.launch { + squareRotation.animateTo( + targetValue = 225f, + animationSpec = tween(300, easing = FastOutSlowInEasing) + ) + } + + heightRatio.animateTo( + targetValue = .27f, + animationSpec = tween(300, easing = FastOutLinearInEasing) + ) + + squareRotation.snapTo(45f) + circleAlpha.snapTo(1f) + squareAlpha.snapTo(0f) + + bounceAnimation( + coroutineScope, + circleAlpha, + squareAlpha, + heightRatio, + squareRotation + ) + } +} From b43478bc90c0583818a4fe7d15cb9e8e501e8ca0 Mon Sep 17 00:00:00 2001 From: AdityaBhawsar Date: Sat, 16 Apr 2022 13:17:32 +0530 Subject: [PATCH 20/20] Added animation --- .../baseio/composeplayground/MainActivity.kt | 11 +- .../adityabhawsar/BreatheRotatingAnimation.kt | 263 ++++++++++++++++++ 2 files changed, 268 insertions(+), 6 deletions(-) create mode 100644 app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheRotatingAnimation.kt diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index e96caad..4796abf 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -20,11 +20,7 @@ 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.adityabhawsar.AlarmSliderAnimation -import dev.baseio.composeplayground.ui.animations.adityabhawsar.BreatheAnimation -import dev.baseio.composeplayground.ui.animations.adityabhawsar.CircleSquareAnimation -import dev.baseio.composeplayground.ui.animations.adityabhawsar.FiSplashAnimation -import dev.baseio.composeplayground.ui.animations.adityabhawsar.MicAnimation +import dev.baseio.composeplayground.ui.animations.adityabhawsar.* import dev.baseio.composeplayground.ui.animations.anmolverma.BellAnimation import dev.baseio.composeplayground.ui.animations.anmolverma.ShootingStarsAnimation import dev.baseio.composeplayground.ui.animations.anmolverma.planetarysystem.PlanetarySystem @@ -69,7 +65,7 @@ class MainActivity : ComponentActivity() { ) { HorizontalPager( modifier = Modifier.fillMaxSize(), - count = 20, state = pagerState, + count = 21, state = pagerState, ) { page -> // Our page content when (page) { @@ -115,6 +111,9 @@ class MainActivity : ComponentActivity() { 18 -> { FiSplashAnimation() } + 20 -> { + BreatheRotatingAnimation() + } 19 -> { AlarmSliderAnimation() } diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheRotatingAnimation.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheRotatingAnimation.kt new file mode 100644 index 0000000..71c3579 --- /dev/null +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/adityabhawsar/BreatheRotatingAnimation.kt @@ -0,0 +1,263 @@ +package dev.baseio.composeplayground.ui.animations.adityabhawsar + +import androidx.compose.animation.AnimatedVisibility +import androidx.compose.animation.core.Animatable +import androidx.compose.animation.core.AnimationVector1D +import androidx.compose.animation.core.LinearEasing +import androidx.compose.animation.core.tween +import androidx.compose.animation.fadeIn +import androidx.compose.animation.fadeOut +import androidx.compose.foundation.Canvas +import dev.baseio.composeplayground.contributors.AdityaBhawsar +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.material.Text +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.scale +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.drawscope.rotate +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import kotlinx.coroutines.CoroutineScope +import kotlinx.coroutines.delay +import kotlinx.coroutines.launch + +@Composable +fun BreatheRotatingAnimation(modifier: Modifier = Modifier) { + + val rotationIndicator = remember { Animatable(0f) } + val dialScale = remember { Animatable(1f) } + + LaunchedEffect(key1 = true) { + runDialAnimation( + this, + rotationIndicator, + dialScale + ) + } + + Box( + modifier + .fillMaxSize() + .background(Color.Black) + ) { + + Canvas( + modifier = Modifier + .size(250.dp) + .scale(dialScale.value) + .align(Alignment.Center) + ) { + + drawCircle( + color = Color.LightGray + ) + drawArc( + color = Color.Blue, + useCenter = true, + startAngle = 270f, + sweepAngle = 90f + ) + drawArc( + color = Color.Cyan, + useCenter = true, + startAngle = 90f, + sweepAngle = 90f + ) + drawCircle( + color = Color.Black, + radius = (size.maxDimension / 2.0f) - 10f + ) + rotate( + 45f + ) { + drawCircle( + brush = Brush.verticalGradient( + listOf( + Color.Blue, + Color.Cyan + ) + ), + radius = (size.maxDimension / 2.0f) - 40f + ) + } + + drawArc( + color = Color.White, + startAngle = 180f, + sweepAngle = 180f, + useCenter = true, + topLeft = Offset(x = this.size.width.times(0.47f), y = this.size.height.times(.96f)), + size = Size(width = 50f, height = 52f) + ) + + rotate(90f) { + drawArc( + color = Color.White, + startAngle = 180f, + sweepAngle = 180f, + useCenter = true, + topLeft = Offset(x = this.size.width.times(0.47f), y = this.size.height.times(.96f)), + size = Size(width = 50f, height = 52f) + ) + } + + rotate(180f) { + drawArc( + color = Color.White, + startAngle = 180f, + sweepAngle = 180f, + useCenter = true, + topLeft = Offset(x = this.size.width.times(0.47f), y = this.size.height.times(.96f)), + size = Size(width = 50f, height = 52f) + ) + } + + rotate(270f) { + drawArc( + color = Color.White, + startAngle = 180f, + sweepAngle = 180f, + useCenter = true, + topLeft = Offset(x = this.size.width.times(0.47f), y = this.size.height.times(.96f)), + size = Size(width = 50f, height = 52f) + ) + } + + rotate(rotationIndicator.value) { + drawArc( + color = Color.Blue, + startAngle = 180f, + sweepAngle = 180f, + useCenter = true, + topLeft = Offset(x = this.size.width.times(0.47f), y = this.size.height.times(.96f)), + size = Size(width = 50f, height = 52f) + ) + } + + } + + Box(modifier = Modifier.align(Alignment.Center)){ + + AnimatedVisibility( + visible = ( + (rotationIndicator.value >= 90f && rotationIndicator.value < 180f) + || + (rotationIndicator.value >= 270f && rotationIndicator.value < 360f) + ), + enter = fadeIn(), + exit = fadeOut() + ) { + Text( + modifier = Modifier.fillMaxWidth().align(Alignment.Center), + text = "Hold", + style = TextStyle( + color = Color.White, + textAlign = TextAlign.Center, + fontSize = 18.sp + ) + ) + } + + AnimatedVisibility( + visible = (rotationIndicator.value >= 0f && rotationIndicator.value < 90f), + enter = fadeIn(), + exit = fadeOut() + ) { + Text( + modifier = Modifier.fillMaxWidth().align(Alignment.Center), + text = "Breathe In", + style = TextStyle( + color = Color.White, + textAlign = TextAlign.Center, + fontSize = 18.sp + ) + ) + } + + AnimatedVisibility( + visible = (rotationIndicator.value >= 180f && rotationIndicator.value < 270f), + enter = fadeIn(), + exit = fadeOut() + ) { + Text( + modifier = Modifier.fillMaxWidth().align(Alignment.Center), + text = "Breathe Out", + style = TextStyle( + color = Color.White, + textAlign = TextAlign.Center, + fontSize = 18.sp + ), + ) + } + + } + + Box( + modifier = Modifier + .fillMaxWidth() + .padding(12.dp) + .align(Alignment.BottomCenter) + ) { + AdityaBhawsar( + Modifier + .align(Alignment.Center) + .background(Color.LightGray) + ) + } + } +} + +fun runDialAnimation( + coroutineScope: CoroutineScope, + rotationIndicator: Animatable, + dialScale: Animatable +) { + coroutineScope.launch { + + coroutineScope.launch { + rotationIndicator.animateTo( + targetValue = 360f, + animationSpec = tween( + durationMillis = 10000, + easing = LinearEasing + ) + ) + rotationIndicator.snapTo(0f) + } + + dialScale.animateTo( + targetValue = 1.25f, + animationSpec = tween( + durationMillis = 2500, + easing = LinearEasing + ) + ) + + delay(2500) + + dialScale.animateTo( + targetValue = 1f, + animationSpec = tween( + durationMillis = 2500, + easing = LinearEasing + ) + ) + + delay(2500) + + + runDialAnimation( + coroutineScope, + rotationIndicator, + dialScale + ) + } +}