Question

我想用抽奖动画在我的应用中制作一个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

我希望它在第二次单击后再次变白

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

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

所以尝试一下：

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

Answer 2

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

并使用LottieDrawable代替LottieAnimationView。

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

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

4 个答案: