Animation

The landscapist-animation package offers a set of valuable image plugins related to animations, including crossfade and circular reveal animations.

To utilize these animation supports, simply add the following dependency:

GroovyKTS

dependencies {
    implementation "com.github.skydoves:landscapist-animation:$version"
}

dependencies {
    implementation("com.github.skydoves:landscapist-animation:$version")
}

Crossfade Animation

You can effortlessly implement the crossfade animation while displaying images using the CrossfadePlugin, as shown in the example below:

GlideCoilFresco

GlideImage(
  component = rememberImageComponent {
      +CrossfadePlugin(
        duration = 550
      )
  },
  ..
)

CoilImage(
  component = rememberImageComponent {
      +CrossfadePlugin(
        duration = 550
      )
  },
  ..
)

FrescoImage(
  component = rememberImageComponent {
      +CrossfadePlugin(
        duration = 550
      )
  },
  ..
)

By using the CrossfadePlugin, you can achieve smooth and visually pleasing image transitions that gracefully fade from one image to another. This animation effect adds a touch of elegance to your app and enhances the overall user experience while displaying images.

Circular Reveal Animation

You can seamlessly implement the circular reveal animation while displaying images using the CircularRevealPlugin, as demonstrated below:

GlideCoilFresco

GlideImage(
  component = rememberImageComponent {
      +CircularRevealPlugin(
        duration = 350
      )
  },
  ..
)

CoilImage(
  component = rememberImageComponent {
      +CircularRevealPlugin(
        duration = 350
      )
  },
  ..
)

FrescoImage(
  component = rememberImageComponent {
      +CircularRevealPlugin(
        duration = 350
      )
  },
)

The CircularRevealPlugin allows you to create captivating image transitions that emanate from a circular shape, adding a visually engaging effect to your app. This animation enhances the user experience and provides a delightful way to showcase images within your application.

Preview

Circular Reveal	Crossfade