使Lottie动画仅在播放时可见

时间:2019-08-07 09:47:10

标签: android lottie

为了达到标题中所述的目标,我有两个单独的问题。

第一个问题是:默认情况下,com.airbnb.lottie.LottieAnimationView在XML中的可见性状态是什么?我在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()时,第一个才可见,但是默认情况下,活动启动时第二个立即可见。

我的第二个问题是由于第一个问题中描述的问题。为了解决此问题,我首先向活动开始时立即可见的android:visibility="gone"中添加了LottieAnimationView,然后尝试了几段代码使动画在播放时可见,并在播放后恢复为不可见。完成(都没有成功):

一次尝试:

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属性,以指示默认情况下除非播放它,否则它不必是可见的,但它似乎不存在。 ..你们将如何解决这个问题?预先感谢。

3 个答案:

答案 0 :(得分:2)

还有其他listeners,您可以用来隐藏/显示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");
        }
    });

答案 1 :(得分:0)

使用此:

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

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

答案 2 :(得分:0)

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

        }
    });