Lottie Android - How to play from position to position and repeat by range?

Question

I found this Lottie Play/Pause button, but I don't know how to show Play state when my audio player paused, show Pause state and repeat with equalizer animation in it (see the lottie preview) when the player is playing. I've read the document but no example for this case. I don't have any knowledge about After Effect to control the animation too.

Sapota

You'd need to split this into several animations in order to use it in the real world. – Extraterritorial

Answer 1

According Lottie animation it has frames, so by manupulating this frames you can achieve what you want, sample

AnimationView play_pause = findViewById(R.id.play_pause);
play_pause.cancelAnimation();
play_pause.setMinFrame(90);
play_pause.setMaxFrame(175);

This code will repeat your animation in rage of 90-175 I tested it on you Lottie Play/Pause button, so on clicking to stop you must change MaxFrame to 210 and set loop to 1 after animation finished it will stop in play picture.

And this is whole code to achieve something like that

Boolean isPlaying = false;
play_pause = findViewById(R.id.play_pause);
play_pause.pauseAnimation();
play_pause.setMinFrame(60);
play_pause.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {

            if (isPlaying){

                play_pause.removeAllAnimatorListeners();
                play_pause.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator valueAnimator) {

                        if (valueAnimator.getAnimatedFraction() == 1){

                            play_pause.setMinFrame(60);
                            play_pause.pauseAnimation();

                        }
                    }
                });

                play_pause.setMinFrame(175);
                play_pause.setMaxFrame(210);
                isPlaying = false;
            } else {
                play_pause.setMaxFrame(175);
                play_pause.removeAllUpdateListeners();
                play_pause.addAnimatorListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animator) {

                    }

                    @Override
                    public void onAnimationEnd(Animator animator) {

                    }

                    @Override
                    public void onAnimationCancel(Animator animator) {

                    }

                    @Override
                    public void onAnimationRepeat(Animator animator) {
                        play_pause.setMinFrame(90);
                    }
                });
                play_pause.resumeAnimation();
                isPlaying = true;
            }
        }
    });

Gardas

This is what I'm looking for. It works perfectly. Thanks! – Sapota