Most of time animation play a important role to success of any application and in previous article we discuss some important animation tutorials for Kotlin. Most of developers familiar with Adobe after effects and know how amazing animations created.

Sometimes we also want to add that amazing Adobe after effect animations in our application. And if you’re that type of developer then this library can help you to do this.

See this : Android Crumbling Image SlideView

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!

With Lottie, digging through frameworks for reference, guessing durations, manually creating Bézier curves, and re-making animations with nothing more than a GIF for reference will be a thing of the past. Now engineers can use exactly what the designer intended, exactly how it was made. To demonstrate that, they’ve recreated their animations and provided After Effects and JSON files of each in given sample app.

Recommended reading : Top 30 Android Tools Every Developer should Know

Our goal is to support as many After Effects features as we possibly can, to allow for a lot more than simple icon animations. They’ve created a handful of other examples to show the library’s flexibility, richness, and deep feature set. In the sample app, there are also source files for a variety of different kinds of animations, including basic line art, character-based animations, and dynamic logo animations with multiple angles and cuts.

Now lets move to development!!

Lottie – How to Convert Adobe After Effects to Kotlin?

All of these animations were created in After Effects, exported with Bodymovin, and rendered natively with no additional engineering effort.

Example

Download

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

dependencies {  
  compile 'com.airbnb.android:lottie:2.1.0'
}

Using Lottie

Lottie supports ICS (API 14) and above. The simplest way to use it is with LottieAnimationView:

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="hello-world.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true" />

Or you can load it programmatically in multiple ways. From a json asset in app/src/main/assets:

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);
animationView.playAnimation();

This method will load the file and parse the animation in the background and asynchronously start rendering once completed.

For Kotlin developers : Bye bye Gradle and Maven !! Say hello Kotlin Kobalt

If you want to reuse an animation such as in each item of a list or load it from a network request JSONObject:

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
 ...
 Cancellable compositionCancellable = LottieComposition.Factory.fromJson(getResources(), jsonObject, (composition) -> {
     animationView.setComposition(composition);
     animationView.playAnimation();
 });

 // Cancel to stop asynchronous loading of composition
 // compositionCancellable.cancel();

You can then control the animation or add listeners:

animationView.addAnimatorUpdateListener((animation) -> {
    // Do something.
});
animationView.playAnimation();
...
if (animationView.isAnimating()) {
    // Do something.
}
...
animationView.setProgress(0.5f);
...
// Custom animation speed or duration.
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
    .setDuration(500);
animator.addUpdateListener(animation -> {
    animationView.setProgress(animation.getAnimatedValue());
});
animator.start();
...
animationView.cancelAnimation();

You can add a color filter to the whole animation, a specific layer, or specific content within a layer:

// Any class that conforms to the ColorFilter interface
final PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.LIGHTEN);

// Adding a color filter to the whole view
animationView.addColorFilter(colorFilter);

// Adding a color filter to a specific layer
animationView.addColorFilterToLayer("hello_layer", colorFilter);

// Adding a color filter to specfic content on the "hello_layer"
animationView.addColorFilterToContent("hello_layer", "hello", colorFilter);

// Clear all color filters
animationView.clearColorFilters();

You can also add a color filter to the whole animation in the layout XML, which will be applied with PorterDuff.Mode.SRC_ATOP:

<com.airbnb.lottie.LottieAnimationView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="hello-world.json"
        app:lottie_colorFilter="@color/blue" />

Note: Color filters are only available for layers such as Image layer and Solid layer as well as content that includes fill, stroke, or group content.

Under the hood, LottieAnimationView uses LottieDrawable to render its animations. If you need to, you can use the drawable form directly:

LottieDrawable drawable = new LottieDrawable();
LottieComposition.Factory.fromAssetFileName(getContext(), "hello-world.json", (composition) -> {
    drawable.setComposition(composition);
});

If your animation will be frequently reused, LottieAnimationView has an optional caching strategy built in. Use LottieAnimationView#setAnimation(String, CacheStrategy). CacheStrategy can be Strong, Weak, or None to have LottieAnimationView hold a strong or weak reference to the loaded and parsed animation.

Do you know : 5 cool things you probably don’t know about Kotlin

Image Support

You can animate images if your animation is loaded from assets and your image file is in a subdirectory of assets. Just call setImageAssetsFolder on LottieAnimationView or LottieDrawable with the relative folder inside of assets and make sure that the images that bodymovin export are in that folder with their names unchanged (should be img_#). If you use LottieDrawable directly, you must call recycleBitmaps when you are done with it.

If you need to provide your own bitmaps if you downloaded them from the network or something, you can provide a delegate to do that:

animationView.setImageAssetDelegate(new ImageAssetDelegate() {
         @Override public Bitmap fetchBitmap(LottieImageAsset asset) {
           getBitmap(asset);
         }
       });

Supported After Effects Features

Keyframe Interpolation

• Linear Interpolation
• Bezier Interpolation
• Hold Interpolation
• Rove Across Time
• Spatial Bezier

Solids

• Transform Anchor Point
• Transform Position
• Transform Scale
• Transform Rotation
• Transform Opacity

Masks

• Path
• Opacity
• Multiple Masks (additive, subtractive, inverted)

Track Mattes

• Alpha Matte

Parenting

• Multiple Parenting
• Nulls

Shape Layers

• Rectangle (All properties)
• Ellipse (All properties)
• Polystar (All properties)
• Polygon (All properties. Integer point values only.)
• Path (All properties)
• Anchor Point
• Position
• Scale
• Rotation
• Opacity
• Group Transforms (Anchor point, position, scale etc)
• Multiple paths in one group
• Merge paths (off by default and must be explicitly enabled with enableMergePathsForKitKatAndAbove)

Stroke (shape layer)

• Stroke Color
• Stroke Opacity
• Stroke Width
• Line Cap
• Dashes

Fill (shape layer)

• Fill Color
• Fill Opacity
• Fill Rule

Trim Paths (shape layer)

• Trim Paths Start
• Trim Paths End
• Trim Paths Offset

Hope you like this article!!!