airbnb/lottie-android compose-1.0.0-rc01-1

Compose 1.0.0-rc01-1

on GitHub

Breaking Changes

LottieAnimation now takes a progress float instead of driving the animation internally. The driving of animations has been split into a new LottieAnimatable class and animateLottieCompositionAsState function. These are analogous to Jetpack's Animatable and animate*AsState functions. Properties that pertain to the animation such as speed, repeat count, and the new clip spec are part of animateLottieComposition whereas properties that are related to rendering such as enabling merge paths and setting an image asset delegate are on the LottieAnimation composable.

lottieComposition has also been renamed rememberLottieComposition.

The docs have been update to reflect the new API and there are lots of examples here.

There are overloaded version of LottieAnimation that merge the properties for convenience. Please refer to the docs for LottieAnimation, LottieAnimatable, animateLottieCompositionAsState and rememberLottieComposition for more information.

• Added the ability to clip the progress bounds of an animation.
• Added the ability to set and control dynamic properties.
• Removed the existing imageAssetDelegate parameter and moved imageAssetsFolder to rememberLottieComposition.
  Images are now loaded from assets or decoded from the base64 string embedded in the json file during parsing
  and on the IO thread pool rather than upon first render on the main thread during animations. If you want to
  supply your own animations, call composition.images["your_image_id"].bitmap = yourBitmap. This lets you control
  exactly how and when the bitmaps get created and set. The previous implementation of calling a callback on every
  frame encouraged the incorrect behavior of doing IO tasks during the animation hot path. Check out ImagesExamplesPage.kt
  for usage.

Examples

@Composable
private fun PlayOnce() {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
    LottieAnimation(composition)
}

@Composable
private fun RepeatForever() {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
    LottieAnimation(
        composition,
        iterations = LottieConstants.IterateForever,
    )
}

@Composable
private fun RepeatForeverWithAnimateLottieCompositionAsState() {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
    val progress by animateLottieCompositionAsState(
        composition,
        iterations = LottieConstants.IterateForever,
    )
    LottieAnimation(
        composition,
        progress,
    )
}

@Composable
private fun RepeatForeverWithLottieAnimatable() {
    val anim = rememberLottieAnimatable()
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
    LaunchedEffect(composition) {
        anim.animate(
            composition,
            iterations = LottieConstants.IterateForever,
        )
    }
    LottieAnimation(anim.composition, anim.progress)
}