如何知道Lottie动画何时完成？

Question

我有一个片段，这里是onCreateView方法：

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
    // Inflate the layout for this fragment
    mView = inflater.inflate(R.layout.fragment_added_to_cart_anim, container, false);
    ButterKnife.bind(this, mView);

    mAddedToCartAnimation.setAnimation("checked_done_.json");
    mAddedToCartAnimation.loop(false);
    mAddedToCartAnimation.playAnimation();

    // Remove fragment when the animation is finished.

    return mView;

}

当 lottie 动画结束时，我需要使用 getActivity().getSupportFragmentManager().beginTransaction().remove(this).commit(); 去除片段。如果我理解正确，当 isAnimating() Lottie 方法返回 false 时，动画已经结束了，由于在我的配置中动画不会循环，因此这是我应该删除当前片段的时候。但是我不能仅使用 if 语句，因为当它执行时，动画可能仍在进行中。

我需要一种方法，在 Lottie 动画结束时移除片段，我该怎么做？

- Tom Finet

Answer 1

这段代码对我有效：

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

        @Override
        public void onAnimationEnd(Animator animation) {
            Log.e("Animation:","end");
            //Your code for remove the fragment
            try {
                getActivity().getSupportFragmentManager()
                      .beginTransaction().remove(this).commit();
            } catch(Exception ex) {
                ex.toString();
            }
        }

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

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

我希望这能解决您的问题 :)

- Chefes

---

@Chefes：在第一个动画结束后，我尝试运行第二个动画。但第二个动画在完成第一轮后一直循环。是否有其他方法可以实现链式动画？ - ASN

注意：如果您将Lottie视图的可见性设置为不可见或消失，则动画监听器不会触发。 - SagaRock101

这个有 Angular 的等效代码吗？ - Titus

我没有使用Lottie和Angular的经验，但也许“complete”回调函数可以帮到你。@Titus https://www.npmjs.com/package/ngx-lottie#api - Chefes

Answer 2

Kotlin代码完成动画：

successAnimation.addAnimatorListener(object : Animator.AnimatorListener{
            override fun onAnimationRepeat(animation: Animator?) {
            }

            override fun onAnimationEnd(animation: Animator?) {
                //Add your code here for animation end
            }

            override fun onAnimationCancel(animation: Animator?) {
            }

            override fun onAnimationStart(animation: Animator?) {
            }

        })

- Rajeev Shetty

Answer 3

Kotlin 中，您可以这样做：

val lotWelcome=findViewById<LottieAnimationView>(R.id.lot_1) 
   
lotWelcome.addAnimatorListener(object : Animator.AnimatorListener {
       override fun onAnimationStart(animation: Animator) {
           Log.e("Animation:", "start")
       }
   override fun onAnimationEnd(animation: Animator) {
       Log.e("Animation:", "end")
       //Ex: here the layout is removed!
       firstScreen.visibility= View.GONE
   }

   override fun onAnimationCancel(animation: Animator) {
       Log.e("Animation:", "cancel")
   }

   override fun onAnimationRepeat(animation: Animator) {
       Log.e("Animation:", "repeat")
   }

  })

顺便提一下，您可以在此处查看原始文档： https://airbnb.io/lottie/#/android

- Mori