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:
+
dependencies {
+ implementation "com.github.skydoves:landscapist-animation:$version"
+}
+dependencies {
+ implementation("com.github.skydoves:landscapist-animation:$version")
+}
+You can effortlessly implement the crossfade animation while displaying images using the CrossfadePlugin, as shown in the example below:
+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.
You can seamlessly implement the circular reveal animation while displaying images using the CircularRevealPlugin, as demonstrated below:
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.
| Circular Reveal | +Crossfade | +
|---|---|
 |
+ |
+