Convert Figma logo to code with AI

airbnb logolottie-android

Render After Effects animations natively on Android and iOS, Web, and React Native

34,999
5,406
34,999
17

Top Related Projects

An iOS library to natively render After Effects vector animations

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

Lottie wrapper for React Native.

Load and get full control of your Rive files in a Flutter project using this library.

Quick Overview

Lottie for Android is a mobile library that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile devices. It allows developers to easily add high-quality animations to their Android applications without the need for manual animation coding.

Pros

  • Seamless integration of complex animations into Android apps
  • Reduces app size compared to traditional animation methods
  • Supports dynamic animation properties that can be changed at runtime
  • Extensive customization options and compatibility with various Android versions

Cons

  • Performance may be impacted for very complex animations
  • Limited support for certain After Effects features
  • Learning curve for creating and exporting animations from After Effects
  • Potential compatibility issues with some older Android devices

Code Examples

  1. Loading a Lottie animation from a JSON file:
val animationView = findViewById<LottieAnimationView>(R.id.animation_view)
animationView.setAnimation(R.raw.animation)
animationView.playAnimation()
  1. Controlling animation playback:
animationView.pauseAnimation()
animationView.resumeAnimation()
animationView.setProgress(0.5f) // Set progress to 50%
  1. Dynamically changing animation properties:
val keyPath = KeyPath("layer_name", "group_name", "shape_name")
val callback = LottieValueCallback(Color.RED)
animationView.addValueCallback(keyPath, LottieProperty.COLOR, callback)
  1. Adding a completion listener:
animationView.addAnimatorListener(object : Animator.AnimatorListener {
    override fun onAnimationEnd(animation: Animator) {
        // Animation completed
    }
    // Implement other methods as needed
})

Getting Started

  1. Add the Lottie dependency to your app's build.gradle file:
dependencies {
    implementation 'com.airbnb.android:lottie:5.2.0'
}
  1. Add a LottieAnimationView to your layout XML:
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_rawRes="@raw/animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"/>
  1. Load and play the animation in your Activity or Fragment:
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val animationView = findViewById<LottieAnimationView>(R.id.animation_view)
    animationView.setAnimation(R.raw.animation)
    animationView.playAnimation()
}

Competitor Comparisons

An iOS library to natively render After Effects vector animations

Pros of lottie-ios

  • Native Swift implementation, optimized for iOS performance
  • Supports Core Animation for smoother animations
  • Tighter integration with iOS-specific features and APIs

Cons of lottie-ios

  • Limited to iOS platform, less versatile for cross-platform development
  • Smaller community and potentially fewer resources compared to Android counterpart
  • May require separate maintenance for iOS-specific issues

Code Comparison

lottie-ios (Swift):

let animationView = AnimationView(name: "animation")
view.addSubview(animationView)
animationView.play()

lottie-android (Kotlin):

val animationView = LottieAnimationView(this)
layout.addView(animationView)
animationView.setAnimation("animation.json")
animationView.playAnimation()

Both libraries offer similar ease of use for implementing Lottie animations, with syntax differences reflecting their respective platforms. The iOS version leverages Swift's concise syntax, while the Android version uses Kotlin's more verbose but flexible approach. Both allow for easy integration of Lottie animations into native app layouts, demonstrating the libraries' focus on simplifying complex animation implementation across different mobile platforms.

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

Pros of lottie-web

  • Cross-browser compatibility, works on all major web browsers
  • Lightweight and easy to integrate into web projects
  • Supports a wider range of animation features and effects

Cons of lottie-web

  • Performance may be slower for complex animations compared to native Android
  • Limited access to device-specific features and optimizations
  • Requires additional setup for offline usage in web applications

Code Comparison

lottie-web:

import lottie from 'lottie-web';

