Small Android Snowfall compose animation
Please, add to repositories jitpack:
repositories {
mavenCentral()
...
maven { url 'https://jitpack.io' }
}
Add to your module next dependency:
dependencies {
implementation 'com.github.idapgroup:Snowfall:<latest-version>'
}
Note:
Do not forget to add compose dependencies 🙃
Library has 2 base functions to use as an extension function for Modifier
.
It is pretty simple to use. Just add .snowfall()
to any modifier where you want to see the animation
Box(
modifier = Modifier
.padding(16.dp)
.fillMaxSize()
.snowfall()
)
If you want to customize snowflakes to any other image, the library allows you to put any painter list to make your own flakes animation.
val data = listOf(
rememberVectorPainter(image = Icons.Rounded.Add),
rememberVectorPainter(image = Icons.Rounded.AccountBox),
rememberVectorPainter(image = Icons.Rounded.Abc),
rememberVectorPainter(image = Icons.Rounded.Alarm),
)
Box(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.height(400.dp)
.background(Color.Black, shape = RoundedCornerShape(8.dp))
.snowfall(FlakeType.Custom(data))
)
icon-falling.webm
It is also possible to randomize different colors and flakes density for your purposes.
Box(
modifier = Modifier
.padding(16.dp)
.fillMaxSize()
.snowfall(
colors = listOf(Color.Green, Color.Yellow, Color.Blue, Color.Red),
density = 0.5 // from 0.0 to 1.0
)
)
snowfall-colors-dencity.webm
Melting has the same usage as a falling.
Box(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.height(400.dp)
.background(Color.DarkGray, shape = RoundedCornerShape(16.dp))
.snowmelt()
)
snowmelting.webm
And also allows you to customize flakes:
val data = listOf(
rememberVectorPainter(image = Icons.Rounded.Add),
rememberVectorPainter(image = Icons.Rounded.AccountBox),
rememberVectorPainter(image = Icons.Rounded.Abc),
rememberVectorPainter(image = Icons.Rounded.Alarm),
)
val colors = listOf(Color.Yellow, Color.Blue, Color.Red, Color.Green, Color.Cyan)
Box(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.height(400.dp)
.background(Color.DarkGray, shape = RoundedCornerShape(8.dp))
.snowmelt(
type = FlakeType.Custom(data),
colors = colors,
density = 0.2
)
)
snowmelt-custom-colors-density.webm
You can also combine as many options as you want:
Box(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.height(350.dp)
.background(Color.DarkGray, shape = RoundedCornerShape(8.dp))
.snowfall()
.snowmelt()
)
combining.webm
Big thanks to for inspiriation and source code for the first version of this library.