Welcome to the Edge Animation Android App! This application demonstrates a dynamic edge light animation using Kotlin and Jetpack Compose.
- Edge Light Animation: A captivating edge light animation with customizable gradient colors.
- Toggle Animation: Switch the animation on or off using a simple toggle button.
The animation is implemented using Jetpack Compose's rememberInfiniteTransition
and animateFloat
to create a continuous rotation effect. Here's a breakdown of the approach:
- State Management: A boolean state
checked
is used to toggle the animation. - Infinite Transition:
rememberInfiniteTransition
is used to create an infinite animation that rotates from 0 to 360 degrees. - Gradient Brush: A vertical gradient brush is defined with colors transitioning from blue to cyan to magenta.
- Surface Drawing: The
Surface
composable usesdrawWithContent
to conditionally apply the rotation animation to a drawn circle with the gradient brush. - Scaffold and Layout: The
Scaffold
andColumn
composables are used for layout, with aSwitch
to toggle the animation and aText
for the title.
Here's the implementation of the edge animation:
@Composable
fun AnimatedSurface() {
var checked by remember { mutableStateOf(false) }
val infiniteTransition = rememberInfiniteTransition("edge animation")
val degrees by infiniteTransition.animateFloat(
initialValue = 0f,
targetValue = 360f,
animationSpec = infiniteRepeatable(
animation = tween(durationMillis = 2000, easing = LinearEasing),
repeatMode = RepeatMode.Restart
), label = "edge"
)
val brush = Brush.verticalGradient(colors = listOf(Color.Blue, Color.Cyan, Color.Magenta), tileMode = TileMode.Repeated)
Surface(
modifier = Modifier
.fillMaxSize()
.padding(4.dp)
.drawWithContent {
if (checked) {
rotate(degrees = degrees) {
drawCircle(
brush = brush,
radius = size.height,
blendMode = BlendMode.SrcIn
)
}
}
drawContent()
}
) {
Scaffold(modifier = Modifier.fillMaxSize()) { paddingValues ->
Column(
modifier = Modifier
.fillMaxSize()
.padding(paddingValues),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = "Edge Light Animation",
fontSize = 24.sp,
fontWeight = FontWeight.Medium
)
Switch(
checked = checked,
onCheckedChange = { checked = it }
)
}
}
}
}
- Clone the repository:
git clone https://github.com/harshrajput1506/android_edge_anim.git
- Open the project in Android Studio.
- Build and run the app on an Android device or emulator.
- Launch the app on your device.
- Toggle the switch to start or stop the edge light animation.
Feel free to explore and modify the code to suit your needs. Enjoy the mesmerizing edge light animation!
You can download the release APK from the following path in the repository:
This project is licensed under the MIT License - see the LICENSE file for details.
If you encounter any issues or have suggestions, please open an issue on GitHub.