动画结束不平滑过渡到新图像

Question

我有一个显示 up/down 箭头的图像视图，具体取决于 BottomSheet 的状态，我正在尝试为箭头制作动画，使其看起来更漂亮，但在动画结束时它不能顺利过渡到新图像。我看到旧图像大约一毫秒，直到它切换到更新的图像。

这是我的代码

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)
        }
    }

我正在尝试将图像旋转 180 度（例如向上箭头指向下方），然后在动画结束时实际将图像视图切换到向下箭头但就像我说的那样动画似乎之前结束图像变化显示向上箭头一毫秒，所以它看起来很糟糕。

我怎样才能避免在图像切换之前动画结束？

Answer 1

您在动画结束时更改图像导致 UI 卡顿。

试试这个方法

public static void rotateView(ImageView iv, int stateOfBottomSheet){
        RotateAnimation rotateAnimation;
        if(stateOfBottomSheet == BottomSheetBehavior.STATE_COLLAPSED){
            rotateAnimation = new RotateAnimation(180.0f, 0.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        }else {
            rotateAnimation = new RotateAnimation(0.0f,180.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        }
        rotateAnimation.setInterpolator(new DecelerateInterpolator());
        rotateAnimation.setRepeatCount(0);
        rotateAnimation.setDuration(300);
        rotateAnimation.setFillAfter(true);
        iv.startAnimation(rotateAnimation);
    }

Answer 2

我将把箭头（矢量绘图）放在底部的顶部 sheet 并尝试将它们顺时针和逆时针旋转 180°

BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(mBottomSheet);

        // change the state of the bottom sheet
        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

        // set callback for changes
        bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                // Called every time when the bottom sheet changes its state.
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                if (isAdded()) {
                    animateBottomSheetArrows(slideOffset);
                }
            }
        });

这里是 animateBottomSheetArrows 方法

  private void animateBottomSheetArrows(float slideOffset) {
            // Animate counter-clockwise
            mLeftArrow.setRotation(slideOffset * -180);
            // Animate clockwise
            mRightArrow.setRotation(slideOffset * 180);
        }

这个动画相当简单。我们只是将我们的 slideOffset 值传递给 animateBottomSheetArrows 方法并使用它来设置我们图像的旋转值。

动画结束不平滑过渡到新图像

Animation end does not smoothly transition to new image

android

android-animation