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.
1PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(Color.GREEN, PorterDuff.Mode.LIGHTEN);
12345678910111213141516171819202122232425262728@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_color_filter);// use for color filtercolorFilter = 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() {@Overridepublic void onCompositionLoaded(LottieComposition composition) {setComposition(composition);}}) ;}public void setComposition(LottieComposition composition) {normalAnimation.setComposition(composition);normalAnimation.loop(true);normalAnimation.playAnimation();// change colorcolorAnimation.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.
123456789101112131415161718@Overrideprotected 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() {@Overridepublic 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.
|
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 29 30 31 32 33 34 35 36 37 38 39 |
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_event_listener); eventAnimation = (LottieAnimationView) findViewById(R.id.animation_view2); seekBar = (SeekBar) findViewById(R.id.seek_bar); LottieComposition.Factory.fromAssetFileName(this, "Spider Loader.json", new OnCompositionLoadedListener() { @Override public void onCompositionLoaded(LottieComposition composition) { seekBar.setProgress(0); eventAnimation.setComposition(composition); eventAnimation.loop(true); eventAnimation.playAnimation(); } }); seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { if (!eventAnimation.isAnimating()) { eventAnimation.setScale(0.1f); eventAnimation.setProgress(progress / 100f); } } @Override public void onStartTrackingTouch(SeekBar seekBar) { } @Override public void onStopTrackingTouch(SeekBar seekBar) { } }); eventAnimation.addAnimatorUpdateListener( new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { seekBar.setProgress((int) (animation.getAnimatedFraction() * 100)); } }); } |
- Also, we add an image with animation view, For this, we will add an Image Directory parallel to .json file of animation.
|
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 29 30 31 32 33 34 35 36 37 |
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_image_support); animationView = (LottieAnimationView) findViewById(R.id.animation_view_img); animationView.setAnimation("WeAccept.json"); animationView.setImageAssetsFolder("Images/WeAccept"); animationView.loop(true); submit = (LottieAnimationView) findViewById(R.id.submit_bt); submit.setAnimation("data.json"); submit.setImageAssetsFolder("images"); submit.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { submit.setClickable(false); submit.playAnimation(); animationView.playAnimation(); findViewById(R.id.submit_text).setVisibility(View.GONE); animationView.setScale( animationView.getScale()/2.5f); } }); submit.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { Log.d("Ashwini", "onAnimationUpdate: " + animation.getAnimatedFraction()); // use following code for set its progress between 0.15 to 0.25 if(submit.isAnimating() && animation.getAnimatedFraction() > 0.25){ submit.cancelAnimation(); submit.setProgress(0.15f); submit.playAnimation(); } } }); } |
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
. . .
1 comments