如何用lottie动画制作一个like按钮？

Question

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

产品活动.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;
                }

            }
        });
    }
  }

活动产品.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

您可以使用标准API（例如playAnimation（）和reverseAnimationSpeed（））来实现此目的。

并使用LottieDrawable代替LottieAnimationView。

Answer 2

我希望第二次点击后再次变白

您可以通过以下两种方式执行此操作：

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

所以试试这个：

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

Answer 3

使用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 4

您可以通过停止动画并将进度设置为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"/>