Skip to content

Snowfall animation for Android compose

License

Notifications You must be signed in to change notification settings

OctoberNicole/Snowfall

 
 

Repository files navigation

Snowfall Compose

Release

Small Android Snowfall compose animation

snowfall-base

Setup

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 🙃

Usage sample

Library has 2 base functions to use as an extension function for Modifier.

Snowfall

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

Custom flakes

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

Colors list and density

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

Snowmelt

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

Combining

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

Kudos

Big thanks to Volodymyr Kondratenko for inspiriation and source code for the first version of this library.

About

Snowfall animation for Android compose

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Kotlin 100.0%