Thursday, 24 October 2019

Animation end does not smoothly transition to new image

I have an image view that shows an up/down arrow depending on the state of the BottomSheet and I am trying to animate the arrow so that it looks nicer but at the end of the animation it does not smoothly transition to the new image. I see the old image for like a millisecond until it switches to the updated one.

here is my code

private val bottomSheetCallback = object:BottomSheetBehavior.BottomSheetCallback(){
        override fun onSlide(p0: View, p1: Float) {}

        /**
         * Listen to state changes of the bottom sheet
         */
        @SuppressLint("SwitchIntDef")
        override fun onStateChanged(p0: View, state: Int) {
            when(state){
                BottomSheetBehavior.STATE_COLLAPSED -> startRotateAnimation()
                BottomSheetBehavior.STATE_EXPANDED -> startRotateAnimation()
            }
        }

        private fun startRotateAnimation(){
            val rotateAnimation:RotateAnimation = RotateAnimation(0f,180f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
            rotateAnimation.duration = 500
            rotateAnimation.setAnimationListener(object : Animation.AnimationListener {

                override fun onAnimationStart(animation: Animation?) {
                }

                override fun onAnimationRepeat(animation: Animation?) {
                }

                override fun onAnimationEnd(animation: Animation?) {
                    when(_scannedBarcodesList.state){
                        BottomSheetBehavior.STATE_COLLAPSED -> expand.setImageResource(R.drawable.ic_keyboard_arrow_up_24px)
                        BottomSheetBehavior.STATE_EXPANDED -> expand.setImageResource(R.drawable.ic_keyboard_arrow_down_24px)
                    }
                }
            })
            expand.startAnimation(rotateAnimation)
        }
    }

I am trying to rotate the image 180 degrees (so up arrow points down for example) and then at the end of the animation actually switch the image view to the down arrow but like I said the animation seems to end before the image changes showing the up arrow for a millisecond so it looks bad.

How can I get rid of the animation ending before the image gets switched?



from Animation end does not smoothly transition to new image

No comments:

Post a Comment