Journey from After Effects Animation to Android Animation

Ngima Sherpa
2 min readMar 19, 2020

I have been working as mobile developer for several years. From the beginning of my carrier or even before I enthusiasts on UI/UX and animation. It was quite difficult to get complex animations in mobile platform then Few years back Airbnb introduced a animation library Lottie.

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Why Lottie?

  • Flexible After Effects features: Lottie currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And They have been adding new features on a regular basis.
  • Manipulate your animation any way you like: You can go forward, backward, and — most importantly — you can program your animation to respond to any interaction.
  • Small file sizes: Bundle vector animations within your app without having to worry about multiple dimensions or large file sizes. Alternatively, you can decouple animation files from your app’s code entirely by loading them from a JSON API.

It’s really simple to use the Lottie animation library by simply following their documentation.

I have created a tutorial to create after effect animation, exporting json and using it in android.

Adding Lottie in your Project

Just add the dependency to your project build.gradle file:

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

Loading an Animation

Lottie supports API 16 and above.

Lottie animations can load animations from:

  • A json animation in src/main/res/raw.
  • A json file in src/main/assets.
  • A zip file in src/main/assets. See images docs for more info.
  • A url to a json or zip file.
  • A json string. The source can be from anything including your own network stack.
  • An InputStream to either a json file or a zip file.

Using Lottie Animation directly from 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_filename_located_in_raw"
// or
app:lottie_fileName="animation_filename_located_assets.json"
// Loop indefinitely
app:lottie_loop="true"
// Start playing as soon as the animation is loaded
app:lottie_autoPlay="true" />

You can explore more from the documentation

--

--

Ngima Sherpa
Ngima Sherpa

Written by Ngima Sherpa

Mobile Developer | UI Designer

No responses yet