只在播放时显示 Lottie 动画

Question

为了实现标题中的目标，我有两个单独的问题。

第一个问题是：在XML中，com.airbnb.lottie.LottieAnimationView 的可见状态默认是什么？我在我的XML中使用了两个具有相同特征的 LottieAnimationView：

    <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"
        />

第一个问题只有在我使用lottieanimationview.playAnimation()时，才能看到动画效果；而第二个问题则是默认情况下，活动开始时就立即呈现。

我提出了第二个问题，是因为第一个问题所描述的问题。为了解决这个问题，我首先为那些在活动开始时立即可见的LottieAnimationView添加了android:visibility="gone"，然后尝试了几段代码来使动画在播放时可见，并在完成后恢复不可见状态（但都没有成功）：

一种尝试：

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

另一次尝试：

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

第三次尝试：

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

第四次尝试:

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

        animation.setVisibility(View.GONE);


    }

在我看来，最简单的解决方案是在 com.airbnb.lottie.LottieAnimationView 上使用一个xml属性，表示它不必默认可见，除非播放它，但似乎这样的属性并不存在... 你们会如何解决这个问题？提前致谢。

- assensi

Answer 1

还有其他的监听器，您可以使用它们来隐藏/显示Lottie视图。

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

- Prithvi Bhola

---

你好朋友，这个可以。不过我还有一个问题。在同一个活动中我有很多动画，你知道是否有一种方法可以在onAnimationStart和onAnimationEnd中使用通用的动画对象而不是lottieCatThrowsCup，这样根据所点击的动画，onAnimationStart将会说类似于animation.setVisibility(View.VISIBLE)的东西吗？（当然，在所有动画之前我会使用.addAnimationListener(this)） - assensi

你的解决方案存在问题，如果我有许多需要在onAnimationStart中设置为VISIBLE的动画，当只播放一个动画时，我不希望所有动画都可见。 - assensi

@assensi 对于所有“Lottie动画”使用单个对象可能会产生问题。每个动画的时间长度都不同。在这种情况下，单个对象将无法工作。您需要为屏幕上每个“Lottie视图”拥有不同的监听器。 - Prithvi Bhola

Answer 2

隐藏的代码：

lottieAnimationView.pauseAnimation()
lottieAnimationView.setImageDrawable(null)

显示用：

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

- NickUnuchek

Answer 3

将Animator.AnimatorListener添加到您的LottieAnimationView中，并在onAnimationStart()和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) {

            }
        });

- Rishabh Sagar

Answer 4

使用这个:

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

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

- Saurabh Thorat