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 LottieAnimationViewthat 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.LottieAnimationViewto 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.

Assam

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");
        }
    });

Heartbeat

Hello friend, this works. I have another question though. I have many animations on that same activity, do you know if there is a way to use a general animation object inside onAnimationStart and onAnimationEnd instead of lottieCatThrowsCup so that, depending on the animation clicked, the onAnimationStart will say something like animation.setVisibility(View.VISIBLE)? (of course previously I'll have used .addAnimationListener(this) to all of the animations) – Assam

The problem with your solution is that if I have many animations that need to be set to VISIBLE in the onAnimationStart, I don't want all to be visible when only one is played. – Assam

@Assam Having a single object for all the Lottie animations can create a problem. Each animation will have a different time length. The single object won't work in that case. You need to have different listeners for each Lottie view you have on your screen. – Heartbeat

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) {

            }
        });

Nonplus

Answer 3

For hide:

lottieAnimationView.pauseAnimation()
lottieAnimationView.setImageDrawable(null)

For display:

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

Cayman

Answer 4

Use this:

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

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

Text