repository·master·Indexed 12 days ago
https://github.com/airbnb/lottie-androidA mobile library that parses Adobe After Effects animations exported as JSON via Bodymovin and renders them natively on Android devices. Includes support for Jetpack Compose via Lottie-Compose, .tgs files (v6.4.1+), dynamic properties, and custom font maps. Features include LottiePainter for Compose rendering and the ability to modify animation properties at runtime using rememberLottieDynamicProperty.
LottieProperty.TEXT to control dynamic text. You can also use existing dynamic property APIs to modify other aspects of the animation at runtime.Starting from version 5.2.0, LottieAnimation requires the progress parameter to be passed as a lambda () -> Float instead of a raw Float. This change allows Lottie to redraw without triggering a full recomposition on every progress update.
If you are using the old API, it is deprecated and will be removed in a future release. You should update your calls as follows:
// Old way (deprecated since 5.2.0)
LottieAnimation(composition, progress)
// New way (recommended)
LottieAnimation(composition, { progress })
// Or using named arguments
LottieAnimation(
composition = composition,
progress = { progress }
)Lottie for Android uses Gradle as its only supported build configuration. To use Lottie in your Android project, add the dependency to your build.gradle file.
Note: Lottie version 2.8.0 and above requires your project to have migrated to androidx.
dependencies {
implementation 'com.airbnb.android:lottie:$lottieVersion'
}In recent versions, images are loaded from assets or decoded from base64 strings embedded in the JSON file on an IO thread pool during parsing.
If you need to supply your own bitmaps manually, you should set them directly on the composition to avoid performing IO tasks on the animation hot path (the main thread). Use the following pattern:
composition.images["your_image_id"].bitmap = yourBitmapclipToCompositionBounds to false (available since version 5.0.0).In Lottie Compose, dynamic properties allow you to modify animation elements (like colors, opacity, or scale) at runtime without changing the original JSON file.
rememberLottieDynamicProperty (for single items) or rememberLottieDynamicProperties (for a collection).KeyPath strings (e.g., "Layer Name", "Shape Name").LottieFrameInfo, which contains information about the current frame (like progress), allowing for frame-aware logic.remember blocks to ensure they are stable across recompositions. The internal addTo and removeFrom mechanisms (used by the library's integration) manage the registration of these properties as LottieValueCallbacks on the LottieDrawable instance.In Jetpack Compose, use the rememberLottiePainter composable to create and manage a LottiePainter. This painter is responsible for rendering a LottieComposition and allows you to control animation properties like progress, renderMode, and dynamicProperties within the Compose lifecycle.
| Parameter | Type | Default | Description |
|---|---|---|---|
composition | LottieComposition? | null | The Lottie composition to render. |
progress | Float | 0f | The current animation progress (0.0 to 1.0). |
outlineMasksAndMattes | Boolean | false | Whether to enable outline masks and mattes. |
applyOpacityToLayers | Boolean | false | Whether to apply opacity to layers. |
enableMergePaths | Boolean | false | Whether to enable merge paths. |
renderMode | RenderMode | RenderMode.AUTOMATIC | The rendering mode to use. |
maintainOriginalImageBounds | Boolean | false | Whether to maintain original image bounds. |
dynamicProperties | LottieDynamicProperties? | null | Dynamic properties to apply to the animation. |
clipToCompositionBounds | Boolean | true | Whether to clip the drawing to the composition bounds. |
clipTextToBoundingBox | Boolean | false | Whether to clip text to its bounding box. |
fontMap | Map<String, Typeface>? | null | A map of font names to Typeface objects. |
asyncUpdates | AsyncUpdates | AsyncUpdates.AUTOMATIC | How asynchronous updates are handled. |
val painter = rememberLottiePainter(
composition = myComposition,
progress = progressState,
renderMode = RenderMode.HARDWARE
)
Image(painter = painter, contentDescription = null)LottieCompositionSpec.ContentProvider.reverseOnRepeat property to make animations play in reverse when they loop..tgs files.