lottie.loadAnimation({
  container: document.getElementById('animation'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
});

lottie-android:

val animationView = findViewById<LottieAnimationView>(R.id.animation_view)
animationView.setAnimation(R.raw.data)
animationView.loop(true)
animationView.playAnimation()

The main differences in the code are:

  1. lottie-web uses JavaScript, while lottie-android uses Kotlin
  2. lottie-web requires specifying the renderer type
  3. lottie-android uses XML layout for the animation view
  4. File paths are handled differently in each implementation

Both libraries aim to simplify the process of adding Lottie animations to their respective platforms, with syntax tailored to their environments.

Lottie wrapper for React Native.

Pros of lottie-react-native

  • Cross-platform support for both iOS and Android
  • Seamless integration with React Native components
  • Simplified API for easier implementation in React Native projects

Cons of lottie-react-native

  • Limited to React Native ecosystem, not suitable for native Android development
  • May have performance overhead due to the React Native bridge
  • Potentially slower updates compared to the native Android library

Code Comparison

lottie-react-native:

import LottieView from 'lottie-react-native';

<LottieView
  source={require('./animation.json')}
  autoPlay
  loop
/>

lottie-android:

val animationView = LottieAnimationView(context)
animationView.setAnimation(R.raw.animation)
animationView.playAnimation()
animationView.repeatCount = LottieDrawable.INFINITE

The lottie-react-native code is more concise and declarative, fitting well with React Native's component-based approach. The lottie-android code provides more fine-grained control over the animation properties but requires more setup.

Both libraries offer powerful animation capabilities, with lottie-react-native focusing on cross-platform React Native development and lottie-android specializing in native Android applications. The choice between them depends on the specific project requirements and development ecosystem.

Load and get full control of your Rive files in a Flutter project using this library.

Pros of Flare-Flutter

  • Native Flutter integration, offering better performance and smoother animations
  • Supports real-time animations and interactive elements
  • Smaller file sizes for complex animations

Cons of Flare-Flutter

  • Limited ecosystem and community support compared to Lottie
  • Fewer pre-made animations available
  • Steeper learning curve for designers transitioning from other tools

Code Comparison

Flare-Flutter:

FlareActor(
  "assets/animation.flr",
  animation: "idle",
  fit: BoxFit.contain,
)

Lottie-Android:

LottieAnimationView(context).apply {
    setAnimation("animation.json")
    loop(true)
    playAnimation()
}

Both libraries offer straightforward ways to implement animations, but Flare-Flutter's syntax is more concise and Flutter-friendly. Lottie-Android requires more setup code and is specific to Android development.

Flare-Flutter is ideal for Flutter developers seeking high-performance, interactive animations with smaller file sizes. However, Lottie-Android benefits from a larger community, more resources, and wider platform support, making it a solid choice for Android-specific projects or those requiring a vast library of pre-made animations.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Lottie for Android, iOS, React Native, Web, and Windows

Build Status

Get it on Google Play

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. They say a picture is worth 1,000 words so here are 13,000:

Sponsors

Lottie is maintained and improved on nights and weekends. If you use Lottie in your app, please consider sponsoring it to help ensure that we can continue to improve the project we love. Click the sponsor button above to learn more

Sponsor Button

Lead Sponsors

Lottiefiles

Lottie Lab

Airbnb

Stream

Emerge Tools

Coinbase

View documentation, FAQ, help, examples, and more at airbnb.io/lottie

Example1

Example2

Example3

Community

Example4

Download

Gradle is the only supported build configuration, so just add the dependency to your project build.gradle file:

dependencies {
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

The latest Lottie version is: lottieVersion

The latest stable Lottie-Compose version is: lottieVersion Click here for more information on Lottie-Compose.

Lottie 2.8.0 and above only supports projects that have been migrated to androidx. For more information, read Google's migration guide.

Contributing

Because development has started for Lottie Compose, Gradle, and the Android Gradle Plugin will be kept up to date with the latest canaries. This also requires you to use Android Studio Canary builds. Preview builds can be installed side by side with stable versions.

NPM DownloadsLast 30 Days