Lottie Library

What is Lottie?
Lottie is an animation library that parses After Effect animation exported JSON file i.e. produced by Bodymovin.
The main advantage of using Lottie is that animating CALayers (iOS) to generate complex animations is a tedious and very complicated job, instead, it’s more user-friendly to create the animation using After Effects.

Why Lottie?

• Support Flexible After Effects features
  It currently supports solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And it’ll be adding new features on a regular basis.
• Manipulate our animation any way we like
  We can program our animation to respond to any interaction, such as we can go backward and forward to any animation any time.
• Small file sizes
  Bundle vector animations within our app without having to worry about multiple dimensions or large file sizes. Alternatively, we can decouple animation files from our app’s code entirely by loading them from a JSON API.

What do we do with Lottie?

• We can provide an Asynchronous task to render our animation.
• We can change color at the dynamic time by adding a color filter ( 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.)
• We can change the scale at the dynamic time.
• We can manage its progress.
• We can add events when any update requires.

How will we implement animation with Lottie in our Project?

• First of all, we will add Lottie library dependency in the app level build.gradle file.
  
  Java

  dependencies { compile 'com.airbnb.android:lottie:2.0.0-rc1' }

  1 2 3

  dependencies {     compile 'com.airbnb.android:lottie:2.0.0-rc1' }

• Then, we add LottieAnimationView in our layout.
• All JSON files put in the assets directory (parallel to java directory of application).

How we use exported animated JSON file with LottieAnimationView?

1. By the static way in our layout.
   
   
   Java

   <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view1" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_fileName="Belo Foggy.json" app:lottie_loop="true"/>

   1 2 3 4 5 6

   <com.airbnb.lottie.LottieAnimationView      android:id="@+id/animation_view1"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      app:lottie_fileName="Belo Foggy.json"      app:lottie_loop="true"/>

2. By programmatically.
   
   Java

   LottieAnimationView animationView3; animationView3 = (LottieAnimationView) findViewById(R.id.animation_view); animationView3.setAnimation("heart.json"); animationView3.loop(true); animationView3.playAnimation();

   1 2 3 4 5

   LottieAnimationView animationView3; animationView3 = (LottieAnimationView) findViewById(R.id.animation_view); animationView3.setAnimation("heart.json"); animationView3.loop(true); animationView3.playAnimation();

3. By Composition.
   
   LottieComposition.Factory.fromAssetFileName(this, "data.json", new OnCompositionLoadedListener() { @Override public void onCompositionLoaded(LottieComposition composition) { normalAnimation.setComposition(composition); normalAnimation.loop(true); normalAnimation.playAnimation(); } }) ;

   1 2 3 4 5 6 7 8

   LottieComposition.Factory.fromAssetFileName(this, "data.json", new OnCompositionLoadedListener() {             @Override             public void onCompositionLoaded(LottieComposition composition) {                 normalAnimation.setComposition(composition);                 normalAnimation.loop(true);                 normalAnimation.playAnimation();             }         }) ;

LottieAnimationView :-

1. loop() :- for repeat animation.
2. playAnimation() :- for start anination.
3. isAnimating():-  return true, if animation view is animating.
4. cancelAnimation():- for stop an animation.
5. setProgress():- set progress (between 0 to 1) of animation.
6. addColorFilter(color_filter):- add color in animation view.
7. setScale():- change scale of animation.

Reference : https://github.com/airbnb/lottie-android#image-support

 Continue in next blog….