Skip to content

Android compose pulsation (waving, pulsating, reveal) animation

License

Notifications You must be signed in to change notification settings

idapgroup/Pulsation

Repository files navigation

Pulsation

Release

Android compose pulsation (waving, pulsating, reveal) animation

Setup

Please, add to repositories jitpack:

repositories {
  mavenCentral()
  ...
  maven { url 'https://jitpack.io' }
}

Add to your module next dependency:

dependencies {
  implementation 'com.github.idapgroup:Pulsation:<latest-version>'
}

Note: Do not forget to add compose dependencies 🙃

Usage sample

Animation duplicates provided content and animates it on given content background.

There is 3 base types to use.

Linear

Creates base Linear animation for provided content:

        Pulsation(
            enabled = true,
            type = PulsationType.Linear(duration = 2000, delayBetweenRepeats = 1000)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Red, shape = CircleShape)
                    .size(100.dp)
            )
        }

or example with real content:

      Pulsation(
          enabled = true,
          type = PulsationType.Linear(duration = 3000, delayBetweenRepeats = 1000)
      ) {
        Image(painter = painterResource(id = R.drawable.ic_launcher_round), contentDescription = null)
      }
device-2023-05-18-154157.webm

Iterative

Uses animation cycles and add possibility to add delay between them:

        Pulsation(
            enabled = true,
            type = PulsationType.Iterative(
                iterations = 3,
                iterationDelay = 0,
                iterationDuration = 500,
                delayBetweenRepeats = 1000
            )
        ) {
            Image(
                modifier = Modifier.size(100.dp),
                painter = painterResource(id = R.drawable.ic_launcher_round),
                contentDescription = null
            )
        }
device-2023-05-18-155303.webm

Races

Uses waving animation behavior:

        Pulsation(
            enabled = true,
            type = PulsationType.Races(
                duration = 2500,
                contentType = ContentType.Colored(Color.Green, CircleShape)
            )
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Yellow, shape = CircleShape)
                    .size(124.dp)
            )
        }
device-2023-06-29-172707.webm

ContentType

Also was added a new animation object behavior: ContentType. It gives you an ability to change background pulsation view type.