如何用 lottie 动画制作一个喜欢的按钮？

Question

我想在我的应用程序中使用 lottie 动画制作 like button。我已经下载了我想要的动画的 json 文件。单击后它起作用。但是心形图标默认是白色的。单击它后，它会随着动画变红。我希望它在我第二次单击后再次变白。我就是做不到。我该怎么做？

ProductActivity.java

   public class ProductActivity extends AppCompatActivity {
    LottieAnimationView imgIconLike;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_product);
        imgIconLike = findViewById(R.id.img_icon_like);
        }

     /* I did isAnimated boolean to handle second time click. Also
       try pauseAnimation, cancelAnimation and another else. I can't success it anyways. */

    private void registerHandler() {
        imgIconLike.setOnClickListener(new View.OnClickListener() {
            boolean isAnimated=false;
            @Override
            public void onClick(View v) {

               if (!isAnimated){
                imgIconLike.playAnimation();
                imgIconLike.setSpeed(3f);
                isAnimated=true;}
                else {
                    imgIconLike.cancelAnimation;
                    isAnimated=false;
                }

            }
        });
    }
  }

activity_product.xml

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/img_icon_like"
            android:layout_width="50dp"
            android:layout_height="58dp"
            app:layout_constraintBottom_toBottomOf="@+id/textFollow_cost"
            app:layout_constraintEnd_toStartOf="@+id/textFollow_cost"
            app:layout_constraintTop_toTopOf="@+id/textFollow_cost"
            app:lottie_autoPlay="false"
            app:lottie_fileName="1087-heart.json"
            app:lottie_loop="false" />

Answer 1

使用 2 个不同的函数，一个用于初始动画，另一个用于反向动画。我建议您也使用 animator listener。使用 removeAllAnimatorListeners 重置动画。

（这个例子是用 Kotlin 写的，但几乎是一样的）然后在你的布尔值中调用这两个方法。

private fun initAnimation() {
    imgIconLike?.playAnimation()

    imgIconLike?.addAnimatorListener(object : Animator.AnimatorListener {
        override fun onAnimationCancel(animation: Animator?) {}
        override fun onAnimationStart(animation: Animator?) {}
        override fun onAnimationRepeat(animation: Animator?) {}
        override fun onAnimationEnd(animation: Animator?) {
            imgIconLike?.removeAllAnimatorListeners()
        }
    })
}

private fun revertInitAnimation() {
    imgIconLike?.speed = -1F
    imgIconLike?.playAnimation()

    sendBtn?.addAnimatorListener(object : Animator.AnimatorListener {
        override fun onAnimationCancel(animation: Animator?) {}
        override fun onAnimationStart(animation: Animator?) {}
        override fun onAnimationRepeat(animation: Animator?) {}
        override fun onAnimationEnd(animation: Animator?) {
            imgIconLike?.removeAllAnimatorListeners()
        }
    })
}

Answer 2

I want it to get white again after I click a second time

您可以通过两种方式完成此操作：

第二次单击时将视图的可见性设置为 GONE，但这不会显示动画。
使用 setSpeed(float) 并将 -1F 传递给方法来反转 lottie view 的动画。

所以试试这个：

if (!isAnimated){ 
          imgIconLike.setSpeed(3f); 
          isAnimated=true; 
          imgIconLike.playAnimation();
} else { 
          imgIconLike.setSpeed(-1F); 
          isAnimated=false; 
          imgIconLike.playAnimation();
}

Answer 3

您可以通过停止动画并将进度设置为 0.0f 来执行此操作，请遵循以下代码：

private var isLiked: Boolean = false

animationLike.setOnClickListener {
    isLiked = !isLiked
    animationLike.apply {
        if (isLiked) {
            playAnimation()
        } else {
            cancelAnimation()
            progress = 0.0f
        }
    }
}

XML 看起来像：

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_like"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:lottie_rawRes="@raw/heart"/>

如何用 lottie 动画制作一个喜欢的按钮？

How can make a like button with lottie animation?

java

android

android-animation

lottie