Make Lottie animation visible only while it is playing

Question

I have two separate questions in order to achieve the goal stated in the title.

The first question is: what's the visibility state of a com.airbnb.lottie.LottieAnimationView by default in the XML? I have used two different LottieAnimationView's in my XML with the same characteristics:

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_animation_ribbon_and_confetti"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:lottie_autoPlay="false"
        app:lottie_fileName="exploding-ribbon-and-confetti.json"
        app:lottie_loop="true"
        app:lottie_repeatCount="1"/>

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_cat_throws_cup"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/puntuacionTotal"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/puntosAtrevimiento"
        app:layout_constraintBottom_toTopOf="@id/textoAtrevimiento"
        app:lottie_autoPlay="false"
        app:lottie_fileName="cat_throws_cup.json"
        app:lottie_loop="true"
        app:lottie_repeatCount="1"
        />

And while the first is only visible when I use lottieanimationview.playAnimation() from code, the second is immediately visible by default when the Activity starts.

My second question is due to the problem described in the first question. To solve this problem I first added android:visibility="gone" to those LottieAnimationView that were immediately visible when the activity started, and then I tried several pieces of code to make the animations visible when they were played and back to invisible after finished (all without success):

One attempt:

lottieCatThrowsCup.setVisibility(View.VISIBLE);
lottieCatThrowsCup.playAnimation();
if(!(lottieCatThrowsCup.isAnimating())) lottieCatThrowsCup.setVisibility(View.GONE);

Another attempt:

lottieCatThrowsCup.setVisibility(View.VISIBLE);
lottieCatThrowsCup.playAnimation();
if(!lottieCatThrowsCup.isAnimating())lottieCatThrowsCup.cancelAnimation();

Third attempt:

lottieCatThrowsCup.setVisibility(View.VISIBLE);
lottieCatThrowsCup.playAnimation();
lottieCatThrowsCup.cancelAnimation();

Fourth attempt:

lottieCatThrowsCup.setVisibility(View.VISIBLE);
lottieCatThrowsCup.playAnimation();
lottieCatThrowsCup.addAnimatorListener(this);
@Override
    public void onAnimationEnd(Animator animation) {

        animation.setVisibility(View.GONE);


    }

To my mind, the easiest solution would be to use an xml attribute on com.airbnb.lottie.LottieAnimationView to indicate that it doesn't have to be visible by default unless it's played, but it doesn't seem to exist one... How would you guys solve this? Thanks in advance.

Answer 1

There are other listeners as well that you can use to hide/show Lottie view .

mAddedToCartAnimation.addAnimatorListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
            Log.e("Animation:","start");
            lottieCatThrowsCup.setVisibility(View.VISIBLE);
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            Log.e("Animation:","end");
            lottieCatThrowsCup.setVisibility(View.GONE);
        }

        @Override
        public void onAnimationCancel(Animator animation) {
            Log.e("Animation:","cancel");
        }

        @Override
        public void onAnimationRepeat(Animator animation) {
            Log.e("Animation:","repeat");
        }
    });

Answer 2

Add Animator.AnimatorListener to your LottieAnimationView and handle its visibility in onAnimationStart() and onAnimationEnd()

lottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() {

            @Override
            public void onAnimationStart(Animator animator) {
             // Make the LottieAnimationView visible here    
            }


            @Override
            public void onAnimationEnd(Animator animator) {
             // Hide the LottieAnimationView here
            }


            @Override
            public void onAnimationCancel(Animator animator) {

            }


            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });

Answer 3

Use this:

lottieCatThrowsCup.setVisibility(View.VISIBLE);
lottieCatThrowsCup.playAnimation();
lottieCatThrowsCup.addAnimatorListener(this);

@Override
public void onAnimationEnd(Animator animation) {
    lottieCatThrowsCup.setVisibility(View.GONE);
}

Answer 4

For hide:

lottieAnimationView.pauseAnimation()
lottieAnimationView.setImageDrawable(null)

For display:

lottieAnimationView.setAnimation(R.raw.lottie)
lottieAnimationView.playAnimation()