Android: Animation of moving View to the specified View's position

created at 06-03-2022 views: 5

first method

    private void moveViewToTargetView(View view, View targetView) {
        final float x = view.getX();
        final float y = view.getY();

        final float targetX = targetView.getX();
        final float targetY = targetView.getY();
        view.animate()
                .translationX(-(x - targetX))
                .translationY(-(y- targetY))
                .setDuration(800)
                .setInterpolator(new DecelerateInterpolator())
                .withLayer()
                .start();

        moveToWord(view, targetView);
    }

The x and y of the above two View are the x, y axis coordinates of the upper left corner of the specified view DecelerateInterpolator: It is a way of accelerating first and then decelerating

Just copy the code directly, pass two View objects and you can use it.

If you want to listen to the animation, set the listener through view.getAnimation().setAnimationListener

second method(complex version)

private void moveToWord(View view, View targetView) {
        final float x = view.getX();
        final float y = view.getY();

        final float targetX = targetView.getX();
        final float targetY = targetView.getY();
        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setDuration(600);
        valueAnimator.setObjectValues(new PointF(x, y));
        valueAnimator.setInterpolator(new DecelerateInterpolator());


        //First determine whether the target point is up or down

        final boolean flagX = ((x - targetX) > 0) ? true : false;
        final boolean flagY = ((y - targetY) > 0) ? true : false;


        valueAnimator.setEvaluator(new TypeEvaluator<PointF>() {

            @Override
            public PointF evaluate(float fraction, PointF startValue,
                                   PointF endValue) {
                //from 0.0 --->> 1.0

                PointF point = new PointF();
                //Here is to go backwards and finally reach the point of 200 200

                float fractionNeed = 1 - fraction;

                if (flagX) {
                    float vX = x - targetX;
                    point.x = vX * fractionNeed + targetX;
                } else {
                    float vX = targetX - x;
                    point.x = x + vX * fraction;
                }

                if (flagY) {
                    float vY = y - targetY;
                    point.y = vY * fractionNeed + targetY;
                } else {
                    float vY = targetY - y;
                    point.y = y + vY * fraction;
                }
                return point;

            }
        });
        valueAnimator.start();
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                PointF point = (PointF) animation.getAnimatedValue();
                float vX = point.x;
                float vY = point.y;
                // Explain that the maximum value of vx is the original coordinate of the view
                if (flagX) {
                    if (vX <= x && vX >= targetX) {
                        view.setX(vX);
                    }
                } else {//Indicate that the minimum value of vx is the original coordinate of the view
                    if (vX >= x && vX <= targetX) {
                        view.setX(vX);
                    }
                }

                // Explain that the maximum value of vY is the original coordinate of the view
                if (flagY) {
                    if (vY <= y && vY >= targetY) {
                        view.setY(vY);
                    }
                } else {//Indicate that the minimum value of vx is the original coordinate of the view
                    if (vY >= y && vY <= targetY) {
                        view.setY(vY);
                    }
                }
            }
        });
    }

This is the second implementation method. Compared with the first one, the amount of code is much more.

The first implementation method has a very interesting phenomenon. If you set the click event and start to move to the specified View, if you click on the View at the end position after the move, it will automatically return to the beginning. Location, the second implementation is not acceptable.

Both of the above methods can be used directly by copying the code

created at:06-03-2022
edited at: 06-03-2022: