Lottie Library implementation, usage, handling animation events.

In this blog, We implement, use and handling events, As we know that, Lottie is an animation Library that is used in Android, IOS, and React-Native applications.

In the previous blog, we learn about what is Lottie, its various functions, where we use? and it’s alternatives.  https://mobikul.com/lottie-library-for-animation/

Now we implement Lottie-Library animations in our application and interact with them.

• Suppose if we want to change color at dynamically in our Activity then we apply the PorterDuffColorFilter class that does to change different color for animation as our requirements.
  
  PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(Color.GREEN, PorterDuff.Mode.LIGHTEN);

  1	PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(Color.GREEN, PorterDuff.Mode.LIGHTEN);

  
  
  @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_color_filter); // use for color filter colorFilter = new PorterDuffColorFilter(Color.GREEN, PorterDuff.Mode.LIGHTEN); normalAnimation = (LottieAnimationView) findViewById(R.id.normal_animation); colorAnimation = (LottieAnimationView) findViewById(R.id.color_animation); LottieComposition.Factory.fromAssetFileName(this, "data.json", new OnCompositionLoadedListener() { @Override public void onCompositionLoaded(LottieComposition composition) { setComposition(composition); } }) ; } public void setComposition(LottieComposition composition) { normalAnimation.setComposition(composition); normalAnimation.loop(true); normalAnimation.playAnimation(); // change color colorAnimation.setComposition(composition); colorAnimation.addColorFilter(colorFilter); colorAnimation.loop(true); colorAnimation.playAnimation(); }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

  @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_color_filter);         //  use for color filter         colorFilter = new PorterDuffColorFilter(Color.GREEN, PorterDuff.Mode.LIGHTEN);           normalAnimation = (LottieAnimationView) findViewById(R.id.normal_animation);         colorAnimation = (LottieAnimationView) findViewById(R.id.color_animation);           LottieComposition.Factory.fromAssetFileName(this, "data.json", new OnCompositionLoadedListener() {             @Override             public void onCompositionLoaded(LottieComposition composition) {                 setComposition(composition);             }         }) ;     }       public void setComposition(LottieComposition composition) {         normalAnimation.setComposition(composition);         normalAnimation.loop(true);         normalAnimation.playAnimation(); // change color         colorAnimation.setComposition(composition);         colorAnimation.addColorFilter(colorFilter);         colorAnimation.loop(true);         colorAnimation.playAnimation();     }

  
  Here I am taking two LottieAnimationView and change the color of colorAnimation in Green.
• We can change its scale without worry about animation content will blurred, either scaled big size or small size.
  
  @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_scalling); originalAnimation = (LottieAnimationView) findViewById(R.id.original_animation); scaleAnimation = (LottieAnimationView) findViewById(R.id.scalling_animation); originalAnimation.playAnimation(); LottieComposition.Factory.fromAssetFileName(this, "Belo Foggy.json", new OnCompositionLoadedListener() { @Override public void onCompositionLoaded(LottieComposition composition) { scaleAnimation.setComposition(composition); scaleAnimation.setScale(0.8f); scaleAnimation.playAnimation(); } }); }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_scalling);         originalAnimation = (LottieAnimationView) findViewById(R.id.original_animation);         scaleAnimation = (LottieAnimationView) findViewById(R.id.scalling_animation);                originalAnimation.playAnimation();           LottieComposition.Factory.fromAssetFileName(this, "Belo Foggy.json", new OnCompositionLoadedListener() {             @Override             public void onCompositionLoaded(LottieComposition composition) {                 scaleAnimation.setComposition(composition);                 scaleAnimation.setScale(0.8f);                 scaleAnimation.playAnimation();             }         });     }

  
   
• We can add an Event Listener when the animation is running. In bellow example, we take one LottieAnimationView and one SeekBar. Add a Listener to animation view that updates the progress of SeekBar.

• Also, we add an image with animation view, For this, we will add an Image Directory parallel to .json file of animation.

Performance and Memory:-

• If the composition has no masks or mattes then the performance and memory overhead should be quite good. No bitmaps are created and most operations are simple canvas draw operations.
• If the composition has masks or mattes, offscreen buffers will be used and there will be a performance hit as it gets drawn.
• If you are using your animation in a list, it is recommended to use a CacheStrategy in LottieAnimationView.setAnimation(String, CacheStrategy) so the animations do not have to be deserialized every time.

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

PREVIOUS